Codex 가이드: 이미지 ⟶ 실제 UI를 6단계로

안녕하세요, 학습자 여러분!

OpenAI가 최첨단 이미지 모델인 gpt-image-2(이하 GI2)를 최근 출시하면서, 수많은 벤치마크에서 놀라운 텍스트-이미지 및 이미지-이미지 성능으로 전 세계를 뜨겁게 달궜습니다.

솔직히 말씀드리자면, 이 모델은 정말 획기적인 변화이며, Nano Banana 이후 처음으로 진정한 주목할 만한 성능 도약입니다.

제가 실행한 테스트 스레드를 확인해 보세요. "개발자의 VS Code 터미널" 이미지를 생성하고, 이미지에서 코드를 추출한 다음 실행했습니다.

인용 트윗 보세요: GPT-Image-2에게 개발자의 VSCode 창 스크린샷을 렌더링해 달라고 요청했습니다. GPT-Image-2는 지능형 모델입니다. 단순히 이미지를 렌더링하는 것이 아니라, 실제로 생각하고 있습니다. 이 모델은 상당한 세계 지식을 가지고 있습니다. 완벽한 텍스트. 작동하는 코드. 매혹적입니다! htt... https://x.com/i/web/status/2046695738847993957

인상적이죠? 이와 같은 더 많은 테스트가 있습니다.

얼마 지나지 않아, 저는 GI2로 실제 제품을 구축하기 위한 초보자에게 가장 적합한 워크플로우를 만들기 시작했습니다. 많은 사람들이 이미지를 가져와서 UI를 만드는 것에 대해 이야기하는 것을 보았습니다. 그리고 그 말이 맞습니다! 실제로 가능합니다.

인용 트윗 GPT 5.4로 6개의 프롬프트로 만든 프론트엔드 맞습니다. 프론트엔드를 만들 수 없다고 알려진 모델이 만든 프론트엔드입니다 🫣 하지만 실제로 가능합니다. 그리고 Spud를 사용하면 더욱 쉬워질 것입니다. 이에 대한 글을 써야 할까요? 🤔 https://t.co/aPyDFGEd1h https://x.com/i/web/status/2047299952423084119

하지만 그들이 말하지 않는 것은 적절한 전략 없이는 이미지를 거의 재현하는 데 4번 중 3번은 실패할 가능성이 높다는 것입니다.

이것이 제 경험이며, 많은 댓글 작성자들이 이 방법이 효과가 없다고 말하는 이유라고 생각합니다. 이 글은 여러분을 위한 것입니다!

이것이 다음 요점으로 이어집니다: 이것은 마법의 공식이 아닙니다. 여전히 프롬프트를 잘 작성하고, 노력을 기울이며, 결과물이 구체화되기 시작할 때까지 조정해야 합니다. 괜찮습니다!

이 연습의 목적은 두 가지입니다:

첫째, AI의 비결정성을 활용하여 빈 캔버스를 어떻게 꾸밀지에 대한 아이디어를 브레인스토밍하는 좋은 방법입니다. 시각적 브레인스토밍입니다.

둘째, 변동성을 줄이는 것입니다.

이 가이드를 통해 시간이나 토큰을 낭비하지 않고 더 일관된 시작점에 도달할 수 있을 것입니다. 자, 시작해 볼까요.

이미지 투 프론트엔드 스킬 가이드#

항상 그렇듯, 여러분을 위한 스킬을 만들었습니다. 다운로드하여 여러분의 것으로 만드시길 추천합니다! 이 가이드는 진행 중인 작업이며, 분명히 개선될 여지가 있습니다. 개선할 점이 있다면 언제든지 의견을 듣고 싶습니다.

이 가이드에서는 초보자도 최대한 쉽게 접근할 수 있도록 복잡성을 최소화하는 데 중점을 두었지만, 고급 개발자분들의 의견도 환영합니다.

1단계: 시작 프롬프트 만들기#

