🔎 #689. Codex로 홈페이지 디자인하기

안녕하세요?

매일 사람이 쓰는 뉴스레터 Daily Prompt입니다.

오늘은 Codex와 Stitch를 사용해 홈페이지를 제작한 후기를 다룹니다.

Codex와 Stitch를 사용해 홈페이지 제작하기

지난 687회 뉴스레터에서Stitch Ideate를 소개드리면서 마무리 멘트로 "홈페이지 디자인 작업을 계속 미루고 있다"고 적은 적이 있는데요, 연휴 내내 Codex와 씨름하며 홈페이지를 디자인했습니다. (Codex는 OpenAI에서 출시한 코딩 에이전트입니다)

이 과정에서 소개드리고 싶은 방식은 바로 Stitch와 Codex를 함께 쓰는 방법입니다. 지난 687회 뉴스레터를 발행하면서 아래 시안이 마음에 들었는데요, 이 디자인을 제 Contact(문의) 페이지에 적용하고 싶어졌습니다.

Contact 페이지 디자인을 클릭하여 선택한 뒤, 다음과 같이 .zip 파일로 내보내기하여 코드 파일을 내려 받습니​다.

내려받은 zip 파일을 Codex에게 줍니다. Codex 사용법은 챗GPT와 유사합니다. 다만 구분하기 쉽게 프로젝트별로 폴더를 만들고 그 아래 쓰레드(Threads, 챗GPT 대화와 유사)를 추가해서 사용합니다. 새 쓰레드의 프롬프트 입력창(아래 이미지 붉은색 박스 표시)에 zip 파일을 업로드한 뒤, 프롬프트를 입력합니다.

오늘의 프롬프트:

오늘의 프롬프트 입력 결과: 위 프롬프트를 입력할 때는 어느 정도 codex로 제작이 진행된 중이었기 때문에, 바탕 컬러가 어두운 색으로 적용되었습니다. 그 외 레이아웃 구성은 Stitch 시안과 거의 동일합니다.

Contact 페이지 외 메인 페이지도 Codex를 사용하여 다음과 같이 피드 형태로 제작할 수 있었는데요, 그동안 발행된 오늘의 Midjourney Prompt 이미지를 모아서 볼 수 있도록 구성하였습니다. 제게 궁금한 점이 있으면 상단의 'Ask me anything'을 클릭하시면 된답니다(호호).

마무리

1. 챗GPT에게 디자인을 시키면 마음에 들지 않는 경우가 많습니다. 그에 반해 Gemini 3 Pro 기반의 구글 Stitch는 보다 나은 결과물을 만들어주는데요, 그래서 오늘 소개드린 것과 같이 Stitch와 Codex를 함께 사용하였습니다.
2. 내가 원하는 시안을 말로 설명하기란 쉽지 않습니다. 그래서 Stitch에서 시안을 생성해서 시각적 스타일을 먼저 확인하였습니다. 또한 코드가 적힌 zip 파일을 codex에게 주기 때문에 codex도 제가 원하는 스타일을 쉽게 이해합니다.
3. 이 과정에서 인상깊었던 점은 홈페이지 디자인을 위해 Adobe 제품이나 Figma를 전혀 쓰지 않았다는 점입니다. Adobe와 Figma의 위기라고 느껴지기도 했습니다. Tool을 얼마나 잘 쓰느냐는 더 이상 중요하지 않습니다.
4. 며칠째 Codex 작업만 하고 있습니다. 뉴스레터 발행 후 블로그에 항상 아카이빙이 되는데요, 이 블로그 테마를 커스터마이징하고(그 전에는 코딩을 몰라 할 수 없었습니다), 오늘 보여드린 것처럼 홈페이지를 제작했습니다. 할 수 있는 일이 많아지다보니 생각보다 재밌어서 자꾸 Codex 작업만 하고 있습니다.
5. 이런 저런 작업을 해보면서, 원하는 바가 명확해야 Codex와 함께 작업하기 수월하다는 생각이 들었습니다. 필요한 게 무엇인지 알아차릴 수 있어야 하고, 한 번에 잘 안되더라도 집요하게 문제 해결을 하려는 끈기가 있어야 합니다.
6. AI로 인해 개발자가 대체되느니, 디자이너는 필요없느니 이런 글들이 많습니다. Codex를 사용하면서 분명히 느낀 것은, 기획, 개발, 디자인 모두 할 수 있어야하고, 앞으로 채용을 할 때도 이 모두를 해낼 수 있는 사람을 기대하게 될 것이라는 점입니다. 만드는 건 AI가 하므로 사람은 결과물을 판단할 수 있는 취향과 배경지식이 필수적일 것입니다.
7. 오늘부터 뉴스레터 운영진들이 만난 학생을 인터뷰 형식으로 소개합니다. 아래 코너도 재밌게 읽어주시고, 많은 응원과 격려 부탁드립니다 :)

Interview with students

그림으로 나를 표현하다

