챗GPT 코덱스로 홈페이지 만드는 법, 기획부터 사이트 배포까지

코딩 없이 챗GPT 안의 코덱스 기능만으로 홈페이지를 기획하고, 디자인을 다듬고, 인터넷에 배포하는 방법을 정리했습니다. 영상에서 화자가 실제로 입력한 프롬프트를 복사해 쓸 수 있게 옮기고, 이름이 흐리게 나온 참고 사이트와 스킬 설치 명령은 확인해 채웠습니다.

이 글에서 다루는 것

예시는 디자이너 포트폴리오 홈페이지입니다. 소개, 작업물, 작업 절차에 이름·연락처·프로젝트 종류를 받는 문의 폼까지 들어갑니다. 진행 순서는 기획 → 디자인 만들기 → 디자인 다듬기 → 인터넷에 올리기, 이렇게 네 단계입니다. 예전 같으면 외주로 최소 수백만 원이 들었을 작업이라는 게 화자 호아린의 설명입니다.

준비물

• 챗GPT 앱 또는 웹: 코덱스는 별도 설치 프로그램이 아니라 챗GPT 안에 들어 있는 기능입니다.
• 챗GPT 플러스 요금제(월 20달러): 무료 요금제는 권장하지 않습니다. 이 작업은 플러스로 충분하고, 더 위 등급은 나중에 부족할 때 올려도 됩니다. 요금은 바뀌므로 공식 안내를 확인해야 합니다.
• 실제 포트폴리오 작업물 이미지 파일(영상에서는 6개 사용).
• 스킬 설치 명령어: 영상은 "명령어 하나 복사해서 붙여 넣기"라고만 말합니다. 4단계에 실제 명령을 적었습니다.

1단계. 코덱스 실행하고 추론 강도 바꾸기

앱의 왼쪽 위 "챗GPT"라고 쓰인 부분을 누르면 코덱스가 나옵니다. 화면 오른쪽 아래에 모델과 추론 강도(답하기 전에 얼마나 오래 생각할지 정하는 설정)가 있는데, 기본값이 "높음"으로 되어 있습니다. 이걸 "중간"으로 낮추세요. 홈페이지 제작 정도는 중간으로 충분하다는 설명입니다.

속도는 기본값 그대로 두면 됩니다. 빠르게 하면 사용량이 더 많이 소모되기 때문입니다. 같은 화면에서 이번 주 남은 사용량도 확인할 수 있으니, 보면서 얼마나 쓸지 조절합니다.

2단계. 프로젝트 만들고 레퍼런스 모으기

"프로젝트 선택" → "새 프로젝트 처음부터 시작"을 눌러 폴더를 만듭니다. 영상에서는 "코덱스 홈페이지"라는 이름을 썼습니다. 폴더 만들기도 앱 밖으로 나가지 않고 여기서 됩니다.

왼쪽 메뉴에 있는 "사이트" 스킬은 이 단계에서 쓰지 마세요. 디자인 결과가 밋밋해집니다. 이 스킬은 맨 마지막 배포 단계에서만 씁니다.

그냥 "홈페이지 만들어 줘"라고만 하면 다들 비슷한 결과가 나옵니다. 수많은 사람이 같은 AI를 쓰니 같은 스타일이 인터넷에 깔려 있는 셈입니다. 해결책은 만들기 전에 참고 사이트를 모으는 겁니다. 화자가 쓴 곳은 네 군데입니다.

• 웹플로우 템플릿: 구글에서 "웹플로우 템플릿"을 검색해 로그인한 뒤 포트폴리오 파트에서 "프리"(무료) 필터로 둘러봅니다. 화자는 템플릿 2개를 골라 하나는 전체 분위기·글자 크기, 다른 하나는 작업물 배치 방식 참고용으로 썼습니다.
• 핀터레스트: "포트폴리오 웹사이트", "디자이너 포트폴리오 레이아웃" 같은 검색어로 조각조각 아이디어를 모읍니다.
• 세이비(Savee): 색감·글꼴 조합 참고용입니다. 디자인 감각이 좋은 것만 모여 있다는 설명입니다.
• 어워즈(Awwwards): 잘 만든 사이트 모음을 봅니다.

모은 화면은 캡처해서 프로젝트 폴더 안에 "레퍼런스1", "레퍼런스2" 폴더를 만들어 나눠 넣어 둡니다. 5단계에서 이 폴더를 씁니다. 이 수집 단계를 하느냐 안 하느냐가 결과물의 차이를 결정한다는 게 화자의 강조점입니다.

3단계. 좋은 프롬프트 4요소로 "설명서 파일" 만들기

