[태그:] 앱 메뉴 구성

작성자: 컴맹 집사

대표 이미지: 늘어난 메뉴를 카드로 정리한 첫 화면 (출처: 직접 캡처한 화면(2026년 9월 26일))

“아카데미 버튼은 어디 있어? 안 보이는데.”

아카데미까지 넣고 나니 이런 질문이 나왔다. 앱에는 이제 여러 콘텐츠가 있었다. 집사 작위 진단, 웹툰, 게임, 아카데미, 친구와 궁합 보기. 그런데 이것들로 가는 입구가 첫 화면, 작위증 화면 아래, 웹툰 마지막 컷 아래에 흩어져 있었다. 기능을 하나씩 붙일 때마다 그때그때 입구를 만든 결과였다.

만든 나는 어디에 무엇이 있는지 알지만, 처음 온 사람에게는 미로였다. 첫 화면을 새로 짤 때가 됐다.

버그가 아니라 설계였다

처음에는 아카데미 버튼이 사라진 줄 알았다. AI에게 물어보니 버그가 아니었다. 아카데미와 궁합 보기 버튼은 저장된 작위증이 있을 때만 첫 화면에 보이도록 만들어져 있었다. 작위증이 없는 사람에게는 쓸모가 없으니 숨긴 것이다.

그런데 이 설계가 오히려 문제였다. 처음 온 사람의 첫 화면에는 볼거리가 거의 없었다. 작위증 아래에만 있는 기능은 있는지조차 알 수 없었다. 그래서 방향을 바꿨다.

작위증이 있든 없든, 첫 화면에는 모든 입구를 항상 보여 준다. 대신 작위증이 없으면 버튼이 하는 일을 바꾼다.

• 이전에 받은 작위증 보기 → 없으면 “아직 작위가 없어요 · 지금 받기”로 바뀌고 진단을 시작한다.
• 아카데미 도전하기 → 없으면 1단계 체험판으로 들어간다. 합격해도 저장되지 않는다.
• 친구와 궁합 보기 → 없으면 “왕국 만들고 초대하기”로 바뀌고 진단을 시작한다.

같은 자리의 버튼이 상황에 따라 다른 일을 한다. 처음 온 사람은 무엇이 있는지 볼 수 있고, 누르면 자연스럽게 진단으로 이어진다.

첫 화면을 카드로 정리했다

입구가 늘어나니 버튼을 줄줄이 세워 두는 방식으로는 한계가 있었다. 기능마다 카드를 만들어 제목, 한 줄 설명, 버튼을 담았다. 첫 화면은 이런 순서가 됐다.

1. 맨 위: 앱 이름, 한 줄 소개, “우리 집 왕” 사진, “나도 왕실 집사 되기” 버튼
2. 🎮 왕실 오락실: 게임을 모아 둔 곳
3. 📖 웹툰 보기, 이전에 받은 작위증 보기, 아카데미 도전하기
4. 👯 친구 강아지와 궁합 보기
5. 📣 친구에게 앱 알리기, 휴대폰에 앱 설치하기 안내

게임이 여러 개로 늘면서 첫 화면에 게임 버튼을 하나씩 놓을 수는 없었다. 그래서 게임은 왕실 오락실이라는 화면 하나에 모으고, 첫 화면에는 오락실 입구 카드 하나만 뒀다. 웹툰도 “웹툰 보기” 버튼 하나로 들어가서 안에서 고르게 했다. 첫 화면에는 입구만, 고르는 것은 안에서 하는 원칙이다.

오락실 카드는 두 번 손봤다. 처음에는 카드가 아래쪽에 있었는데, 게임에 더 비중을 둬야겠다고 생각해 맨 위 소개 바로 다음으로 올렸다. 또 카드에 글자만 있으니 밋밋해서, 게임마다 이모지를 넣은 동그란 배지(🦴 왕실 간식 잡기, 👑 왕관 강아지 만들기, 🃏 같은 카드 찾기 등)를 나란히 보여 주게 바꿨다. 카드만 봐도 어떤 게임이 있는지 알 수 있게.

진짜 문제: 파일 하나가 너무 길어졌다

첫 화면 작업을 하던 중 더 큰 문제가 드러났다. 처음에는 모든 것을 index.html 파일 하나에 넣어 왔는데, 기능이 늘수록 파일이 끝없이 길어졌다.

• AI에게 파일 전체를 보여 주기 어려웠다. 너무 길어서 AI가 앞부분 내용을 헷갈렸다.
• 한 곳을 고쳤는데 다른 기능이 망가지는 일이 생겼다. 한 파일 안에 있으니 서로 영향을 줬다.
• 원하는 부분을 찾는 데만 한참 걸렸다.

AI는 파일을 역할별로 나누자고 했다. 처음에 배운 “뼈대(HTML), 옷(CSS), 동작(JavaScript)” 구분을 실제 파일로 나누는 것이다. (출처: MDN 웹 문서, CSS)

파일을 이렇게 나눴다

kba-butler-app/
├─ index.html            ← 뼈대: 화면 틀
├─ css/
│  ├─ style.css          ← 옷: 공통 디자인
│  └─ snack-game.css 등  ← 게임별 디자인
├─ js/
│  ├─ app.js             ← 화면 흐름, 저장, 공유 같은 공통 기능
│  ├─ generator.js       ← 왕국 이름 만들기, 유형 판정
│  ├─ certificate.js     ← 작위증 그리기
│  ├─ snack-game.js 등   ← 게임마다 한 파일
│  ├─ data.ko.js         ← 질문·작위·문구 (내용)
│  ├─ strings.ko.js      ← 화면에 나오는 글자 (내용)
│  └─ academy-data.ko.js ← 아카데미 문제 (내용)
├─ webtoon/              ← 웹툰 그림
└─ assets/               ← 배경·기본 사진

특히 내용 파일이 마음에 들었다. 내가 직접 고치는 내용(질문, 문구, 문제)과 AI가 주로 고치는 기능 코드가 분리됐다. 질문 문구 하나를 고치려고 게임 코드 근처를 지나갈 필요가 없어졌다.

게임은 게임마다 파일 하나로 만들었다. 새 게임을 넣을 때 새 파일을 하나 추가하고, 오락실에 카드 하나를 더하면 된다. 게임 하나를 고치다가 다른 게임이 망가질 일도 줄었다.

파일을 나누고 얻은 뜻밖의 선물: 여러 언어

내용 파일 이름 끝에 붙은 .ko는 한국어라는 뜻이다. 나중에 영어판과 일본어판을 만들 때 이 구조가 빛을 봤다. data.en.js, strings.ja.js처럼 내용 파일만 언어별로 만들고, 기능 코드는 세 언어판이 함께 쓴다. 기능을 한 번 고치면 세 언어판에 모두 적용된다.

대신 새로 배운 규칙도 있다. 어떤 기능의 내용이 아직 한국어판에만 있으면, 영어판과 일본어판에서는 그 기능이 자동으로 숨겨지게 했다. 번역이 안 된 기능이 반쯤 깨진 채로 보이는 것보다 낫다. 그리고 공통 기능 파일을 고치면 세 언어판을 모두 다시 배포해야 한다. 한 번은 한국어판만 배포하고 영어판 배포를 깜빡해서, 영어판에만 바뀐 내용이 빠진 적이 있다.

---

이전 글: 작위를 한 단계씩! 앱에 퀴즈 아카데미 넣는 법
다음 글: 친구와 궁합까지? 앱 결과를 공유하는 기능 설계기