AI 산출물 퀄리티 올리는 법 5가지 - 목업, 모듈화, 색, 아이콘·글꼴, 테스트

안녕하세요. 노티폴드 개발자입니다.

AI로 뭔가 만들다 보면 "되긴 되는데 2% 아쉬운" 결과물이 나옵니다. 앱 만들면서 그 2%를 채워 준 방법 다섯 가지를 정리했습니다. 앱이 아니어도 PPT·웹페이지·그림에 거의 그대로 통합니다.

🎨 1. UI는 목업부터

화면 있는 걸 만들 땐 바로 만들게 하지 말고 목업(미리보기 화면)부터 만들게 합니다. 퀄리티 차이가 제일 컸던 부분입니다.

• "이 버튼 어떻게 할까" 같은 건 안 2~3개를 나란히 그린 목업으로 받아서 눈으로 고릅니다

• 고르기 전엔 앱에 안 넣습니다. 말로 정하면 AI 머릿속 그림이랑 제 머릿속 그림이 달라서 꼭 한 번 더 고치게 됩니다

• 고른 목업은 남겨 둡니다. 나중에 "목업 보고 맞춰" 하면 AI가 그걸 기준으로 삼습니다

제 저장소에는 목업 화면이 103개, 그중 안을 나란히 놓고 고른 게 72개 있습니다.

👆 목업 직접 눌러 보기: https://www.notifold.com/mockup/

여담으로, "토스처럼 깔끔하게"를 말로 설명하면 잘 안 됩니다. 저는 폰을 컴퓨터에 꽂고 토스나 당근을 띄워 놓은 다음 "제목·본문·설명 글씨 크기는 이 화면 참조해 줘" 합니다. 큰 제목은 얼마나 크고 굵은지, 작은 설명은 얼마나 흐린지처럼 말로 하기 애매한 게 한 번에 맞습니다. (폰 꽂는 법은 5번에)

그리고 UI 용어를 몇 개만 알아도 AI가 한 번에 알아듣습니다. "네모 칸들이 크기 다르게 막 배치된 거"라고 하면 AI가 헤매는데, "벤토 그리드로 해 줘" 한마디면 바로 그 모양이 나옵니다.

이름을 모르면 "토스 송금할 때 아래서 올라오는 거, 이걸 뭐라고 불러?"라고 물어보면 됩니다. 한 번 배운 말은 다음부터 그대로 쓰면 됩니다. UI 용어는 앱을 기획할 때도 좋습니다. 무엇을 만들지 정리할 때 "여기는 바텀 시트, 저기는 칩"처럼 이름으로 적으면 머릿속 화면이 금방 글로 정리됩니다.

✂️ 2. "모듈화해서 잘게 쪼개 줘"

AI랑 작업할 때는 "최대한 모듈화해서 잘게 쪼개 줘"라고 꼭 말해야 합니다. 가만두면 AI는 파일 하나에 계속 이어 붙이는데, 그게 커질수록 퀄리티가 떨어집니다.

• AI가 읽는 양이 줄어듭니다 — 파일이 크면 한 줄 고치려고 해도 통째로 읽고, 길게 읽을수록 앞에서 본 걸 놓칩니다

• 고치다가 딴 데를 안 망가뜨립니다 — A를 고치라고 했는데 옆의 B까지 건드리는 일이 줄어듭니다

• 마음에 안 드는 조각만 다시 할 수 있습니다 — 통으로 다시 뽑으면 잘 나온 데까지 바뀝니다

제 앱 코드는 파일 294개로 나뉘어 있고, 그중 절반은 126줄 이하입니다. 반대로 AI한테 넘기던 인계 문서를 하나에 계속 쌓았더니 826KB까지 불어서 AI가 다 못 읽었고, 결국 쪼갰습니다 😅