프롬프트를 대충 던지면 스타일뿐 아니라 내용 자체가 엉뚱하게 나옵니다. 누구 걸 만드는지, 보는 사람이 뭘 하게 할 건지가 하나도 없기 때문입니다. 화자가 꼽은 4요소는 이렇습니다.

1. "넥스트 JS(Next.js)로 만들어 달라"는 문구. 웹사이트를 만드는 도구 이름인데, 무슨 뜻인지 몰라도 이 단어를 넣는 게 중요하다고 합니다.
2. 페이지의 목적. 예: "프리랜서 브랜드 디자이너 개인 포트폴리오"
3. 무슨 일을 하고 무엇을 파는지. 예: "패키지 디자인 6년, 작업물 12개"
4. 가장 중요한 한 줄, 방문자가 이 페이지를 보고 뭘 하게 만들 건지. 예: "프로젝트 문의 버튼을 누르게"

여기에 섹션 구성, 화면 크기, 하지 말아야 할 것까지 넣으면 완성입니다. 전체 프롬프트는 화자가 고정 댓글 안내로 따로 배포했고 자막에는 나오지 않아, 4요소를 담은 예시를 편집자가 만들었습니다.

Next.js로 홈페이지를 만들려고 해. 먼저 요구사항을 정리한 설명서 파일을 만들어 줘.
- 목적: 프리랜서 브랜드 디자이너 개인 포트폴리오
- 하는 일: 패키지 디자인 6년, 보여줄 작업물 12개
- 방문자가 할 일: 프로젝트 문의 버튼을 누르게 한다
- 섹션: 소개, 작업물, 작업 절차, 후기, 문의 폼(이름, 연락처, 프로젝트 종류, 예산)
- 화면: 데스크톱과 모바일 모두 대응
- 하지 말 것: 보라색 그라데이션, 의미 없는 아이콘 나열, 과장된 문구

이 프롬프트를 전송하면 설명서 파일이 자동으로 생성됩니다. 요구사항 외에 접근성·성능 원칙, 금지 사항 체크리스트까지 AI가 알아서 채워 넣습니다. 여기서 꿀팁 하나. 이 설명서 파일 맨 위에 다음 문구를 추가하세요.

네가 할 수 있는 일은 나한테 시키지 말고 직접 해 줘. 그리고 직접 한 다음에 결과만 보고해 줘. 그리고 디자인 작업에는 사이트 스킬을 절대 사용하지 마라.

AI가 서버 실행이나 브라우저 확인처럼 스스로 할 수 있는 일도 자꾸 사용자에게 시키는 버릇이 있어서, 이 문구 없이는 작업 시간이 쓸데없이 길어진다는 게 이유입니다.

4단계. "스킬" 설치

콘텐츠가 좋아져도 디자인(생김새)까지 좋아지는 건 아닙니다. 그래서 AI가 작업 전에 읽는 별도 지침서인 스킬을 씁니다. 화자가 쓴 스킬은 "GPT 테이스트"(gpt-taste)로, 공개 저장소 taste-skill에 들어 있는 GPT·코덱스용 디자인 스킬입니다.

설치는 명령어 하나를 복사해 붙여 넣기만 하면 됩니다. 저장소 README 기준 명령은 이렇습니다. 코덱스 대화창에 "아래 명령을 실행해서 스킬을 설치해 줘"라고 붙여 넣거나, 터미널에서 직접 실행합니다. 터미널에서 쓰려면 Node.js(nodejs.org의 LTS 버전)가 먼저 설치돼 있어야 합니다.

npx skills add https://github.com/Leonxlnx/taste-skill --skill "gpt-taste"

설치 후 앱을 껐다가 다시 켜야 적용됩니다. 작업 내용은 사라지지 않으니 걱정하지 않아도 됩니다. 다시 켠 뒤 슬래시(/)를 입력했을 때 "GPT 테이스트"가 뜨면 설치 성공입니다.

5단계. 레퍼런스 폴더 지정하고 첫 결과물 뽑기

/GPT테이스트 명령을 입력하고, 앞서 만든 레퍼런스 폴더의 용도를 알려줍니다. 레퍼런스1은 전체 분위기·글자 크기 기준, 레퍼런스2는 작업물 배치·색감·여백 기준입니다. 사이트 내용은 이미 설명서 파일에 있으니 여기서는 참고 폴더 얘기만 하면 됩니다.

여기에 반드시 넣어야 할 한 줄이 있습니다.

이미지를 그대로 복제하지 말고 구조랑 분위기만 참고해라.

이 문구가 없으면 참고 사이트를 그대로 베낍니다. 첫 결과물은 소개·작업물·문의 버튼까지 잘 나오고 데스크톱·모바일 화면도 잘 대응합니다. 다만 작업물 이미지·후기는 임시(placeholder, 자리만 채운 가짜 내용)로 채워져 있고, 움직임이 없어 밋밋합니다. 이건 다음 단계에서 고칩니다.