별다른 설명이 필요 없습니다. 간단히 img-to-frontend 스킬을 호출하여 워크플로우를 시작하세요. 이미 구상한 디자인이나 시작점, 참고할 이미지 또는 웹사이트가 있다면, 가능한 한 많은 세부 정보를 처음에 포함해야 합니다.

그렇다고 해서 모호하게 작성할 수 없다는 뜻은 아닙니다. 어떻게 보이길 원하는지 정확히 모를 수도 있습니다. 괜찮습니다. 하지만 구체적인 방향이 있다면 처음부터 모델이 더 바람직한 결과물을 생성하도록 유도할 수 있습니다.

markdown

안녕 Codex! 함께 프론트엔드를 만들어보자. $img-to-frontend 스킬을 사용해서 목업을 생성해줘.

비즈니스 이름은 Peak Path Fitness로, 바쁜 성인들을 위한 지역 개인 트레이닝 및 회복 스튜디오야. 대형 체육관의 강도나 위압감 없이 근력, 유연성, 그리고 장기적인 건강을 원하는 사람들을 위한 곳이지.

Peak Path Fitness는 일대일 개인 트레이닝, 소그룹 근력 수업, 유연성 코칭, 보조 스트레칭, 회복 세션, 움직임 평가, 맞춤형 피트니스 플랜을 제공해. 초보자, 복귀 운동선수, 책상 업무로 뻣뻣해진 직장인, 그리고 운동이 허가된 후 가벼운 부상에서 회복 중인 성인들을 대상으로 해.

비즈니스는 전문적이면서도 기반이 탄탄하고 접근하기 쉬운 느낌이어야 해. 하드코어 보디빌딩 체육관이나 화려한 피트니스 인플루언서 브랜드가 아니야. 페이지는 개인 맞춤 관심, 측정 가능한 발전, 부상을 고려한 코칭, 그리고 차분하지만 동기 부여가 되는 스튜디오 환경을 전달해야 해.

주요 목표:
- 방문자가 무료 움직임 평가를 예약하도록 유도하기
- 주요 서비스를 명확하게 설명하기
- 다양한 피트니스 수준을 환영한다는 것을 보여주기
- 코칭 자격증, 고객 성과, 명확한 프로세스를 통해 신뢰 구축하기

도움이 될 수 있는 다른 세부 정보로는 미적 선호도, 분위기, 대상 고객, 웹사이트 유형(SaaS, 마켓플레이스, 개인 등), 색상 구성, 아이콘, 요소 등의 파일 경로가 있습니다.

2단계: 브레인스토밍 및 디자인 생성#

1단계에서 프롬프트를 제출하면, 스킬이 즉시 프롬프트를 기반으로 네 가지 변형을 생성합니다. 이 변형들은 참조점 또는 시작점으로서 서로 스타일적으로 독특합니다. 시간이 좀 걸리니 모든 이미지가 완성될 때까지 기다리세요.

3단계로 넘어가기 전 중요한 팁

4개 이상을 원하면 더 요청하세요.
처음 네 개 중 마음에 드는 것이 없다면 프롬프트를 수정하고 다른 세트를 요청하세요.
생성하기 어려운 요소가 많은 매우 복잡하고 "복잡한" UI는 선택하지 마세요 (아래 예시 2 참조: 페이지에 차트, 아이콘, 요소가 많고 복잡하고 어수선함).

마음에 드는 디자인을 선택하면 스킬이 다음 단계로 넘어갑니다.

3단계: 이미지를 프롬프트로#

이 부분이 이 가이드를 다른 가이드와 차별화하는 지점이라고 생각합니다. 앞서 말했듯이 이러한 워크플로우의 문제점은 일관성이기 때문입니다.

어떤 UI는 훌륭하게 나오고, 어떤 UI는 그렇지 않습니다. 이를 해결하기 위해 모델에게 선택한 목업 이미지로부터 실제 UI를 만들 수 있도록 에이전트를 위한 매우 상세한 프롬프트를 작성하라고 요청합니다.

