🔎 #701. 와이어프레임에서 웹페이지 디자인까지(GPT-5.4)

안녕하세요?
매일 사람이 쓰는 뉴스레터 Daily Prompt입니다.

오늘은 GPT-5.4 업데이트에 따른 와이어프레임에서 웹페이지 디자인까지 하는 법을 다룹니다.

와이어프레임에서 웹페이지 디자인까지

OpenAI가 ChatGPT, API, Codex에 GPT-5.4와 GPT-5.4 Pro를 새롭게 도입했습니다. GPT-5.4는 추론, 코딩, 에이전트 작업, 각종 실무 문서 작업 능력을 하나로 통합한 프런티어 모델인데요, 해당 모델을 공개하며 아래와 같이 GPT-5.4를 사용하는 모습을 보여주는 영상도 함께 선보였습니다.

위 영상 후반부에서 와이어프레임(wireframe)* 이미지를 기반으로 웹사이트를 제작하는 사례를 소개하는 것을 보고 저도 실험해보았습니다.
*와이어 프레임: 화면의 구조와 기능 배치를 단순하게 설계한 기획도

이 과정에서 ChatGPT가 아닌 OpenAI에서 출시한 코딩 에이전트, 'Codex'를 사용하였습니다. 참고로 얼마전 윈도우 앱도 출시가 되어 맥과 윈도우 사용자 모두 Codex 데스크톱 앱을 사용할 수 있습니다.

프롬프트 입력 전, 먼저 Imagegen이라는 스킬을 설치합니다. 아래 이미지의 화살표 순서대로 스킬 메뉴에서 검색하여 설치를 하시면 됩니다.

• 여기서 스킬이란 사람이 매번 ‘이럴 때는 이렇게 해’라고 다시 설명하지 않아도 되도록, 작업 규칙과 절차를 정리해 둔 작은 작업 매뉴얼에 가깝습니다.
• Imagegen은 이번 업데이트와 함께 새로 출시된 스킬로, Codex를 사용해 이미지 생성 작업을 할 수 있게 해줍니다.
• 따라서, Imagegen 스킬을 사용하면 OpenAI의 이미지 생성 모델을 사용하여 웹페이지에 필요한 이미지를 생성하여 삽입할 수 있습니다.

스킬 설치까지 완료하셨다면, 아래와 같이 프롬프트를 입력합니다.

오늘의 프롬프트(GPT-5.4 Extra high):

함께 업로드한 wireframe 이미지(길어서 일부 생략):

프롬프트 입력 후 약간의 시간이 지나면, 다음과 같은 웹페이지를 제작해줍니다.

오늘의 프롬프트 입력 결과:

와이어프레임 이미지에 계획된대로 텍스트와 이미지를 넣어주었고, 텍스트는 기존 웹사이트 링크에 있는 내용을 참고하여 알아서 작성하였습니다. 삽입된 이미지들은 모두 새롭게 생성된 이미지들입니다.

마무리

1. 이런 AI의 업데이트를 지켜보면서, '잘 정리된 문서'가 매우 중요하다는 생각이 듭니다. 이 문서는 브랜드를 설명하는 문서일 수도 있고, 회사나 팀을 설명하는 문서가 될 수도 있습니다. 잘 정리된 텍스트만 있으면 웹페이지도, 발표자료도, 모두 AI가 만들어줄 수 있습니다.
2. UI 디자인만 해서는, 특히 경력이 없는 신입의 경우, 무엇으로 능력을 증명할 수 있을까요? 와이어프레임 자체를 설계하는 일은 의미가 있을 수 있습니다. 어떻게 브랜드를 전달할 것인지, 그래서 마지막에 어떤 버튼을 누르게끔 할 것인지 UX 설계가 담겨있기 때문입니다.
3. 다만, 보통의 사람은 생소한 UX를 좋아하지 않기에, 실험적이고 기존에 아예 없던 새로운 와이어프레임을 만들어 적용하기란 쉽지 않습니다. 즉, 어느 정도 패턴이 정해져있고, 패턴이 있다는 것은 AI가 학습하기 매우 좋은 데이터라는 뜻입니다. 아니, 이미 학습되어 있을 것입니다.
4. AI에 대체되지 않기 위해 AI가 모르는, 아주 새로운 UX를 하자니 사용자들이 어려워하고, 그 반대는 이미 AI가 잘하는 상황인 것이죠. '취업의 문이 또 한 번 좁아지는 업데이트'를 보니, 학생들을 가르치는 입장에서 마음이 참 어렵습니다.
5. 살아남으려면 결국 다른 일도 해낼 수 있음을 증명해야할 것입니다. 이 뿐만 아니라 업무의 전체적인 그림을 볼 수 있는 통합적 시각을 지녔다고 말할 수 있어야 합니다. 신입이 이런 능력을 갖추기가 참 쉽지 않은데요, 유일한 방법은 창업을 통해 몸소 모든 과정을 경험해보는 수밖에 없는 것 같습니다.

오늘의 Midjourney Prompt & Music

아래 Midjourney 이미지를 음악과 함께 감상해보세요:)

Run

0:00

/55.079979

1×

프롬프트 (by@jae_hong__an) :