6단계. 디자인 다듬기 ① 색감·폰트 입히기

스킬을 써도 AI가 좋아하는 색과 폰트가 반복됩니다. 화자가 쓴 해결책은 "겟디자인"이라는 사이트로, getdesign.md로 보입니다. 에어비앤비·애플·클로드 등 300개 넘는 회사의 색깔·글꼴·여백 기준이 파일 하나씩 정리돼 있습니다. 원하는 스타일을 고르고(화자는 "클로드 스타일") "다운로드 디자인" 버튼으로 파일을 받은 뒤, 그 파일을 코덱스에 그대로 첨부합니다. 이 파일들은 각 회사의 공식 디자인 시스템이 아니라 공개된 화면을 분석해 만든 참고용이라는 점은 알아 두세요.

여기서 핵심은 "뭘 시키느냐"가 아니라 "뭘 막느냐"입니다. 화자는 "구조랑 섹션 순서 배치는 절대 바꾸지 말라고 꼭 적으라"고 조언합니다. "애니메이션도 그대로 두라"는 말도 덧붙입니다. 바꿔도 되는 것은 색상, 폰트, 가격, 질감뿐이라고 못을 박습니다. 복사용으로 묶으면 이렇습니다.

첨부한 디자인 파일의 색상, 폰트, 여백 기준을 우리 사이트에 적용해 줘.
구조랑 섹션 순서 배치는 절대 바꾸지 마. 애니메이션도 그대로 둬.
바꾸는 것은 색상, 폰트, 가격, 질감뿐이다.

이걸 안 적으면 사이트를 처음부터 다시 만들어 버릴 수 있습니다. 결과는 배치는 그대로인데 분위기만 완전히 바뀌어, AI가 만든 티가 덜 나는 홈페이지가 됩니다.

7단계. 디자인 다듬기 ② 진짜 사진으로 바꾸기

기존 이미지는 전부 AI가 생성한 가짜 사진이라 포트폴리오로 쓰기엔 말이 안 됩니다. 프로젝트 폴더 안에 이미지 저장용 폴더를 만들어 달라고 요청하고, 앞으로 이미지는 전부 이 폴더에 저장하라는 규칙을 설명서 파일에도 추가해 달라고 합니다. 자막에는 "S 폴더"로 찍혔는데, 웹 프로젝트에서 이미지를 모아 두는 폴더는 보통 assets라는 이름을 씁니다.

프로젝트 폴더 안에 이미지 보관용 assets 폴더를 만들어 줘. 앞으로 이미지는 전부 여기에 저장하라는 규칙을 설명서 파일에도 추가해 줘.

실제 작업물 이미지(영상에서는 6개)를 이 폴더에 넣은 다음 이렇게 요청합니다.

폴더에 세제 작업물 이미지를 넣어 뒀어. 작업물을 순서대로 넣고 비율이 안 맞는 건 잘리지 않게 잘 처리해 줘.

"세제"는 자막 그대로이며, 문맥상 "실제"입니다. 복사해 쓸 때는 "실제 작업물"로 고쳐 넣으면 됩니다.

8단계. 디자인 다듬기 ③ 움직임(애니메이션) 넣기

후기 섹션이 화살표로 하나씩 넘기는 방식이면 밋밋합니다. 화자는 전 세계 디자이너들이 만든 무료 UI 움직임 부품을 모아둔 사이트에서 원하는 부품을 검색합니다. 사이트 이름은 영상에 나오지 않지만, 21st.dev나 Aceternity UI처럼 부품마다 프롬프트 복사 버튼을 둔 곳이 이런 방식입니다. 화자는 "무빙 카드"로 검색해 카드가 옆으로 계속 흘러가는 "인피니티 무빙 카드(Infinite Moving Cards)"를 골랐습니다. "프롬프트 복사" 버튼을 누르면 프롬프트가 복사됩니다.

여기서 꿀팁 하나 더. 프롬프트 텍스트만 복사하지 말고 화면도 같이 캡처해서 첨부하세요. 글로만 설명하면 코덱스가 다르게 이해할 수 있는데, 화면을 같이 주면 훨씬 정확해집니다. 원하는 것뿐 아니라 원하지 않는 것도 같이 말해야 합니다. 예를 들면 이렇습니다.

(복사한 프롬프트 붙여 넣기)
위 부품을 후기 섹션에 적용해 줘. 첨부한 화면처럼 카드가 옆으로 계속 흐르고, 마우스를 올리면 멈추게 해 줘.
다른 섹션과 색상, 폰트는 바꾸지 마. 후기 내용은 설명서 파일의 실제 후기로 채워 줘.

