이 문서는 웹 사용자 인터페이스(UI, 유아이)를 기획하고 실제 프런트엔드 애플리케이션 코드로 변환하는 전 과정을 설명한다. 텍스트 형태의 지시문인 Prompt(프롬프트)를 입력하여 초기 화면 디자인을 생성하고, 이를 Figma(피그마)와 JSON(제이슨) 데이터로 가공한 뒤 React(리액트) 코드로 변환하는 작업 흐름을 다룬다. 디자인 생성 도구의 활용법과 Tailwind CSS(테일윈드 씨에스에스) 기반 프런트엔드 프로젝트 설정 규칙을 순서대로 살펴본다.
1. 텍스트를 디자인으로 생성하기
텍스트 지시문을 활용하여 화면 설계를 진행한다. Prompt(프롬프트)는 인공지능 모델에 작업을 지시하는 명령어 문장이다. 사용자가 원하는 레이아웃과 세부 조건을 문장으로 입력하면 인공지능이 이를 해석하여 시각적인 웹 화면을 생성한다. 이는 건축가가 시공사에 전달하는 상세 설계 지시서와 같은 역할을 한다. 아래 링크를 통해 Stitch(스티치) 도구로 이동한 뒤 프롬프트를 입력한다.
- 프롬프트를 디자인으로 변환
아래 프롬프트는 인터넷 동영상 서비스 화면인 ‘고플릭스’의 메인 UI를 생성하도록 요청하는 지시문이다. 배경 색상, 브랜드 강조 색상, 상단 영역, 추천 영화 배너, 가로 스크롤 목록, 마우스 호버 효과, 사용할 글꼴 및 한국어 출력 조건을 상세히 규정한다.
테일윈드 v4를 사용하여 '고플릭스'라는 이름의 인터넷 동영상 서비스 웹 화면을 제작한다. 주요 강조 색상은 노란색(yellow-500)을 사용한다. 전체 배경은 어두운 색으로 설정하여 영화에 집중할 수 있게 한다.
상단 영역에는 고플릭스 이름(노란색), 검색창, 사용자 단추를 배치한다. 중앙의 가장 큰 영역에는 주요 추천 영화의 큰 사진과 함께 노란색의 '재생' 단추를 눈에 띄게 배치한다. 그 아래에는 장르별 영화 목록을 여러 줄로 나열하며, 각 줄은 가로로 넘겨볼 수 있도록 만든다. 영화 사진 위에 마우스를 올리면 테두리가 노란색으로 강조되는 효과를 추가한다.
필수 조건: 테일윈드 v4를 사용 . 화면을 생성한 후 나에게 설명하는 모든 답변과 코드 주석, 화면 내의 모든 글자는 반드시 한국어로 출력한다.
글꼴은 https://cdn.jsdelivr.net/npm/pretendard-std@1.3.9/subset.min.js 를 사용한다
프롬프트 작성 시 yellow-500과 같은 구체적인 스타일 값을 명시하면 인공지능이 임의로 색상을 지정하여 디자인 일관성을 해치는 현상을 방지한다. 또한 한국어 출력 조건을 누락할 경우 기본 설정에 따라 영문 텍스트가 생성되므로, 모든 화면 요소와 주석에 한국어 적용 조건을 명시해야 한다.
- 생성된 디자인을 피그마로 복사한다.
위 이미지는 Stitch(스티치)에서 생성된 디자인 결과물을 Figma(피그마) 작업 공간으로 복사하는 화면을 보여준다. 우측 상단의 복사 기능을 실행한 뒤 Figma(피그마) 캔버스에 붙여넣으면 생성된 레이아웃과 컴포넌트가 그대로 이전된다. 각 디자인 레이어가 정상적으로 분리되어 배치되었는지 확인한다.
2. 피그마 디자인으로 생성하기
Figma(피그마)로 가져온 디자인 요소를 코드 작성에 필요한 데이터 형태로 변환한다. JSON(제이슨, JavaScript Object Notation)은 데이터를 키와 값의 형태로 체계적으로 정리하여 주고받는 경량 데이터 교환 형식이다. 디자인에 포함된 각 컴포넌트의 위치, 색상, 여백 정보를 데이터로 변환하면 인공지능이 이를 읽고 코드로 재구성한다. 이는 부품의 상세 규격과 배치 순서가 적힌 조립 설명서와 같다.
- 디자인을 json 으로 변환
참조페이지
참조 페이지의 안내에 따라 플러그인을 사용하여 디자인 구조를 1-structure.json 파일로 추출한다. 추출한 JSON(제이슨) 파일을 바탕으로 인공지능 코딩 도구에 아래 프롬프트를 전달하여 실제 웹 애플리케이션 코드를 생성한다.
다음 스택으로 React 앱을 만들어줘:
- 빌드 도구: Vite (최신 버전)
- React (최신 버전), JavaScript만 사용 — TypeScript 금지
- React-Compress 로 설치
- Tailwind CSS v4 (최신 버전) 스타일링
- 모든 의존성은 최신 버전으로 설치
프로젝트 설정 조건:
- `npm create vite@latest` 명령어로 react (JavaScript) 템플릿 사용
- Tailwind CSS v4는 `npm install tailwindcss @tailwindcss/vite` 로 설치
- vite.config.js에 @tailwindcss/vite 플러그인으로 Tailwind 설정
- CSS 파일에 `@import "tailwindcss"` 로 Tailwind 불러오기
- tailwind.config.js 사용 금지 (v4는 CSS 기반 설정 방식)
- TypeScript 파일 금지 (.ts, .tsx, tsconfig 모두 금지)
파일 구조:
- src/main.jsx
- src/App.jsx
- src/index.css (@import "tailwindcss" 포함)
- vite.config.js
만들어야 할 앱: 1-structure.json 파일을 참조
이 코드는 Vite(비트) 빌드 도구와 React(리액트), Tailwind CSS(테일윈드 씨에스에스) v4 환경에 맞추어 프로젝트를 초기화하도록 지시하는 프롬프트이다. Tailwind CSS(테일윈드 씨에스에스) v4는 기존의 tailwind.config.js 설정 파일 대신 CSS 파일 내부의 @import 지시문과 Vite(비트) 플러그인을 직접 사용한다. 따라서 이전 버전의 설정 파일이 생성되지 않도록 금지 조건을 명시해야 설정 충돌 오류를 방지할 수 있다. 또한 TypeScript(타입스크립트) 관련 설정을 제외하고 순수 JavaScript(자바스크립트) 파일 구조로 한정하여 프로젝트 구성을 단순화한다.
3. 리믹스
Remix(리믹스)는 기존에 생성된 디자인의 골격을 유지하면서 프롬프트 수정을 통해 새로운 변형 디자인을 도출하는 기능이다. 전체 레이아웃을 처음부터 다시 구성하지 않고 일부 스타일이나 세부 요소만 변경하므로 작업 시간을 단축시킨다. 이는 기존 자동차 프레임을 유지하면서 외관 색상이나 옵션 부품만 교체하여 새로운 파생 모델을 제작하는 방식과 유사하다.
- 스티치 디자인 리믹스하기
위 화면에서는 Stitch(스티치)에서 Remix(리믹스) 기능을 실행하여 디자인을 수정하는 과정을 보여준다. 변경하고자 하는 조건이나 추가 디자인 요소를 입력창에 작성한 뒤 실행하면 기존 디자인의 구조적 틀을 유지한 채 요구사항이 반영된 새로운 화면이 생성된다. 원하는 시각적 완성도에 도달할 때까지 반복적으로 리믹스하여 디자인을 다듬는다.