프롬프트 한 줄로 첫 웹페이지 만들기

이 챕터를 끝내면 HTML·CSS를 전혀 몰라도 Codex에게 말 한 마디로 웹페이지 초안을 만들고 브라우저에서 바로 확인할 수 있어요.

프로젝트 폴더 열기

Codex 앱을 실행하고 작업할 폴더를 열어요. 빈 폴더 하나를 바탕화면이나 문서 폴더 안에 미리 만들어 두는 게 가장 깔끔해요(예: my-first-page). 그런 다음 앱 화면에서 "프로젝트 열기" 버튼을 눌러요.

운영체제 기본 폴더 선택창이 뜨면 방금 만든 폴더를 골라요. 선택이 끝나면 Codex가 그 폴더를 작업 공간으로 인식하고, 대화 입력창이 보이는 화면으로 바뀌어요.

여기서부터 모든 작업은 자연어 대화로 진행해요. 터미널 명령어를 외우거나 직접 입력할 필요가 없어요 — Codex가 내부적으로 필요한 명령을 알아서 실행해요.

첫 번째 프롬프트 보내기

아래 예시처럼 Codex에게 말을 걸어보세요. 그대로 복사해도 되고, 자신의 상황에 맞게 바꿔도 돼요.

Codex에게 이렇게 말해보세요: "내 포트폴리오 소개 페이지를 만들어줘. 이름은 '김지수', 직업은 'UX 디자이너', 간단한 자기소개 한 문단, 연락처 이메일 포함. 깔끔한 흰 배경에 검정 텍스트로."

프롬프트에 넣으면 좋은 요소:

• 페이지 목적 — 포트폴리오, 이벤트 안내, 제품 소개 등
• 들어갈 내용 — 이름, 문구, 섹션 이름 등 실제 텍스트
• 분위기·스타일 — 색상, 느낌(미니멀, 화려함, 따뜻함 등)
• 필수 요소 — 버튼, 이미지 자리, 링크 등

요소가 많을수록 결과물이 의도에 가까워져요. 처음엔 2~3가지만 넣어도 충분해요. 입력이 다 됐으면 보내기 버튼을 눌러 Codex한테 일을 맡겨요.

결과물 미리보기

Codex가 index.html 파일(또는 비슷한 이름의 HTML 파일)을 생성하면 대화창에 결과 요약과 함께 변경된 파일 목록이 표시돼요. 좌측 사이드바의 프로젝트 폴더 안에도 새 파일이 보여요.

미리보기는 Codex 앱 안에서 바로 가능해요. 상단 탭에서 브라우저 탭을 열면 작업 폴더 안의 파일을 그대로 띄워볼 수 있어요. 외부 브라우저를 따로 열 필요 없이 내가 만든 페이지가 바로 보여요.

다른 방법들: 1) 작업 폴더로 가서 파일을 더블클릭하면 운영체제 기본 브라우저로도 열 수 있어요. 2) Codex한테 *"방금 만든 파일을 미리볼 수 있게 로컬 서버 띄워줘"*라고 부탁하면 셸에서 작은 서버를 실행하고 http://localhost:포트 주소를 알려줘요. 이미지·폰트 같은 외부 자원이 더 안정적으로 로드돼요. 셋 중 편한 걸 쓰면 돼요.

페이지가 마음에 들지 않거나 내용을 바꾸고 싶어도 걱정하지 않아도 돼요. 다음 챕터에서 색상, 레이아웃, 텍스트를 프롬프트로 반복해서 수정하는 방법을 바로 다뤄요.