Noti같은 앱처럼 보이게부품 · 색표 · 아이콘 · 글꼴
목업으로 화면 하나하나는 좋아졌는데, 화면이 늘어날수록 문제가 생겼어요. 버튼이 화면마다 조금씩 다르고, 색이 하나씩 늘고, 아이콘 굵기가 제각각이었어요. AI는 화면을 만들 때마다 정하지 않은 부분을 그때그때 새로 정하기 때문이에요.
화면을 부품으로 쪼개기
그냥 두면 AI는 파일 하나에 계속 이어 붙여요. 파일이 커지면 한 줄을 고치려 해도 통째로 읽고, 앞에서 본 걸 놓치고, 시키지 않은 곳까지 건드려요. 그래서 "최대한 모듈화해서 잘게 쪼개 줘"라고 분명히 말해요.
디자인도 같아요. 버튼·카드·제목 줄 같은 부품을 먼저 만들고, 화면은 그 부품을 가져다 쓰게 해요. 버튼을 한 번 고치면 앱 전체 버튼이 같이 바뀌어요. 노티폴드 코드는 파일 294개로 나뉘어 있고, 절반이 126줄 이하예요.
색은 색표로 정해 주기
AI는 색을 너무 많이 써요. 파란 앱인데 강조한다며 보라·금색·주황을 하나씩 섞어요. 노티폴드도 파란 화면에 보라·금색 포인트가 붙어 나와서 몇 번을 되돌렸어요.
- 색표를 한 파일로 만들고 "이 밖의 색은 쓰지 마" — "하늘색으로"라고 말로 하면 매번 다른 하늘색이 나와요.
- 메인 색은 하나, 진하기만 바꿔 쓰기
- 빨강은 경고에만
- 다크 모드는 처음부터 같이 — 나중에 하면 화면마다 검정·회색이 제각각이 돼요. 노티폴드는 결국 다크 모드를 전 화면 다시 손봤어요. 보통은 공수 때문에 미루게 되는 일이에요.
색표를 처음부터 만들기 어렵다면 Tailwind 색표나 Open Color에서 한 계열만 가져와도 돼요.
아이콘과 글꼴은 하나로
- 아이콘은 토스페이스 — 토스가 무료로 공개한 이모지 모음으로 상업적으로도 쓸 수 있어요. 저작권은 토스에 있어서 모양을 바꾸지 않고 그대로 써야 해요. 노티폴드는 58가지를 써요.
- 글꼴은 프리텐다드 — SIL 오픈 폰트 라이선스라 글꼴만 따로 파는 것 말고는 상업적으로 써도 돼요.
"아이콘은 토스페이스, 글자는 프리텐다드, 이 밖의 것은 쓰지 마"로 정해 두면 AI가 새 화면을 만들어도 같은 앱처럼 보여요.
정리
- AI는 정하지 않은 걸 화면마다 새로 정한다 → 미리 정해 두기
- 코드도 화면도 부품으로, "모듈화해서 잘게"
- 색표 한 파일, 메인 색 하나, 다크 모드는 처음부터
- 아이콘은 토스페이스, 글자는 프리텐다드