여기서 아이디어는 구현 모델에게 강력한 시작 프롬프트와 시각적 참조를 제공하여 더 일관되게 높은 품질의 결과물을 생성하도록 하는 것입니다.

단순히 "두 번째 이미지를 만들어"라고 말하는 대신, 모델이 실제로 그러한 UI를 구축하는 데 필요한 것이 무엇인지 깊이 생각하도록 유도할 것입니다.

markdown

저는 #3이 마음에 들어요. 페이지의 모든 요소를 주의 깊게 기록해주세요.
히어로 영역에서 텍스트에서 이미지로 이어지는 그라데이션 블렌딩.
컨테이너의 간격. 폰트. 미학.
이 이미지를 정확히 복제할 수 있도록 프롬프트를 신중하게 작성해주세요.

이미지를 선택하면 스킬이 자동으로 이 작업을 수행해야 하지만, 어차피 그 방향으로 유도하는 데 비용이 들지 않습니다. 이 전체 워크플로우에는 GPT-5.5를 사용하는 것을 강력히 권장합니다. 모든 예시는 Medium에 있습니다.

참고: 목업 UI에 푸터나 원하는 요소가 누락된 경우 프롬프트에 포함하세요. 동일한 미적 스타일을 사용하여 페이지를 확장하도록 요청하세요.

4단계: BUIDL (구축)#

상세 프롬프트가 생성되면, 많은 토큰을 소비하려는 내용을 읽어보는 것이 항상 좋습니다. 프롬프트에 포함되지 않은 중요한 세부 정보나 추가 요소를 추가하세요.

이 단계에서 제가 특히 좋아하는 것은 선택한 원본 목업 UI 이미지를 다시 에이전트의 프롬프트에 복사하여 붙여넣어 명시적으로 컨텍스트에 포함시키고, 다음과 같은 프롬프트를 제공하는 것입니다.

markdown

설명된 대로 프론트엔드를 신중하게 구축해주세요.

페이지를 구축하는 동안 정기적으로 원본 이미지를 참조하여 작업을 확인하고, 페이지가 원본 이미지와 합리적으로 가능한 한 픽셀 단위로 일치하는지 확인하세요.

간격, 폰트, 아이콘, 로고, 레이아웃 및 텍스트를 주의 깊게 살펴보고 작은 세부 사항까지 정확하게 구현했는지 확인하세요.

속도보다 실행. 효율성보다 정확성. 모바일 기기에서도 작동하는지 확인하세요.

최종 출력물이 직접적으로 일치할 때까지 원본 이미지를 참조하여 불일치 사항을 수정하면서 반복적으로 작업을 계속하세요.

5단계: 주석 달기 및 조정#

이러한 워크플로우 중 하나가 첫 번째 시도에 목업 UI의 완벽한 복제본을 뱉어낼 것이라고 생각한다면, 지금 당장 그 환상을 깨뜨리겠습니다. 그렇지 않습니다. 하지만 꽤 좋은 시작점이 되어야 합니다.

의심할 여지 없이 크기가 잘못 조정된 요소, 일치하지 않는 폰트, 제대로 생성되지 않은 SVG, 페이지 전체에 걸친 간격 문제가 있을 것입니다. 이러한 문제는 해결하기 쉬우며, Codex 앱 내 브라우저를 사용하면 한 번에 모두 직접 처리할 수 있습니다!

만족스러운 결과를 얻기 위해 필요한 후속 프롬프트의 수는 UI에 따라 분명히 다르겠지만, 제 경험상 거의 모든 경우에 10개 미만의 후속 프롬프트로 목표에 도달할 수 있습니다.

Codex 앱에서 완성된 UI를 클릭하기만 하면 브라우저가 자동으로 열립니다. 그렇지 않은 경우 "보기" 드롭다운을 클릭하고 "브라우저 탭 열기"를 선택하여 시작하세요.

페이지가 브라우저에서 열리면 오른쪽 상단의 "주석"을 클릭하여 작업이 필요한 요소를 선택하기 시작합니다. 선택하는 방법은 두 가지입니다.

