[모바일앱] UI가 드럽게 촌스러울 때 해결방법
딸래미를 위한 모바일 앱(안드로이드, iOS)을 만들고 있다.
Unity를 통해.
Claude Code와 Codex를 통해.
바이브 코딩 하고 있다는 말이다.
그런데 난관에 봉착했다.
코드 작업은 다 끝났는데, 이제 실제 눈에 보이는 것들을 구현해야하는데.
존나 구리다.
너무 구려서 눈물을 훔쳐야될 정도.
그런데 Claude Code는 병신 같이 이 버전으로 앱스토어 배포용 스크린샷 찍고 있다 ㅋㅋㅋㅋ 미친너마 이걸 어케 배포해.
그니깐, 결론만 말하면,
다 구리지만 그 중에서도 이번에는 "모바일앱 드럽게 촌스러운 UI 개선하는 방법"에 대해 대충 써보겠다.
※ 참고: 뭔가 특색있고 테마 확실한 거 만드는 사람들에 한해 더 쓸모 있을 것 같다. 그냥 AI가 뽑아주는 AI 스러운 디자인으로도 충분한 사람은 해당사항 없다.
내가 헤맨 순서는 다음과 같다.
1. 내가 만들고 있는 모바일앱의 UI가 존나 구림을 인지한다.
2. 어떻게 해야할까 고민한다.
3. Claude Code, Codex에게 UI를 대폭 개선하라고 닦달한다.
4. 허접한 결과물을 보고 절망한다.
5. 다른 방법을 찾아낸다.
6. 이것저것 다 해본다. 실패한다. 다른 것도 다 해본다. 실패한다.
7. ..................................
8. 대충 UI 업그레이드 성공
그 중에 여러분들은 2,3,4,5,6, 7를 안하고 1번에서 곧바로 8로 갈 수 있다.
내가 알려주는 거 따라하믄 된다.
왜 AI한테 UI 맡기면 구릴까
AI는 스크린샷을 찍어가면서 화면을 보면서 만든다고는 하지만 코드로 추측해서 그리는게 많다. 그래서 결과가 늘 특출나질 못하다.
"대폭 개선해" "UI를 예쁘게 만들어"는 기준 없는 주문이다. 그러면 결과도 허접하게 나온다.
그러니깐 디자인을 결정하는 단계랑 코드로 옮기는 단계를 분리하고, 그 사이를 시안+스펙 문서로 엮어야한다.
추천하는 방법: ChatGPT Work - Astra 족치기 + Figma
다 해봤는데 이게 제일 퀄리티가 좋았고 간편했다.
※ 주의: 여러분들의 프로젝트가 Github 저장소에 올라와 있다는 걸 전제로 한다.
※ 주의: Claude Cowork 말고 ChatGPT Work로 가야 소용이 있다. 왜냐하면... 왜냐하면...
ChatGPT Work를 튼다.
2. 모델을 Astra로 설정한다.
3. 말을 건다.
모바일앱(안드로이드, ios)을 바이브코딩으로 만들고 있는데 UI가 너무 처참해서 그런데, 어떻게 하면 상용화 상업화 성공한 기존 앱들처럼 세련되고 훌륭하고 컨셉 확실하고 일관적이고 디자인시스템이 확고한 그런 UI 디자인을 만들 수 있을까? 지금은 너무 허접하고 너무 볼품없어서... 모바일앱 UI를 멋지게 바꿔주는 오픈소스 프로젝트나 스킬, 플러그인같은게 있지는 않아? 어떻게 하면 좋을지 조사를 좀 해줄래? 나는 지금 ㅇㅇㅇㅇ이라는 ㅇㅇㅇㅇ 타겟 앱의 UI 때문에 고민중인데 너무 투박하고 촌스럽고 하나도 예쁘지가 않아서. 성공한 랭킹 베스트에 있는 스토어 앱들처럼 훌륭한 디자인을 입히고싶어 도와줘. 내 프로젝트는 깃허브에 올려놨어. ㅇㅇㅇㅇ 저장소에 접근해서 네가 이 프로젝트를 파악하고 어떻게 접근하면 좋을지 생각해줘.
4. 대답을 대충 흘려 듣는다.
5. Figma로 3안을 만들어달라고 한다. 비교하기 좋게.
6. Figma 플러그인이 설치 안 되어 있다면 플러그인을 설치한다.
(연결은 Figma 로그인해서 해준다.)
7. 확인한다.
8. 흡족해하면서 다른 화면들도 시안 만들어달라고 쪼아댄다.
(ex. 홈화면, 설정화면, 마이페이지화면, 상점화면, ㅇㅇ화면~)
9. 다 됐으면 마지막으로 md 문서 짜낸다.
지금 네가 만들어준 디자인을 스펙 문서로 남겨줘
1. 마스터 디자인 스펙
2. 디자인 토큰
3. 화면별 AI 프롬프트
4. AI 결과물 QA/수정가이드
등등등
※ AI는 그림보다 문서로 된 규칙을 훨씬 잘 따른다. <시안 = 목표>, <스펙 문서 = 규칙> 둘다 있어야 안전하다.
10. 결과물에 흡족해하면서 바이브 코딩하는 툴로 돌아간다.
(Claude Code든 Codex든)
(만약 아직 마음에 안들면, "~하게 바꿔줘" 해서 계속 다른 시안을 요구한다.)
11. Codex / Claude Code 에도 Figma 플러그인을 설치하고 연결해준다.
12. 그리고 말한다. (위에서 착즙한 md 파일도 첨부해서)
Figma에 보면 "https://figma.com/ajjeogojeojjeogo(피그마 디자인 링크)"가 있는데 거기에 앱 화면 시안들이 있어. 그리고 이 md 문서들도 있지. 둘을 모두 참고해서 내 앱 UI를 바꿔줘.
13. 잔잔바리 조정을 해준다.
ex) 나온 결과물이 "AI 결과물 QA/수정가이드.md" 파일 속 체크리스트 항목들에 맞게 만들어졌는지 점검하고 고쳐줘.
14. 끝.
하면 안되는 방법: Claude한테 UI 개선해달라고 조르기 & 시안 만들어달라고 하기
결과가 존나 구린 나머지 피눈물 나는 수가 있다.
하면 안되는 방법: Google Stitch로 가서 UI 만들어달라고 하기
결과가 존나 구린 나머지 피눈물 나는 수가 있다.
하면 안되는 방법: X에 떠돌아다니는 UI 개선 Claude Skills 오픈소스 프로젝트 사용하기
결과가 존나 구린 나머지 피눈물 나는 수가 있다.
괜히 해봤자 인간불신만 늘어난다.
또 다른 방법: Figma Make (AI 기능) 사용하기
Figma에 들어가보면 Make 라고 AI로 디자인 생성하는 기능이 있다.
무료버전 사용자도 크레딧 조금 주니깐 사용 가능...은 한데 제대로 완성은 될지 모르겠다.
나는 유료 요금제 사용 중이라.... 아무튼...
(유료 요금제 쓰면 AI MCP 호출 가능 횟수도 많아져서 좋으다)
※ 주의!!!
말 걸기 전에 + 버튼을 눌러 반드시 "깃허브" 커넥터를 연결하자.
그래야 알아서 내 프로젝트를 읽고 파악하여 그것에 맞는 디자인을 빌드한다.
만약에 프로젝트 내부에 디자인 스펙 문서가 있다면 프롬프트에 "디자인 스펙 문서가 있어도 그걸 무시하고 네가 새롭게 디자인해줘!" 라고 써주자. 안 그러면 또 줫같은 거 만들어준다. 크레딧 졸라 낭비데스요.
Figma Make 기능을 쓰면 좋은게 프로토타입을 아예 만들어줘서 마치 에뮬레이터로 보는 것처럼... 터치도 하고 클릭도 하고 막 MVP 다루듯 할 수 있다는 것이다.
근데 내 기준 Astra + Figma 가 더 잘 뽑는다. 이건 사이드.
마무리
코딩 에이전트에게 감각을 기대하지 말자. 감각은 디자인 툴에서 정하고, 코딩 에이전트한테는 규칙을 주자.
(아직은.... 아니다.......)
[댓글 @dragon_pra26462]
디자이너 수명 연장 성공...!
