이제 이미지부터 만드세요. 코덱스 앱에서 UI 이미지 생성부터 개발, 배포까지 전부! 19분 단계별 완벽 가이드

채널: 디자인하는AI | 길이: 19:47 | 날짜: 2026-07-01

핵심 내용

• 영상의 핵심 주장은 “처음부터 코드로 만들기보다, 먼저 고품질 UI 이미지를 생성한 뒤 그 시안을 코드 구현의 기준으로 삼자”는 것이다. GPT 이미지 2.0 기반 이미지 생성은 바이브 코딩이 놓치기 쉬운 무드, 복잡한 레이아웃, 실험적인 디테일을 먼저 탐색하게 해준다. 코드 기반 바이브 코딩은 작동 화면이나 규격화된 컴포넌트를 빠르게 만드는 데 강하지만, 초반 디자인 방향이 평범해지거나 의도와 달라질 수 있다. 따라서 이미지 시안을 먼저 만들고 원하는 방향을 고른 뒤 개발하면 토큰과 시간을 덜 낭비한다.

• 발표자는 이번 예제로 가상의 프리미엄 클린 스킨케어 브랜드 LUMÉ의 랜딩 페이지를 만든다. 목표는 단순 이미지 시안 생성이 아니라, Codex 데스크톱 앱 안에서 시안 생성, 에셋 분리, React/Tailwind 구현, 반응형 수정, 애니메이션 추가까지 이어지는 제작 흐름을 보여주는 것이다.

• Codex 사용 준비 단계에서는 데스크톱 앱 설치, 로그인, 작업할 로컬 폴더 지정, 권한 설정을 설명한다. 프로젝트 작업은 프롬프트 입력창 아래의 “프로젝트에서 작업하기”를 통해 폴더를 추가하는 방식으로 시작한다. 권한은 기본 권한에서 나 대신 승인으로 바꾸면 위험한 작업을 제외한 명령은 매번 확인 없이 진행되어 작업 흐름이 빨라진다. 모델 인텔리전스는 작업 복잡도에 따라 높고 낮음을 고를 수 있지만, 영상에서는 우선 중간으로 설정한다.

• 작업 속도 옵션도 언급된다. 속도 메뉴에서 작업 속도를 높이면 약 1.5배 빨라지는 대신 크레딧 소모가 2배로 늘어난다고 설명한다. 영상에서는 별도 속도 조정 없이 진행한다. 발표자는 Plus 플랜도 입문자나 무거운 작업이 아닌 경우에는 크레딧이 크게 부족하지 않다고 말하고, Pro 플랜은 더 여유롭다고 덧붙인다. 즉 비용과 속도 사이의 선택지가 있다는 점을 초반에 정리한다.

• 이미지 시안의 품질을 결정하는 핵심 요소는 두 가지로 정리된다. 첫째는 목적에 맞는 프롬프트를 얼마나 구체적으로 쓰는가이고, 둘째는 어떤 스킬을 쓰는가이다. 영상에서는 /로 스킬을 검색해 imagegen frontend 계열 스킬을 선택하는 흐름을 보여준다. 이 스킬은 조잡한 AI 느낌을 줄이고, 섹션별 가로 이미지를 정교하게 나누어 실무용 웹페이지 시안을 뽑도록 돕는 업무 매뉴얼 역할을 한다.

• LUMÉ 시안 프롬프트는 레이아웃 수치를 매우 구체적으로 지정한다. 예시는 Body width 1920px, Content max-width 1440px, 좌우 마진 각 240px처럼 데스크톱 브라우저 기준을 명확히 적는다. 생성 모델이 데스크톱 웹을 태블릿처럼 크게 만들거나 UI 요소를 과하게 키우는 경향을 막기 위해 전체 가로 폭, 컨테이너 최대 너비, 바깥 마진을 픽셀 단위로 지정한다. 또한 섹션은 Navigation, Hero, Brand Philosophy, Product Collection, Ingredients Editorial, Ritual Guide, Results, Newsletter, Footer의 총 9개로 잡는다.

• 프롬프트에서는 구체적인 섹션 목록은 주지만, 각 섹션의 세부 배치를 지나치게 강제하지 않는다. 이유는 이 단계가 바로 코드를 짜는 단계가 아니라 이미지로 시각적 가능성을 탐색하는 단계이기 때문이다. GPT 이미지 모델이 어느 정도 자유롭게 창의적인 결과물을 만들도록 여지를 남겨야 다양한 시안을 비교할 수 있다. 스타일 방향은 럭셔리, 미니멀, 보태니컬로 잡고, 금지 사항에는 좁은 모바일 비율, 과하게 큰 텍스트, 반복적이고 단순한 UI를 넣는다.