결과는 카드가 계속 옆으로 흘러가다가 마우스를 올리면 멈추고, 떼면 다시 움직이는 형태로 바뀌고, 후기 내용도 실제 후기로 교체됩니다.

9단계. 저장하기

"저장해"라고 말하면 AI가 이름까지 붙여서 저장해 줍니다. 이름을 잊었으면 목록을 요청하면 저장 시각까지 나옵니다. 언제든 되돌릴 수 있으니 마음껏 시도해도 됩니다.

10단계. 코덱스 홈페이지를 인터넷에 배포하기

지금까지 만든 건 내 컴퓨터에서만 열립니다. 2단계에서 쓰지 말라고 했던 "사이트" 스킬을 이번에는 배포용으로 씁니다. 사이트(Sites)는 챗GPT가 만든 웹사이트를 오픈AI 서버에 올려 주소를 붙여 주는 기능입니다.

문제는 설명서 파일에 "사이트 스킬을 쓰지 말라"는 규칙이 이미 적혀 있다는 점입니다. 이렇게 규칙을 바꿔 달라고 말해야 합니다.

디자인 작업할 때만 금지지만 최종 배포에는 허용한다.

진행 중 챗GPT 계정으로 로그인하는 과정이 나오는데, 평소 쓰던 계정으로 로그인하면 됩니다. 올라간 직후에는 "나만 보기"로 설정돼 있으므로, "인터넷에 누구나"로 바꾸고 "게시" 버튼을 눌러야 다른 사람이 볼 수 있습니다. 링크를 복사해 열어보면 챗GPT 사이트 주소로 접속되는 걸 확인할 수 있습니다.

자기 도메인을 쓰고 싶으면 설정에서 "맞춤 도메인 추가"를 누르고 주소를 입력하면 됩니다. 다만 이 도메인은 다른 곳에서 미리 구매해서 가지고 있어야 하고, 도메인 구매처 관리 화면에서 DNS 설정(주소를 서버와 연결하는 기록)을 바꿀 수 있어야 합니다. 없으면 기본 제공 주소로도 충분합니다.

자주 막히는 곳

• 참고 사이트를 그대로 베낀 것 같은 결과가 나온다 → "이미지를 그대로 복제하지 말고 구조랑 분위기만 참고해라" 문구를 빼먹은 겁니다. 반드시 넣으세요.
• 색감만 바꾸려 했는데 사이트가 통째로 다시 만들어진다 → "바꾸는 것은 색상·폰트·가격·질감뿐"이라는 제한 문구가 빠진 겁니다. 구조·섹션 순서·애니메이션은 유지하라고 명확히 적어야 합니다.
• 스킬 설치 후에도 슬래시 명령이 안 뜬다 → 앱을 재시작하지 않은 겁니다. 껐다가 다시 켜세요. 작업 내용은 그대로 남습니다.
• 배포하려는데 "사이트 스킬 사용 금지" 규칙 때문에 막힌다 → 설명서 파일의 금지 규칙이 배포 단계에도 그대로 적용된 겁니다. "디자인 작업할 때만 금지, 최종 배포에는 허용"으로 수정하세요.
• 사용량이 빨리 떨어진다 → 추론 강도가 "높음"이거나 속도가 "빠르게"로 되어 있을 수 있습니다. 1단계 설정을 다시 확인합니다.

같은 순서로 다른 홈페이지도 만든다

화자는 "대단한 걸 한 게 아니라 디자인 파일 하나 놓고, 사진 폴더에 넣고, 움직임 가져온 게 전부"라고 말합니다. 처음의 미니멀하고 밋밋한 톤이 색도 따뜻해지고 사진도 실제 작업물로 바뀌면서 완전히 다른 사이트가 됩니다. 이 순서(레퍼런스 수집 → 목적 설명 → 색감 입히기 → 사진 넣기 → 움직임 넣기 → 배포)는 디자이너 포트폴리오뿐 아니라 카페 홈페이지, 학원 소개 페이지, 쇼핑몰 랜딩 페이지, 병원 홈페이지에도 그대로 적용됩니다. 바뀌는 건 설명서 파일에 무엇을 적느냐뿐입니다.

이 글은 자막 기반(빠른 모드)으로 정리했고 화면 판독 정보는 포함돼 있지 않습니다. 자막 표기는 "채치T"(챗GPT), "세이비"(Savee), "어워즈"(Awwwards), "겟디자인"(getdesign.md로 추정), "S 폴더"(assets 폴더로 추정), "세제"(실제)였고, 6단계의 "가격"은 문맥상 "간격"일 수 있어 원래 표기대로 두었습니다.

출처: youtu.be/…