이건 개발만 그런 게 아니라 디자인·UI도 똑같습니다. 화면을 통으로 그리게 하지 말고 버튼, 카드, 제목 줄 같은 부품부터 만들게 한 다음, 화면은 그 부품을 가져다 쓰게 합니다. 그러면 버튼 모양을 한 번 고치면 앱 전체 버튼이 같이 바뀌고, 화면마다 버튼이 조금씩 달라지는 일이 없어집니다. 글씨 크기·간격·색도 부품처럼 한 곳에 정해 두면 됩니다(3번 색 얘기도 같은 원리입니다).

PPT는 장마다, 웹페이지는 머리말·본문·디자인을 나눠서, 그림은 캐릭터·배경 같은 재료부터 따로 뽑게 하면 좋아집니다. 단, 전체 틀(목차·스타일)을 먼저 잡고 쪼개야 조각끼리 따로 놀지 않습니다.

🌈 3. 색은 AI한테 맡기지 말고 정해 주기

AI는 색을 너무 많이 씁니다. 파랑 앱인데 강조한다고 보라, 금색, 주황을 하나씩 섞어서 알록달록해집니다. 저도 파랑 화면에 보라·금색 포인트가 붙어 나와서 몇 번을 되돌렸습니다.

• 우리 앱 색표(color palette)를 만들어 두고 "이것만 써" — 개발할 때처럼 색도 한 파일에 표로 만들어 둡니다. 메인 파랑 #0B6CF2, 연한 파랑, 글자 회색… 이렇게 이름 붙여 모아 두고 "이 색표 밖의 색은 쓰지 마"라고 지시합니다. "하늘색으로"라고 말로 하면 매번 다른 하늘색이 나옵니다

• 메인 색 하나만 정하고 "이 계열 안에서만" — 저는 파랑 하나로 정하고, 진하기만 바꿔 쓰게 합니다. 다른 색 포인트는 금지

• 빨강은 경고에만 — 아무 데나 빨강을 쓰면 정작 중요한 경고가 안 보입니다

• 다크 모드는 처음부터 같이 — 나중에 따로 하면 화면마다 검정·회색이 제각각이 됩니다. 저는 결국 다크 모드를 화면 전부 다시 손봤습니다

색 고르는 감이 없으면 1번처럼 좋아하는 앱을 띄워서 "이 앱 색 쓰는 방식대로" 하는 게 제일 빠릅니다.

처음부터 색표를 만들기 어려우면 공개된 색표에서 한 계열만 골라 와도 됩니다. Tailwind 색표(tailwindcss.com/docs/colors)나 Open Color(yeun.github.io/open-color) 같은 곳에서 파랑이면 파랑 한 줄만 가져와 "이 색표만 써" 하면 됩니다. 제 앱 색표는 이렇게 생겼습니다.

😀 4. 아이콘은 토스페이스, 글자는 프리텐다드

AI한테 아이콘을 그리게 하면 어설프고 화면마다 모양이 제각각입니다. 선 굵기도, 둥근 정도도 다 다르게 나옵니다.

그래서 애매하면 "아이콘은 토스페이스로 써 줘"라고 합니다. 토스페이스는 토스가 누구나 쓰라고 무료로 공개한 이모지 모음이고, 상업적으로도 쓸 수 있습니다(저작권은 토스에 있어서 모양을 바꾸지 말고 그대로 써야 합니다). 한 사람이 그린 것처럼 스타일이 통일돼 있어서 아무 데나 써도 따로 놀지 않습니다. 제 앱 설정 화면이나 일정 카드에 들어간 그림이 거의 다 토스페이스고, 지금 58가지를 쓰고 있습니다. 앱 정보 화면에 "토스페이스를 썼다"고 한 줄 적어 두면 깔끔합니다.