• 생성 결과는 하나의 긴 웹페이지 이미지가 아니라 섹션별 이미지로 순차 생성된다. Codex의 코드 파일은 로컬 폴더에 자동 저장되지만, 생성 이미지 자체는 나중에 개발과 호스팅에서 불러와야 하므로 별도로 저장해야 한다고 강조한다. 생성된 결과는 Navigation, Hero, Brand Philosophy, Product Collection, Ingredients, Ritual Guide, Social Proof, Newsletter, Footer 등으로 나뉜다. 발표자는 비트맵 기반 이미지임에도 사선 크롭, 얇은 라인, 레이어드 구성처럼 바이브 코딩만으로 만들기 어려운 디테일이 잘 나온다고 평가한다.

• 같은 프롬프트를 여러 번 실행해 변형 시안을 만드는 것도 추천한다. 동일한 톤앤무드는 유지되지만, 레이아웃과 배치가 다른 콘셉트로 생성되기 때문에 선택지가 늘어난다. 여러 결과를 만든 다음 마음에 드는 섹션만 선별해 조립하면 시각적 탐색을 거친 더 완성도 높은 결과물을 얻을 수 있다. 이는 이미지 생성 방식의 강점을 가장 잘 살리는 워크플로로 제시된다.

• 코드 구현 단계의 핵심은 “코드로 구현할 UI”와 “순수 이미지 에셋으로 써야 할 부분”을 명확히 분리하는 것이다. 히어로 섹션에서는 배경 이미지는 에셋으로 쓰고, 로고, 내비게이션, 중앙 텍스트, 메인 카피, CTA 버튼은 코드로 작성해야 한다고 설명한다. 그래서 생성된 히어로 이미지에서 UI 요소를 제거하고, 웹용과 모바일용 배경 이미지를 따로 만들어 일관성을 유지하도록 요청한다. 이후 React와 Tailwind로 전체 너비, 컨테이너 최대 너비, 좌우 마진을 반영해 구현한다.

• 구현 후에는 로컬호스트 서버를 띄워 브라우저에서 검수한다. 첫 결과물은 배경 이미지, 타이틀, 서브타이틀, CTA, 내비게이션이 들어갔지만 행간, 내비게이션 정렬, 브레이크포인트, 일부 요소 잘림 같은 문제가 있었다. 발표자는 이를 한 번에 완벽히 만들려 하지 않고, 화면 캡처와 원본 섹션 이미지를 함께 첨부해 수정 방향을 정교하게 설명한다. 또 Codex의 주석 달기 기능으로 특정 컴포넌트나 텍스트 영역을 직접 선택해 수정 요청을 남기는 방법도 보여준다.

• 이후 Brand Philosophy와 Product Collection 섹션도 같은 방식으로 확장한다. 사선으로 크롭된 이미지 박스, 주변 얇은 라인, 벤토 그리드, 제품 컬렉션 카드 등은 첫 구현만으로는 완벽하지 않았지만, 에셋화와 주석 기반 수정을 반복하면서 정렬과 완성도가 좋아진다. 일부 라인이 콘텐츠 영역을 침범하거나 간격이 어긋나는 문제는 주석과 프롬프트로 수정한다. 최종적으로 세 개 섹션은 데스크톱, 태블릿, 모바일에서 비교적 안정적으로 전환된다.

• 정적인 결과물에 생동감을 더하기 위해 스크롤 애니메이션과 hover 효과를 추가한다. 각 섹션 요소가 스크롤 시 자연스럽게 나타나고 움직이도록 부드러운 애니메이션을 요청한다. 히어로 배경은 이미지 대신 영상으로 교체하기 위해 Gemini의 영상 생성 모델 Veo를 사용해 루프형 배경 영상을 만든다. 완성된 영상을 다시 Codex에 업로드하고 히어로 이미지 대신 적용해 더 시선을 끄는 사이트로 마무리한다.

상세 분석

1. 이미지 우선 워크플로의 문제의식

발표자는 바이브 코딩이 빠르지만 초반 디자인 품질을 보장하지는 않는다고 본다. 작동 화면이나 컴포넌트를 빠르게 만드는 데는 좋지만, 처음부터 코드로 생성하면 결과물이 평범하거나 사용자의 의도와 다르게 나올 수 있다. 그래서 먼저 비트맵 기반 웹사이트 시안을 만들고, 그 시안을 기준으로 개발하는 흐름을 제안한다. 이 방식은 전체 무드, 실험적 레이아웃, 복잡한 디테일을 코드보다 자유롭게 탐색하게 해준다.

