Task 01 Task 01 화면 초안 빠르게 만들기 실습 가이드
📥 실습 입력 (Input)
- •
day6_meeting_notes.md(회의록)
💾 실습 출력 (Output)
- •
index.html
1. 스토리 및 실습 배경
스타트업의 한 주니어가 예약 관리 시스템을 개발하라는 지시를 받았습니다. 기획서에는 예약 상태별 달력과 리스트 뷰가 화려하게 그려져 있었지만, 로컬 에디터를 열고 빈 HTML 파일을 보니 막막함이 밀려왔습니다. 레이아웃 그리드는 어떻게 짜야 할지, CSS 스타일 파일은 어떻게 분리해야 할지 고민만 하다 하루가 지나갔습니다.
이처럼 처음 개발을 시작할 때 초기 구조 설정(Boilerplate)과 컴포넌트 레이아웃의 뼈대를 직접 그리는 일은 매우 비효율적이며 사기를 떨어뜨립니다. 이번 실습에서는 Codex에게 화면 기획 명세(Figma 레이아웃)를 텍스트로 설명하고, 작동 가능한 반응형 화면 초안과 컴포넌트 코드를 단 몇 초 만에 생성하여 개발의 초도 속도를 폭발적으로 높이는 방법을 학습합니다.
2. 학습 목표
- AI를 활용하여 요구사항 명세로부터 화면 초안(HTML/CSS)을 자동으로 생성할 수 있다.
- 기획 내용 및 레이아웃 정의서를 실제 브라우저에서 동작하는 화면 구조로 변환할 수 있다.
- 프로젝트의 기본 보일러플레이트 구조를 이해하고 개발의 첫 단계를 신속히 시작할 수 있다.
🛠️ 실제 따라 하기 실습 가이드
- 실습용 파일 생성: 아래 다운로드 버튼을 눌러
day6_meeting_notes.md파일을automation/폴더 내에 저장합니다. - Codex 초안 위임: Codex Client 프롬프트 입력창에 아래 **Codex 요청 프롬프트**를 복사해 전송하여 소스코드를 빌드합니다.
- 결과 검토 및 저장: 출력된 HTML 파일과 CSS 파일 구조가 알맞게 생성되어 대시보드 3단 카드 레이아웃과 네비게이션 구도가 올바르게 잡히는지 웹 브라우저에서 확인합니다.
실습 자료 다운로드
Codex 요청 프롬프트
Task 01 Prompt
제공된 레이아웃 명세를 기반으로, 예약 현황을 볼 수 있는 반응형 대시보드 화면의 HTML 마크업과 CSS 그리드 스타일 초안을 생성해 주세요. 예약 상태를 나타내는 대기/승인/완료 카드 컴포넌트와 좌측 네비게이션 바를 포함한 초기 프로젝트 구조를 제안해 주세요.
4. 결과물 예시
Codex는 회의 기록을 분석해 아래와 같이 정규화된 데이터 엔티티 매핑 및 Mermaid ERD 스크립트를 출력합니다.
| 파일명 | 설명 | 주요 컴포넌트 | 관계 정보 |
|---|---|---|---|
| index.html | 대시보드 화면 뼈대 마크업 | Sidebar, Header, Stats Cards | layout.css와 연결됨 |
| layout.css | 반응형 CSS 그리드 스타일 | Grid Columns, Flex Box Layout | index.html에 적용됨 |
5. AI 활용 포인트
- 보일러플레이트 자동 생성: 개발환경 구성에 지치지 않도록 적합한 기본 HTML 구조와 반응형 CSS Flexbox/Grid 구조 뼈대를 제공합니다.
- 컴포넌트 추상화: 텍스트 설명 속의 '상태별 요약 카드'나 '테이블 목록' 등의 요소를 클래스 단위 컴포넌트로 규격화해 생성해 줍니다.