요소나 컨테이너를 강조 표시하고 클릭합니다.
선택하려는 영역 위로 마우스를 드래그 앤 드롭합니다.

클릭/선택 후에는 작은 텍스트 버블이 나타나 원하는 변경 사항을 항목별로 나열할 수 있습니다. 팁: 음성을 사용할 수도 있습니다 ☺️.

프롬프트를 보내기 전에 페이지 전체에서 이 작업을 반복하여 원하는 모든 변경 사항이 포함되었는지 확인하세요. 동일한 프롬프트에 한 번에 원하는 만큼 추가할 수 있으므로 부끄러워하지 마세요.

완료되면 한 번에 모두 전송하세요. 자, 이제 다시 여러분의 작고 소중한 마음을 산산조각낼 시간입니다. 아마도 이 작업을 몇 번 더 해야 할 것입니다. 괜찮습니다. 매번 목표에 눈에 띄게 가까워져야 합니다. 에이전트의 작업을 더 쉽게 만들어주는 명확하고 모호하지 않은 프롬프트를 작성하는 데 집중하면, 생각보다 빨리 목표에 도달할 수 있습니다.

6단계: 계속해서 반복, 개선 및 개인화#

이 시점에서 튜토리얼은 거의 끝났습니다. 여기서는 랜딩 페이지의 절반만 구축했지만, 이제 시각적 스타일이 자리 잡았으므로 이를 사용하여 요소, 하위 페이지 등의 추가 이미지를 생성하거나 리포지토리의 기존 코드에서 이 스타일을 추론할 수 있습니다.

가장 어려운 부분은 이미 끝났으며, 이제 모델은 그 위에 구축할 수 있는 작업 기반을 갖추게 되었습니다. 그리고 페이지의 나머지 부분을 성공적으로 구축하는 데 필요한 모든 도구를 갖추게 되었습니다.

이 워크플로우의 매우 멋진 점 중 하나는 GI2를 사용하여 웹사이트에 표시하려는 모든 이미지를 생성할 수 있다는 것입니다. 실제로 제 두 예시에서 볼 수 있는 모든 이미지와 로고는 GI2로 생성되었습니다.

그러니 창의력을 발휘하세요. 여러분의 개성을 더하세요. 웹사이트를 위해 GI2로 생성한 이미지를 사용하여 비디오를 생성할 수도 있습니다. 원하는 만큼 깊이 들어갈 수 있습니다. 이미지-투-비디오에는 Bytedance Seedream 2.0을 추천합니다.

이제 나가서 OpenAI Dev Day 티켓을 획득하세요. 대담하게 무언가를 구축하세요.

인용 트윗 OpenAI DevDay 얼리 티켓을 확보하고 싶으신가요? GPT-5.5와 Image Gen으로 무언가를 구축하세요. 매주 2-3개의 마음에 드는 작품을 선정하여 OpenAI DevDay 2026 무료 티켓을 증정합니다. Codex가 최고의 제출물을 찾는 데 도움을 주고, 저희 팀이 우승자를 선정합니다. #OpenAIDe...로 답글을 달아주세요. https://x.com/i/web/status/2049535650626785334

이와 같은 콘텐츠가 마음에 드신다면 팔로우를 고려해 주세요.

저는 이 전체 글을 구식 방식으로, 인간처럼 작성했습니다. 많은 노력이 필요했으므로 좋아요와 공유도 큰 도움이 됩니다!

이 가이드는 시작점에 더 가깝게 맞춰졌지만, GPT-Image-2를 사용하여 훨씬 더 복잡하고 인상적인 웹사이트를 생성할 수 있습니다. 저는 이 가이드가 초보자에게 더 접근하기 쉽기를 바랐습니다.

의심할 여지 없이 시리즈의 2부를 진행할 예정이며, 여기서는 애니메이션 요소를 생성하여 시청자에게 깊은 인상을 줄 수 있는 방법을 다룰 것입니다.

세상은 여러분의 것입니다. 절대 잊지 마세요. ✌️

-윌리엄