작성자: 컴맹 집사
대표 이미지: 하루 만에 첫 화면에 그림 배너를 넣어 분위기를 바꿨다 (출처: 앱의 시기별 화면을 직접 캡처해 비교 이미지로 제작)
이 글에서 얻는 것
- 이런 분께 앱이나 페이지 첫 화면을 어떻게 꾸밀지 고민하는 분
- 핵심 답 첫 화면은 무슨 앱인지, 해 보고 싶은 분위기, 걸리는 시간, 눌러야 할 버튼 네 가지를 보여 줘야 한다. 첫 버전은 둘이 빠져 친구가 망설였다
- 바로 쓰는 팁 AI에게 디자인을 맡길 때는 한 가지만 받지 말고 비교안을 받아 고르는 방식이 가장 효과적이었다
친구에게 링크를 보내고 옆에서 지켜본 적이 있다. 친구는 앱을 열고 1~2초쯤 화면을 보다가, 스크롤을 한 번 내리고 다시 올린 뒤에야 시작 버튼을 눌렀다.
그 몇 초 동안 친구는 “이게 뭐 하는 앱이지?”를 고민하고 있었다. 첫 버전의 시작 화면에는 제목 한 줄과 버튼 하나뿐이었다. 그날부터 첫 화면을 다시 만들었다.
첫 화면이 해야 하는 일
AI에게 “테스트형 앱의 첫 화면에 꼭 있어야 하는 게 뭐야?”라고 물었다. 받은 답을 내 앱에 맞게 정리하니 네 가지였다.
- 무슨 앱인지 한눈에 알려 준다. (제목과 부제)
- 해 보고 싶게 만든다. (그림, 분위기)
- 얼마나 걸리는지 알려 준다. (질문 7개, 1분)
- 무엇을 눌러야 하는지 분명하게 보여 준다. (시작 버튼)
첫 버전에는 1번과 4번만 있었다. 2번과 3번이 빠지니 친구가 망설였던 것이다.
문구부터 다시 썼다
디자인보다 문구를 먼저 정했다. AI에게 후보를 여러 개 받고 그중에서 골랐다.
- 위쪽 작은 글씨: Royal Kennel Butler Association (RKBA)
- 제목: 왕립 개집사협회
- 한 줄 소개: “우리 집 강아지가 왕이라면, 나는 어떤 집사일까?”
- 진행 안내: 정보 입력 → 질문 7개 → 작위증 발급
- 버튼: 나도 왕실 집사 되기
“테스트 시작”보다 “나도 왕실 집사 되기”가 앱의 세계관과 잘 어울렸다. 버튼 문구 하나로 분위기가 달라진다는 걸 이때 알았다.
디자인을 요청한 방법
디자인을 말로 설명하는 게 가장 어려웠다. “예쁘게 해 줘”라고 하면 무난하지만 개성 없는 화면이 나왔다. 몇 번 시도한 끝에 효과가 있었던 건 분위기, 색, 구성, 조건을 구체적으로 말하는 방식이었다.
첫 화면 디자인을 바꿔 줘.
[분위기] 왕실 집사 임명식, 하지만 귀엽고 따뜻하게. 날 선 풍자는 빼고 위트는 살짝만.
[색] 따뜻한 크림색 배경, 금색 포인트, 진한 색 글자.
[구성] 위에서부터 왕관 그림 → 제목 → 부제 → 안내 문구 → 시작 버튼.
[버튼] 금색, 크고 둥글게, 엄지로 누르기 편하게.
[조건] 휴대폰 세로 화면 기준. 다른 화면과 기능은 건드리지 마.
처음에는 그림 없이 이모지(👑)로 시작했다. 이미지 파일은 나중에 준비해도 됐다. 이모지는 휴대폰마다 모양이 조금 다르지만, 첫 화면의 분위기를 잡는 데는 충분했다.
나중에는 배경을 이미지 생성 AI로 만들었다. 첫 시안에는 커다란 왕관 그림이 들어갔는데, 원래 쓰던 왕관 이모지보다 어색해 보였다. 그래서 “왕관은 그대로 두고 밋밋한 배경만 알록달록하게”로 요청을 바꿨고, 발바닥·하트·뼈다귀가 흩뿌려진 배경을 골랐다. 배경이 화려해진 만큼 글자가 묻히지 않도록 아래로 갈수록 배경을 옅게 처리했다.
CSS를 조금 알게 됐다
디자인을 고치다 보니 AI가 바꾸는 부분이 매번 CSS라는 걸 알게 됐다. (출처: MDN 웹 문서, CSS) 처음 앱 코드를 받았을 때 “화면의 옷”이라고 배웠던 부분이다. 자주 보이는 몇 가지는 뜻을 알게 됐다.
| CSS 속성 | 뜻 | 내가 쓴 예 |
|---|---|---|
background |
배경색 | 따뜻한 크림색 |
color |
글자색 | 진한 파란색 제목 |
font-size |
글자 크기 | 제목은 크게 |
padding |
안쪽 여백 | 버튼 안쪽을 넉넉하게 |
border-radius |
모서리 둥글기 | 버튼을 알약 모양으로 |
이걸 알고 나니 간단한 건 직접 고칠 수 있었다. 버튼 색을 조금 밝게 하고 싶을 때 AI에게 묻지 않고 색 코드만 바꿔 봤다. 망가질까 봐 늘 커밋을 먼저 해 두었다.
글꼴을 바꾸니 분위기가 달라졌다
기본 글꼴은 너무 평범했다. AI에게 왕실 분위기에 어울리는 무료 한글 글꼴을 묻자, 누구나 쓸 수 있는 무료 공개 글꼴(OFL 라이선스)을 추천받았다.
주의할 점도 있었다. 한글 글꼴은 파일이 커서 그대로 쓰면 앱이 느려진다. 그래서 앱에서 실제로 쓰는 글자만 골라 담은 작은 글꼴 파일을 만들어 앱 안에 함께 넣었다. 외부 사이트에서 글꼴을 불러오지 않으니 속도도 빨라졌다. 대신 문구에 새 글자가 생기면 글꼴 파일을 다시 만들어야 한다. 무료 글꼴이라도 사용 조건(라이선스)은 한 번 확인하는 게 좋다.
휴대폰에서 확인한 것
크롬 F12의 기기 툴바로 여러 화면 크기를 확인했다. 첫 화면에서 특히 본 것은 이것들이다.
- 스크롤 없이 시작 버튼이 보이는가. 작은 화면에서는 버튼이 아래로 밀려 안 보였다. 그림 크기와 여백을 줄여 해결했다.
- 버튼이 엄지로 누르기 편한가. 너무 작거나 화면 맨 위에 있으면 불편하다.
- 글자가 어색하게 끊기지 않는가. 한 줄 소개는 “왕이라면,” 뒤에서 줄이 바뀌도록 맞췄다.
- 가로로 돌렸을 때 크게 깨지지 않는가. 완벽하진 않아도 쓸 수는 있게 했다.
첫 화면에 넣지 않기로 한 것
넣고 싶은 것은 많았다. 참여자 수, 인기 작위 순위, 배경 음악. 하지만 첫 화면이 복잡해지면 사람들은 다시 “뭘 눌러야 하지?”로 돌아간다. 그래서 시작 버튼 하나에 시선이 모이도록 나머지는 뺐다. 참여자 수 같은 기능은 서버가 필요해서 지금 단계에서는 만들기도 어려웠다.
바꾼 뒤의 반응
새 첫 화면을 배포하고 다른 친구에게 링크를 보냈다. 이번에는 열자마자 버튼을 눌렀다. 나중에 물어보니 “내가 어떤 집사일지 궁금해서 바로 눌렀다”고 했다. 기능은 하나도 바뀌지 않았는데 첫인상이 달라졌다.
한참 뒤에 다시 손본 것
첫 화면은 한 번에 끝나지 않았다. 앱을 쓰다 보니 제목 위 왕관이 작고, 버튼 글자가 흐리고, 버튼 배경이 화면 배경과 비슷해서 버튼처럼 보이지 않는다는 게 눈에 들어왔다. 그래서 왕관과 제목을 키우고, 버튼 글자를 크고 진하게 바꾸고, 버튼 배경을 금색으로 채웠다. 금색이 너무 진해 보여서 한 톤 옅은 금색으로 다시 조정했다. 디자인은 한 번에 정답을 찾는 게 아니라 보고, 고치고, 다시 보는 일이었다.
출처: 직접 캡처한 화면(2026년 10월 12일)
비교 요청이 가장 효과적이었다
첫 화면 작업에서 가장 효과가 있었던 건 비교 요청이었다. “디자인 시안을 세 가지로 만들어 줘. 각각 다른 파일 이름으로”라고 하면 분위기가 다른 세 가지 버전이 나온다. 세 파일을 나란히 열어 보고 마음에 드는 것을 고른 뒤, 나머지 두 개에서 좋았던 부분을 가져와 합쳤다. 말로 “예쁘게”를 설명하는 것보다 보고 고르는 것이 훨씬 쉬웠다. 남은 시안 파일은 지워서 폴더를 정리했다.
첫 화면을 지나면 이 앱의 핵심인 질문이 나온다. 다음 글에서는 질문 7개를 어떻게 만들고, 답이 어떻게 결과로 이어지게 했는지 적었다.
이전 글: 빨간 글씨 가득한 배포 오류, 겁먹지 않고 해결한 순서
다음 글: 질문 7개로 집사 유형을 맞히는 테스트 앱 만드는 법
답글 남기기