2. Codex 프로젝트와 권한 설정

모든 과정은 Codex 데스크톱 앱에서 진행된다. 사용자는 앱을 설치하고 로그인한 뒤, 프로젝트 파일을 읽고 생성하고 수정할 로컬 폴더를 지정한다. 권한은 나 대신 승인으로 바꾸면 위험한 작업을 제외하고는 명령을 자동 승인해 반복 확인을 줄인다. 모델 성능은 작업 복잡도에 따라 조정 가능하며, 영상에서는 중간값으로 시작한다.

3. 이미지 품질을 좌우하는 프롬프트와 스킬

결과물의 퀄리티는 “프롬프트”와 “스킬” 두 가지에 크게 좌우된다. LUMÉ 예제에서는 데스크톱 웹 기준의 폭, 컨테이너, 마진을 수치로 지정해 태블릿처럼 보이는 결과를 막는다. 동시에 섹션 구성은 9개로 나누되 너무 세부적으로 묶지 않아 이미지 모델이 창의적 변형을 만들 수 있게 한다. 스킬은 웹페이지 시안 이미지를 섹션별로 정교하게 생성하도록 돕는 보조 지침으로 사용된다.

4. 스킬 설치와 사용 방식

영상에서는 GitHub의 taste-skill 계열 저장소에서 스킬을 설치하는 흐름을 설명한다. 저장소 URL을 복사해 Codex 프롬프트에 넣고, 스킬 크리에이터로 설치해 달라고 요청하면 Codex가 스킬을 저장까지 처리한다. 설치 후에는 Codex 앱을 한 번 재시작해야 한다. 이후 /를 입력해 imagegen frontend 스킬을 검색하고 선택한 뒤 이미지 생성 프롬프트와 함께 사용한다.

5. LUMÉ 랜딩 페이지 이미지 생성

프롬프트는 가상의 프리미엄 클린 스킨케어 브랜드 LUMÉ의 랜딩 페이지를 만드는 내용이다. 브랜드 철학, 제품 컬렉션, 성분 소개, 사용법 가이드, 소셜 프루프, 뉴스레터, 푸터까지 섹션별 이미지가 순차 생성된다. 생성 이미지는 나중에 실제 개발에서 호스팅 서버에 올려 불러와야 하므로 별도 저장이 필요하다. 발표자는 코드 파일과 달리 이미지 생성물은 자동으로 프로젝트 폴더에 남지 않을 수 있다는 점을 주의시킨다.

6. 비트맵 시안의 장점과 변형 활용

생성 결과는 코드가 아니라 비트맵 이미지지만, 사선 크롭, 얇은 라인, 레이어드 배치 같은 실험적 디테일이 돋보인다. 발표자는 이런 디자인은 순수 바이브 코딩만으로 구현하기 어렵거나 많은 수정이 필요하다고 판단한다. 같은 프롬프트를 여러 번 돌리면 톤은 유지하면서 다른 레이아웃이 나오므로, 섹션별로 좋은 부분만 선별해 조립할 수 있다. 이 방식이 이미지 기반 탐색의 핵심 장점으로 제시된다.

7. 코드 구현의 첫 원칙: UI와 에셋 분리

히어로 섹션 개발에서는 배경 이미지와 코드 UI를 분리하는 것이 중요하다. 배경 전체는 이미지 에셋으로 쓰되, 내비게이션, 로고, 중앙 텍스트, 메인 카피, CTA 버튼은 코드로 구현해야 한다. 그래서 원본 시안에서 UI 요소를 제거한 깨끗한 배경 이미지를 별도로 생성한다. 웹용과 모바일용 배경을 각각 만들어 반응형에서도 일관성이 훼손되지 않도록 한다.

8. React/Tailwind 구현과 로컬 검수

Codex에는 히어로 이미지를 React와 Tailwind로 구현해 달라고 요청한다. 프롬프트에는 전체 너비, 컨테이너 최대 너비, 좌우 마진을 반영하고, 배경은 방금 만든 웹·모바일 에셋을 쓰며, UI와 텍스트는 원본 시안과 최대한 동일하게 구현하라고 적는다. Codex는 로컬호스트 서버를 띄우고 오른쪽 프리뷰 또는 외부 브라우저에서 결과를 확인하게 해준다. 첫 결과는 유사하지만 폰트, 행간, 내비게이션 정렬, 모바일 전환에서 다듬을 부분이 남는다.

