[Codex] 4편: Codex로 첫 프로그램 만들기

← Codex Guide

1편2편3편 4편5편6편7편

4편 · Build

Codex로
첫 프로그램 만들기

HTML 페이지와 계산기를 직접 만들어보며 Codex와 함께 개발하는 느낌을 경험합니다.

독자 목표  ·  ✅ AI와 함께 개발 경험

프로젝트 1: HTML 랜딩 페이지 만들기

1. Codex에게 초안 요청

   "카페 소개 랜딩 페이지를 HTML 한 파일로 만들어줘.
   섹션은 헤더(로고+메뉴), 히어로, 메뉴 소개, 위치 안내 4개.
   CSS는 파일 내에 포함하고 모바일도 잘 보이게 해줘."
2. 결과 확인 후 수정 요청

   "헤더 배경색을 #2C1810으로 바꾸고,
   히어로 섹션에 반투명 오버레이를 추가해줘."
3. 기능 추가

   "스크롤하면 헤더가 고정되도록 sticky 속성을 추가하고,
   맨 위로 이동하는 버튼도 우측 하단에 넣어줘."

프로젝트 2: 계산기 만들기

프롬프트 예시 "HTML+CSS+JS로 계산기를 만들어줘.
기능: 사칙연산, 소수점, C(초기화), 백스페이스.
디자인: 다크 테마, 버튼에 hover 애니메이션.
키보드 입력도 지원해줘."

Codex가 완성한 코드를 calculator.html로 저장하고 브라우저에서 열면 바로 동작하는 계산기를 확인할 수 있습니다.

반복 개선의 힘

한 번에 완벽한 결과를 기대하지 마세요. 개발은 원래 반복입니다. Codex와 대화를 이어가며 조금씩 개선하는 것이 가장 효율적인 방법입니다.

1️⃣

초안 생성

기본 구조와 기능을 먼저 만들어 달라고 요청합니다.

2️⃣

결과 확인

브라우저나 에디터에서 실제로 열어 직접 확인합니다.

3️⃣

구체적 수정

"이 부분이 이렇게 안 됩니다"라고 구체적으로 말합니다.

✅이 편의 목표: Codex와 함께 실제로 동작하는 프로그램을 처음부터 만들었습니다.

← 이전 편AI에게 일 잘 시키는 방법 다음 편 →Codex로 코드 분석하기

AI 초보자를 위한 OpenAI Codex 사용법

4편 / 7편 · 정보 기준: 2026년 6월