글자도 같습니다. AI는 기본 글꼴을 그대로 두거나 화면마다 다른 글꼴을 섞는데, "글꼴은 프리텐다드로" 하나만 정해 주면 화면이 확 정돈돼 보입니다. 프리텐다드도 무료 글꼴(SIL 오픈 폰트 라이선스 — 글꼴만 따로 파는 것 말고는 상업적으로 써도 됩니다)이고, 제 앱 글자는 전부 프리텐다드입니다. 제목·본문·설명을 굵기(보통·중간·굵게)로만 나눠 쓰면 1번에서 말한 제목·본문·설명 글씨 크기도 같이 정리됩니다.

색표처럼 "아이콘은 토스페이스, 글자는 프리텐다드, 이 밖의 건 쓰지 마"라고 정해 두는 게 핵심입니다. 재료가 정해져 있으면 AI가 새 화면을 만들어도 기존 화면이랑 같은 앱처럼 보입니다.

🧪 5. 테스트, 테스트, 테스트

AI는 "다 했습니다!" 하고 끝내는데, 실제로 돌려 보면 안 되는 경우가 꽤 있습니다. 그래서 확인을 세 겹으로 합니다.

① 폰 꽂아 두기 — 폰을 USB로 꽂아 두면 AI가 폰에 앱을 직접 깔고, 화면을 찍어서 보고, 목업이랑 다른 데를 찾아 고칩니다. 제가 폰으로 보고 말로 설명하던 걸 AI가 직접 합니다.

주의할 점 하나. AI한테 화면을 눈대중으로 누르게 하면 안 됩니다. "그 버튼 눌러 봐" 했다가 AI가 어림으로 누른 자리가 하필 통화 버튼이라 전화가 걸렸습니다 😅 그 뒤로는 "화면 구조를 읽어서 정확한 자리를 눌러"라고 규칙을 적어 뒀습니다.

② 다른 AI한테 점검 맡기기 — 만든 AI는 자기가 짠 걸 잘 못 봅니다. 새 창을 열어 다른 AI한테 "코드는 고치지 말고, 문제만 찾아서 적어 줘"라고 맡깁니다. 이번 업데이트 전에도 이렇게 돌렸더니 "전부 지우기를 눌러도 일부 기록이 남는다" 같은 걸 세 개 잡아 왔습니다.

③ 고칠 때마다 테스트 남기기 — 버그 하나 고치면 "이게 다시 안 생기는지 확인하는 테스트도 만들어 줘"라고 합니다. 이게 쌓여서 지금 제 앱엔 자동 테스트가 1,800개 넘게 있고, 뭘 고치든 이게 다 통과해야 내보냅니다. AI가 새 기능 넣다가 옛날 기능을 망가뜨리면 여기서 걸립니다.

📝 한 줄 정리

• 목업부터 — 안 여러 개 보고 고른 다음에 만들기 (따라 할 앱은 띄워서 보여 주기, UI 용어로 말하기)

• 쪼개기 — 코드도 UI도 부품으로, "모듈화해서 잘게" 한마디

• 색은 정해 주기 — 우리 앱 색표를 만들어 두고 "이것만 써"

• 아이콘은 토스페이스, 글자는 프리텐다드 — 재료를 하나로 통일

• 테스트 — 폰 꽂아서 AI가 직접 확인, 다른 AI가 점검, 고칠 때마다 테스트 남기기

이렇게 만든 앱이 알림창을 정리해 주고, 알림을 90일 기록하고, 

카톡 대화를 사람별로 모아 주는 Notifold입니다.                          

📱 플레이스토어: https://play.google.com/store/apps/details?id=com.notifold.app&referrer=utm_source%3Dfmkorea%26utm_campaign%3Dquality_post
🌐 홈페이지: www.notifold.com

지난 글

· 앱 소개 https://www.fmkorea.com/10440185942

· 서버 없이 AI 돌리기 https://www.fmkorea.com/10453550949

· 클로드+코덱스 같이 쓰기 https://www.fmkorea.com/10458748196

· GPT 대신 코덱스(레고 만화) https://www.fmkorea.com/10467732680

AI 결과물 퀄리티 올리는 요령 있으시면 댓글로 나눠 주세요!

💬 네티즌 반응 (250개)