9. 수정 방법: 캡처와 주석

발표자는 수정 과정을 전부 보여주면 길어지므로 방법 중심으로 설명한다. 가장 직관적인 방식은 수정할 부분을 캡처하고 원본 섹션 이미지도 함께 첨부한 뒤, 원하는 방향을 프롬프트로 정교하게 설명하는 것이다. 또 Codex의 주석 달기 기능을 켜면 컴포넌트, 텍스트 영역, 컨테이너 등을 직접 선택해 변경 요청을 달 수 있다. 예시로 헤딩 행간을 줄이고, 콘텐츠 영역을 침범하던 세로 그리드를 제거하도록 요청해 문제가 해결된 것을 확인한다.

10. 브랜드 철학과 제품 컬렉션 섹션 구현

Brand Philosophy 섹션은 오른쪽의 사선 크롭 박스, 얇은 라인, 겹친 에셋 때문에 구현 난도가 높다. 원리는 히어로와 동일하게 필요한 이미지 에셋을 먼저 추출하고, 그 에셋과 원본 섹션 이미지를 함께 넣어 이어서 개발해 달라고 요청하는 방식이다. Product Collection 섹션도 기존 레퍼런스의 벤토 그리드에 맞춰 대체로 잘 구현되지만, 그리드 라인이 콘텐츠를 침범하거나 정렬이 어긋나는 세부 오류가 생긴다. 이런 부분은 주석 기반 수정과 캡처 기반 프롬프트로 반복 개선한다.

11. 반응형과 완성도 개선

수정 후에는 세 섹션의 레이아웃과 정렬이 더 깔끔해지고, 모바일에서도 안정적으로 전환된다. 화면 폭을 줄이면 태블릿 크기를 거쳐 모바일 크기로 바뀌고, 내비게이션은 메뉴 버튼으로 전환된다. 히어로 이미지는 모바일용으로 교체되어 작은 화면에서도 구성이 유지된다. 발표자는 여기까지 만든 정적 결과물에 애니메이션과 인터랙션을 더해 완성도를 높일 수 있다고 설명한다.

12. 애니메이션과 영상 배경 추가

스크롤 시 각 섹션별 요소가 자연스럽게 나타나는 애니메이션을 추가한다. Hero 섹션에는 첫 진입 시 페이드인 효과와 마우스 hover 효과도 적용한다. 추가로 Gemini의 Veo를 사용해 히어로 이미지를 루프형 배경 영상으로 만들고, 다운로드한 영상을 Codex에 업로드해 기존 히어로 이미지와 교체한다. 그 결과 정적인 랜딩 페이지가 더 생동감 있는 웹사이트로 바뀐다.

주요 인용 및 발언

• “이미지 생성 방식은 전체적인 무드나 실험적인 레이아웃, 복잡한 디테일까지 훨씬 더 자유롭게 탐색할 수 있다.”
• “결과물의 퀄리티를 결정짓는 두 가지 중요한 요소는 프롬프트와 어떤 스킬을 사용하느냐입니다.”
• “코드로 구현해야 할 UI 부분과 순수 이미지로 들어가야 할 이미지 에셋 부분을 명확하게 분리하는 작업입니다.”
• “시각적인 자료를 맥락으로 제공하는 게 때로는 가장 빠른 수정 방법이 될 수 있습니다.”
• “로컬 환경에서 이미지를 생성하고 웹사이트까지 구축하는 방법을 알아보았다.”

결론 및 시사점

이 영상은 Codex를 단순 코드 생성 도구가 아니라, 이미지 시안 생성, 프론트엔드 구현, 반복 수정, 애니메이션 적용까지 이어지는 제작 환경으로 사용하는 방법을 보여준다. 핵심은 처음부터 코드로 밀어붙이는 것이 아니라, 이미지 생성으로 시각적 방향을 먼저 확보하고, 그중 좋은 섹션을 선별한 뒤 코드와 에셋을 분리해 구현하는 것이다. 프롬프트에는 수치, 레이아웃 기준, 금지 사항, 스타일 방향을 명확히 적고, 수정 단계에서는 캡처와 주석 기능으로 맥락을 주는 것이 효과적이다. 최종적으로 이 방식은 디자이너가 없는 개인 프로젝트나 초기 랜딩 페이지 제작에서 빠른 시안 탐색과 구현을 연결하는 실용적인 워크플로로 정리된다.