Q1. 먼저 자기소개 부탁드려요.
A. 한경국립대학교 시각미디어디자인과 졸업 예정인 최준서(@choejunseo_design)입니다. AI가 다양한 화풍의 작업물을 만들어내는 시대지만, 제 손으로 직접 그려내는 과정을 즐거워하는 사람이라고 설명하고 싶어요. 예전엔 소심하고 말하기가 쑥스러워서 그림만이 저를 표현하는 유일한 방법이라고 믿었는데, 운동을 시작하고 자존감이 붙은 뒤로는 제가 생각보다 사람과 교류하는 걸 좋아하고 즐긴다는 걸 알게 됐어요.

Q2. 작업 외에 어떤 걸 좋아하세요? 요즘 일상을 움직이게 하는 취향이 궁금해요.
A. 닥터 페퍼 제로와 J-pop을 좋아합니다. 특히 요네즈 켄시를 정말 자주 듣는데, 2024년 9월부터 매달 유튜브 뮤직 상위 청취자 0.1%에 꾸준히 들 정도예요. 최근에는 ‘毎日(매일)’을 자주 듣습니다. 신나는 리듬 뒤에 반복되는 일상을 사랑할 수 있을지 되묻는 가사가 마음에 남았고, 그런 반복 속에서 한숨 돌리게 해주는 저만의 창문이 그림인 것 같아요.

Q3. 이번 작품은 어떤 작업인가요?
A. 이번 작품은 ‘그림’이라는 키워드로 지금의 저를 담아낸 영상입니다. ‘되고 싶은 나' 혹은 ‘보이고 싶은 나’가 아니라, 지금의 ‘진짜 나’를 가장 솔직하게 설명하는 단어가 무엇일지 고민했을 때 결국 떠오른 게 그림이었어요. 저는 여전히 무언가를 그려내며 상상하는 마음으로 살아가고 있고, 그 감각을 작품 안에 담아보고 싶었습니다.

Q4. 언제부터 그림이 '나'를 설명하는 언어로 자리잡게 되었는지 궁금해요.
A. 초등학생 때 제가 그린 만화를 친구들이 읽고 즐거워하던 장면이 아직도 선명해요. 어떻게 하면 더 웃게 할 수 있을지 궁금했고, 좋아하는 작품들을 따라 그리며 배웠습니다. 그러면서 ‘나도 무언가를 만들어내고 싶다’는 동경이 생겼고, 더 나아가 제가 느낀 감정을 누군가에게도 전하고 싶다는 마음이 자랐던 것 같아요. 그때 저를 바라봐주던 작은 ‘독자들’이 있었기에 그림에 더 깊이 빠질 수 있었고요.

Q5. 생성형 AI 등장이 반갑지는 않았을 것 같은데, (재홍님의) 수업을 통해 경험해보고 달라진 점이 있나요?
A. 솔직히 말하면, 만화와 애니메이션, 그림을 정말 좋아하는 사람으로서 작년까지만 해도 AI에 대해 꽤 부정적인 입장이었어요. 그런데 복학하고 졸업전시회를 준비하면서 전공 수업들을 듣다 보니 자연스럽게 AI 툴을 접하게 됐고, 막상 써보니까 “편하긴 하다”는 생각이 들더라고요. 게다가 실무에서도 AI 역량이 이제는 필수라는 이야기를 계속 듣다 보니, 관련 수업을 더 본격적으로 수강하게 됐습니다.

다만 실제로 작업에 활용해보면서는 의외로 낯선 지점도 있었어요. AI가 이미지를 생성하는 동안 흰 로딩 화면을 보고 있는 시간이 왠지 지루하게 느껴졌거든요. 제가 직접 디자인하거나 그림을 그릴 때는 손이 쉴 틈 없이 바쁘게 움직이는데, AI를 쓰면 제 손이 멈춰 있는 시간이 길어지는 느낌이었어요. 원하는 결과물이 나올 때까지 단어 한두 개를 고치고 뉘앙스를 수정하다 보면, 어느 순간 “내가 지금 뭘 하고 있지?”라는 의문이 들기도 했고요. 내 손으로 직접 해냈다는 만족감이 조금 줄어들면서, 펜 대신 단어와 씨름하는 제 모습이 과연 창작자답게 느껴지는지 고민이 되기도 했습니다.

그렇다고 AI를 부정하려는 건 아니에요. 분명 AI는 창작자의 노고를 줄여주고 작업 시간을 크게 단축해주는 도구인 건 맞다고 생각합니다. 다만 막막한 부분을 해결하기 위해 버티는 시간, 그 과정에서 쌓이는 성취감까지는 아직 AI가 완전히 대신해주긴 어렵다고 느껴요.

물론 앞으로 AI를 아예 쓰지 않겠다는 뜻은 아니고요, 실무자로서의 저는 효율을 위해 AI를 적극 활용할 거예요. 하지만 창작자로서의 저는 여전히 손으로 직접 그려내는 그림을 더 사랑하고, 더 선호하게 될 것 같습니다.

오늘의 Midjourney Prompt & Music

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

Abandoned Beauty

0:00

/203.959979

1×

프롬프트 (by @jae_hong__an) :