Claude Code와 GPT Image로 앱 화면 설계하기
ChatGPT가 화면을 그리고, Claude가 그것을 실제 앱으로 바꿉니다. 이를 위해 제가 만든 무료 Claude Code 스킬과, 그 과정에서 무엇이 잘못됐는지 소개합니다.
저는 두 개의 AI가 협업하는 방식으로 앱을 만듭니다.
ChatGPT의 이미지 모델이 화면을 그립니다. 제가 직접 그리기 어려운 것들, 예를 들면 부드러운 3D 아이콘, 물감으로 그린 듯한 하늘, 굴속에 잠든 토끼 같은 것들을 아주 잘합니다.
그다음은 Claude Code가 맡습니다. 마음에 드는 그림을 받아서 앱에서 바로 쓸 수 있는 실제 요소들로 바꿉니다. 아이콘, 아트워크, 애니메이션, 색상, 글꼴 같은 것들입니다. 그리고 실제 화면을 코드로 만들고, 그것이 그림과 맞는지 확인합니다.
저는 이 전체 과정을 gpt-ui-assets 라는 무료 오픈소스 Claude Code 스킬(Claude에게 새로운 역할을 가르치는 추가 기능)로 만들었습니다. 이 스킬은 제 수면 소리 앱 HushNest 와 곧 출시될 명언 앱 QuoteXpedia 에서 사용했습니다.
이 글은 이 방식이 어떻게 시작됐는지, 어떻게 동작하는지, 그리고 진행 중에 무엇이 망가졌는지에 대한 이야기입니다.
같은 요청을 세 가지 방식으로 처리한 결과입니다. 왼쪽: Claude 단독. 가운데: 일반 ChatGPT, 보기에는 좋은 그림이지만 실제로 만들 수는 없음. 오른쪽: 제가 만든 스킬, 바로 구현할 수 있는 깔끔한 화면.
문제: ChatGPT는 자기 그림에서 조각을 잘라냅니다
예를 들어 ChatGPT가 귀여운 돼지 저금통이 있는 멋진 앱 화면을 디자인했다고 합시다. 마음에 들어서 이제 만들고 싶어집니다. 그래서 이렇게 묻습니다. “돼지 저금통만 따로 이미지로 줘.”
대부분의 경우, 그냥 스크린샷에서 돼지 저금통을 잘라내 버립니다. 결과물은 흐릿하고, 배경이 그대로 붙어 있으며, 때로는 가장자리도 잘려 있습니다. 실제 앱에서는 쓸 수 없습니다.
돼지 저금통을 처음부터 다시 그려 달라고 하면, 다른 스타일의 다른 돼지 저금통이 나옵니다.
9월 27일, 저는 제가 정확히 원하는 것을 이렇게 적어 두었습니다.
내가 디자인을 승인하면, 그 화면에 있는 모든 이미지와 아이콘을 처음부터 다시 그려서 디자인과 정확히 일치하게 해줬으면 좋겠어. 스크린샷에서 잘라내지 말고. 그리고 무엇을 만들기 전에, API를 제대로 테스트해.
마지막 문장이 결국 가장 중요했습니다.
왼쪽: 디자인에서 잘라낸 돼지 저금통. 배경에 붙어 있습니다. 가운데: 일반 ChatGPT에 돼지 저금통을 요청한 결과. 얼굴과 색이 바뀌었습니다. 오른쪽: 스킬의 재그림 결과. 점수가 낮을수록 원본과 더 가깝습니다.
첫째 날: 먼저 테스트하고, 나중에 만드세요
도구를 하나라도 작성하기 전에, Claude는 API에 이미지 요청 8개를 동시에 보내고 무엇이 돌아오는지 확인했습니다. 그런데 많은 결과가 요청한 것과 달랐습니다:
- 크기가 달랐습니다. 우리는 1536×1024 이미지를 요청했지만 1774×887이 왔습니다. 그림의 모양은 우리가 설정한 크기보다 요청 문장의 단어를 더 따라갔습니다.
- 품질이 요청보다 낮았습니다. 우리는 고품질을 요청했지만 중간 품질이 왔습니다. 몇 주 뒤, 제가 사용한 서비스가 몰래 품질을 낮추고 있었다는 사실을 알게 됐습니다. 이제 이 도구는 그런 일이 발생하면 경고합니다.
- 참조 이미지 두 장은 원본을 돌려줬습니다. 가이드를 위해 두 장의 이미지를 보내면, 그냥 전체 화면을 다시 반환했습니다. 우리가 해결하려던 복사 문제와 정확히 같은 현상이었습니다.
- 색이 달라졌습니다. 다시 그린 캠프파이어는 항상 조금 더 노랗게 나왔습니다.
그 첫날 이 프로젝트의 전체 규칙이 정해졌습니다. 추측하지 말고, 측정하라. 스킬의 핵심 규칙들은 프로젝트에 문서화된 테스트 결과로 뒷받침됩니다.
이 스킬이 그림을 맞춰 다시 그리는 방법
해결책은 더 조심스럽게 잘라내는 것이 아니었습니다. 디자이너처럼 다시 그리는 것이었습니다:
- 목록을 만든다. 먼저 도구는 승인된 화면에서 모든 이미지와 아이콘을 찾아 어디에 있는지 기록합니다.
- 한 번에 하나씩 보여준다. 각 항목마다 ChatGPT는 그 항목만 확대해 본 단 하나의 참고 이미지를 받습니다. 전체 화면은 받지 않습니다.
- 몇 가지 버전을 그린다. 한 번만 시도하는 것이 아니라 여러 번 시도합니다.
- 가장 비슷한 것을 고른다. 점수로 각 시도를 원본과 모양과 색상 기준으로 비교하고, 가장 가까운 것이 선택됩니다.
- 색을 보정한다. 색이 조금 벗어나면 도구가 디자인과 맞도록 다시 맞춥니다. 정말 도움이 될 때만 그 변경을 유지합니다.
- 형편없는 것들은 버린다. 스크린샷을 그대로 베낀 것, 배경이 그대로 붙어 있는 것, 잘려 있는 것은 맨 아래로 내려갑니다.
작은 캠프파이어 아이콘 하나를 네 가지 방식으로 다시 그린 모습입니다. 말로만 설명했을 때는 59점으로 나빴고(많이 벗어남), 참고용 확대 이미지와 색상 보정을 함께 썼을 때는 20점으로 좋아졌습니다(가까움).
그 결과, 깨끗하게 투명한 배경을 가진 새롭고 선명한 이미지가 나옵니다. 다시 그린 그림은 원본보다 디테일이 5~7배 더 많고, 확대해서 잘라낸 이미지보다 훨씬 더 선명합니다.
“당신이 운전석에 앉아라”
첫 번째 세션이 시작되고 몇 시간쯤 지나서, 나는 Claude에게 이 도구 전체의 방향을 정하게 만든 말을 했습니다:
당신이 운전석에 앉아라. ChatGPT가 못한다고 해서 다른 것도 못하는 것은 아니다.
그래서 이 도구는 단순한 “추가 단계가 붙은 ChatGPT” 이상의 것이 되었습니다. 이제 Claude는 각 작업을 가장 잘하는 쪽에 맡깁니다:
- ChatGPT의 이미지 모델은 화면, 아트워크, 애니메이션 프레임을 그립니다.
- ChatGPT의 비전은 디자인을 보고, 들어 있는 요소를 나열하고, 문제를 지적하고, 간단한 아이콘을 그립니다.
- 컴퓨터의 일반 코드는 측정을 담당합니다. 다시 그린 결과가 얼마나 가까운지, 색이 맞는지, 어떤 글꼴을 쓰는지, 간격이 적절한지 등을 확인합니다.
- Claude는 모든 결과를 검토하고 앱을 작성합니다.
이걸 사용해 보면 디자이너와 대화하는 느낌이 듭니다:
Android용 예산 앱 홈 화면을 디자인해 줘. 따뜻한 코랄과 크림 톤에 친근한 저금통이 있으면 좋겠어. 두 번째가 마음에 들어. 이제 같은 스타일로 예산 화면도 만들어 줘. 좋아. 모든 아이콘과 이미지, 앱 아이콘과 글꼴도 주고, 앱을 만들어 줘.
“좋아”라고 하면, 필요한 모든 크기의 스토어용 앱 아이콘, 색상과 글꼴, 그리고 화면 자체를 모두 만들어 냅니다. 그런 다음 완성된 화면의 스크린샷을 디자인과 비교해 맞지 않는 부분을 수정합니다.
또한 각 플랫폼이 기대하는 방식으로 디자인합니다. Android 화면은 Android답게 보이고 iPhone 화면은 iPhone답게 보입니다. 그리고 승인된 휴대폰 화면 하나를 가져와 태블릿, 데스크톱, 웹 버전으로도 만들 수 있습니다. 단순히 늘려서 맞추는 방식이 아닙니다.
하나의 요청, 두 플랫폼: 왼쪽은 Android, 오른쪽은 iPhone.
iPad, iPhone, Mac 창, 웹사이트에서의 하나의 앱.
“왜 이렇게 형편없어 보이지?”
며칠 뒤, 나는 우리 디자인을 내가 영감을 얻으려고 저장해 둔 정말 세련된 앱 디자인 옆에 놓아 봤습니다. 우리 것은 투박해 보였습니다.
Claude의 솔직한 답은 이랬습니다:
- 우리의 자동 검토는 대비 같은 것만 확인했지, “이게 차분하고 세련돼 보이는가?”는 묻지 않았습니다.
- 나는 요청 하나에 너무 많은 텍스트를 우겨 넣고 있어서, ChatGPT가 단어를 맞추는 데 힘을 쓰느라 모든 것을 스프레드시트처럼 배치했습니다.
- 이미지 모델은 앱 화면처럼 보이는 무언가를 그립니다. 진짜로 화면을 디자인하는 것은 아닙니다.
내 생각은 일을 나누는 것이었습니다. ChatGPT는 질감, 물체, 삽화처럼 코드로 흉내 낼 수 없는 것만 그립니다. 한편 Claude는 레이아웃, 텍스트, 간격을 실제 코드로 만들고, 그 위에 아트워크를 얹습니다. 둘은 동시에 진행되고, 각자 잘하는 일을 맡습니다.
실제 앱: HushNest
HushNest는 iPhone과 Android용 수면 및 휴식 소리 앱이고, Mac 버전도 곧 나올 예정입니다. 1.1 업데이트를 위해 이 도구는 새로운 부드러운 3D 사운드 아이콘, 세 개의 손그림 환영 화면, 그리고 Mac 디자인 아이디어를 만들었습니다. Claude는 그에 맞춰 앱 화면을 구성했습니다.
HushNest에서 얻은 세 가지 교훈은 곧바로 도구에 다시 반영되었습니다:
- 아이콘 하나만으로는 스타일을 복사할 수 없습니다. 하나의 예시만 보고 새로 그린 아이콘들은 나머지와 어울리지 않았습니다. 기존 아이콘 9개가 들어 있는 시트를 바탕으로 그리자, 자연스럽게 섞였습니다.
- 한 장면을 그린 뒤, 그것을 바꿔보세요. 세 개의 환영 화면(노을, 비, 밤)은 모두 하나의 그림에서 나왔기 때문에 완벽하게 정렬되고, 스와이프할 때도 부드럽게 이어집니다.
- 더 넓어진 휴대폰 앱이 곧 Mac 앱은 아닙니다. 첫 Mac 버전은 그냥 휴대폰 앱을 늘려 놓은 것이었습니다. 좋은 Mac용 사운드 앱들이 어떻게 동작하는지 살펴본 뒤, 사이드바와 간단한 사운드 목록, 작은 플로팅 플레이어가 추가되었습니다.
📱 HushNest: App Store · Google Play
밤샘: 지시하기와 측정하기
10월 18일, Claude에게 ChatGPT의 디자인을 더 전문적으로 보이게 해 달라고 요청했습니다. 그날 오후 디자인 가이드라인을 검토하고 첫 테스트를 실행했습니다. 그런 다음 저는 조건 하나를 걸고 밤새 맡겼습니다.
정말로 개선된 결과를 원합니다. 불안정하거나 허술한 건 안 됩니다.
가장 큰 교훈은 예상 밖이었습니다. ChatGPT에게 무엇을 하라고 말하는 것만으로는 거의 아무것도 바뀌지 않습니다.
- 요청에 정확한 여백 수치를 추가해도, 디자인은 그대로였습니다.
- ChatGPT에게 두 디자인 중 어떤 것이 더 나은지 판단해 보라고 했더니, 대부분 보여 준 것 중 두 번째를 골랐습니다.
ChatGPT에게 “어느 쪽이 더 나아?”라고 묻는 방식은 통하지 않았습니다. 대신 효과가 있었던 것은 검토에 구체적인 체크리스트를 주고, 무엇을 여전히 놓치는지 측정하는 것이었습니다.
- 검토자를 위한 체크리스트. 이 기능은 이미 ChatGPT가 모든 디자인을 검토하도록 하고 있었지만, 그 검토에는 여백이 전혀 포함되어 있지 않았습니다. 우리는 의도적으로 좋은 디자인 안에 실수를 숨겼습니다. 예를 들면 너무 좁은 가장자리, 들쑥날쑥한 간격, 상자 안의 상자 같은 것들입니다. 기존 검토는 이 중 어느 것도 잡아내지 못했습니다. 여백과 형태 문제를 확인할 구체적인 목록을 주자, 15개 중 12개를 찾아냈습니다.
- 여전히 놓치는 것 측정하기. 체크리스트가 있어도 ChatGPT는 둥근 모서리들 사이에 있는 각진 카드 하나를 끝내 알아채지 못했습니다. 그래서 이제 기능이 모서리를 직접 측정합니다. 28개 중 27개를 잡아냈고, 실제 디자인 33개에서는 오탐이 하나도 없었습니다.
- 실제 앱에서 여백 유지하기. 빌드된 앱도 디자인의 여백과 둥근 모서리를 그대로 유지해 달라고 했습니다. 이제 이 기능은 두 화면을 모두 측정하고, “이 간격은 300인데 디자인에는 320이라고 되어 있습니다”처럼 무엇이 어긋났는지 정확히 말해 줍니다. 우리가 심어 놓은 작은 여백 실수 22개 중 20개를 찾아냈습니다.
하나의 지시는 확실히 제 역할을 했습니다. 결제, 구매, 가입 화면 하단에는 탭 바가 없어야 한다는 것이었습니다. 처음 문구로는 iPhone 결제 화면 4개 모두에 여전히 탭 바가 있었습니다. 하지만 해당 화면들을 명확히 지정하자, 10개 중 0개만 남게 되었습니다.
또 스타일 규칙을 한 세트로 묶으면 모든 앱이 똑같아질까 걱정했습니다. 실제로 어느 정도는 그랬습니다. 색이 화려한 통계 타일을 금지하자, ChatGPT는 그것들을 전부 같은 회색으로 만들어 버렸습니다. 그래서 규칙을 “앱의 단 하나의 강조색을 사용하라”로 바꿨습니다. 그러면 무지개색은 없어지지만, 모든 것이 회색이 되지는 않습니다.
테스트했지만 쓰지 않은 것
- “평이한 텍스트로 작성하라”는 규칙. 상투적인 표현은 줄었지만, 문장에 담긴 따뜻함도 사라졌습니다. 그래서 제외했습니다.
- 승인된 화면을 바탕으로 새 화면을 만들 때 색을 고정하는 것. 측정 가능한 차이가 없어서 빼버렸습니다.
- 애니메이션을 부드럽게 만드는 더 정교한 도구. 이미 내장된 간단한 도구보다 더 낫지 않았기 때문에, 선택 사항으로 남겨 두었습니다.
변경 사항이 테스트에서 실제 개선을 보여 주지 못한다면, 저는 그것을 제외합니다.
iPhone과 Android용 10개의 디자인. 각각은 수정 없이 첫 시도 결과입니다.
흔들림 없는 애니메이션
애니메이션도 같은 원리입니다. 움직이는 부분만 다시 그리면 됩니다.
예를 들어 캠프파이어는 통나무와 움직이는 불꽃으로 이루어져 있습니다. 이 도구는 통나무를 하나의 고정된 이미지로 유지하고, 불꽃만 프레임마다 생성합니다. 이렇게 하면 프레임 사이에서 아무것도 흔들리거나 밀리지 않습니다.
앱에서 사용하는 형식으로 애니메이션을 저장할 수도 있습니다. 많은 앱이 재생하는 작은 애니메이션 파일인 Lottie도 포함됩니다. 또한 더 부드럽게 보이도록 중간 프레임을 추가할 수도 있으며, 이미지 비용은 더 들지 않습니다.
QuoteXpedia: 다음은 이것입니다
QuoteXpedia는 모든 인용문이 그것이 나온 작품까지 거슬러 올라가는 차분한 일일 명언 앱입니다. 저는 같은 솜씨로 그것을 만들었습니다. 아직 App Store에는 없지만 곧 출시됩니다. quotexpedia.diatomicsoft.com 에서 볼 수 있습니다.
비용
각 이미지를 만드는 데 35초에서 80초가 걸리며, 제공업체의 일반 이미지 요금이 청구됩니다. 비용이 드는 작업을 하기 전에, 도구는 만들 예정인 이미지가 몇 장인지와 대략적인 비용이 얼마인지 알려줍니다. 예산을 설정할 수 있으며, 모든 호출 기록을 남깁니다.
OpenAI API 키를 사용할 수도 있고, ChatGPT 플랜이 있다면 Codex CLI를 통해 아예 키 없이도 사용할 수 있습니다. 정확하고 픽셀 단위까지 맞는 에셋이 필요할 때는 API 키가 더 좋습니다.
3주, 100개 이상의 변경
다음 단계: 앱의 실제 스크린샷으로 만든 App Store와 Google Play 스크린샷입니다. ChatGPT는 그 주변의 배경 아트만 그리게 될 것입니다. 앱 화면 자체를 다시 그리게 했을 때는 실제 모습에서 너무 멀어졌기 때문에, 실제 화면은 항상 그대로 유지됩니다.
사용해 보세요
이것은 무료 오픈소스 Claude Code 스킬입니다. Claude Code에서 다음을 실행하세요:
/plugin marketplace add Shakibuzzaman3104/gpt-ui-assets
/plugin install gpt-ui-assets@gpt-ui-assets
그다음 Claude에게 화면을 설명하고, 마음에 드는 결과가 보이면 “go ahead”라고 말하세요.
⭐ 프로젝트: github.com/Shakibuzzaman3104/gpt-ui-assets . 별점을 주면 다른 사람들이 더 쉽게 찾을 수 있습니다.
AI로 앱을 만든다면, 여기 Medium에서 저를 팔로우해 주세요 그리고 X @Shakib3104 도 팔로우해 주세요. 무엇이 효과가 있었고 무엇이 아니었는지, 그리고 그 둘의 숫자까지 공유합니다.
출처
- 원문: https://medium.com/@shakibuzzaman3104/how-i-design-apps-with-claude-code-and-gpt-image-f26487739805?source=rss------claude_code-5 (2026-10-20 · shakib Uzzaman)