Twinkle AI Labs
전체 글
물타기 계산기 약 3분

첫 앱 출시기 2 — HTML 목업에서 앱으로 넘어간 시점

HTML 목업과 안드로이드 앱을 함께 고치다가, 실제 기기의 줄바꿈과 자판 동작은 목업으로 확인할 수 없다는 한계를 만났습니다. 8월 22일에 동기화를 끝낸 이유입니다.

#android #출시기 #design-system #개인개발
Heejeong KimTwinkle AI Labs

들어가며

8월 22일, 앱의 안내 시트에서 ‘그대로입니다’가 ‘그대로입니 / 다’로 끊겼습니다. HTML 목업에는 keep-all이 있어 멀쩡하게 보이던 문구였습니다. 앱에는 그에 맞는 처리가 없었습니다.

그동안은 HTML 목업에서 화면을 고르고 앱으로 옮긴 뒤, 둘이 달라지면 다시 맞췄습니다. 그런데 목업에서 멀쩡한 문구가 기기에서는 잘렸습니다. 이날을 끝으로 두 화면을 똑같이 유지하는 일을 멈췄습니다.

처음에는 브라우저가 빨랐습니다

첫 커밋에는 앱과 목업이 함께 들어 있습니다.

Initial commit: add stock calculator app and design mockup
stock-calculator/
├── design/    ← 화면 설계 + 디자인 토큰 (mockup.html)
└── app/       ← 안드로이드 소스

design/mockup.html 한 장에 계산기, 이력, 설정, 시트, 확인창, 키패드 서랍을 넣었습니다. 앱이 없을 때는 Compose를 다시 빌드하기보다 브라우저를 새로고침하며 배치를 고르는 편이 빨랐습니다.

Figma 대신 HTML을 쓴 이유도 여기에 있습니다. 화면을 보는 데서 그치지 않고 시트와 키패드를 직접 열고 닫을 수 있었습니다. 색, 간격, 모서리와 움직임은 :root의 CSS 변수로 정했습니다.

:root {
  --s1: 8px;   --s1h: 12px;  --s2: 16px;
  --radius-card: 18px;
  --ease: cubic-bezier(.25,1,.5,1);
  --exit: cubic-bezier(.4,0,1,1);
}

앱의 토큰 표도 이 값을 기준으로 만들었습니다. 이후 Aurora Ledger의 출발점이 된 값들입니다. 시트가 올라오는 속도나 키패드가 닫히는 느낌은 정지 화면보다 직접 조작할 때 판단하기 쉬웠습니다.

브라우저에서는 화면 폭 때문에 혼동한 적도 있습니다. 헤드리스 브라우저에 --window-size=390을 줬는데, 캡처만 390px로 잘리고 레이아웃은 489px로 그려졌습니다. 잘린 오른쪽을 가로 스크롤 문제로 오인할 뻔했습니다. 이후에는 폭을 고정한 iframe 안에서 scrollWidth와 clientWidth를 비교했습니다.

두 화면을 함께 고치던 날들

처음에는 목업에서 색과 간격을 바꿔 보고 앱에 옮겼습니다. 앱에서 새 차이를 발견하면 다시 목업에 반영했습니다.

Design: 목업 키패드 서랍·이력 머리줄 2단·길게 누름 시트 영수증 구조를 앱과 한 벌로 정렬

2주 중 마지막 사흘은 디자인을 정리하는 데 대부분을 썼습니다. 같은 부분을 네 번 수정한 흔적도 있습니다.

Design: 연보라 걷어내기 — sunken을 primarySoft와 갈라놓고…
Design: sunken을 #F5F4F8로 한 칸 더 밝게
Design: 홈 세그먼트 트랙을 흰 면(surface)으로
Design: 바탕 위에 서는 것들을 흰 면으로

연보라를 제거하니 파인 면이 회색으로 보였고, 밝히자 세그먼트 트랙과 구분하기 어려워졌습니다. 주변 색을 함께 보며 고쳐야 했습니다.

키패드 바깥을 누르면 닫히는 동작도 세 번 바꿨습니다. 투명한 입력 영역을 위에 덮었다가 아래에 두었고, 마지막에는 다른 요소가 처리하지 않은 탭을 받도록 했습니다.

돌아간 길을 잊지 않으려고 기록도 나눴습니다. 저장소 루트에는 브랜드와 엔지니어링 기준을, CHANGELOG.md에는 변경 사항을, 기록용 금고에는 판단의 이유를 남겼습니다.

- 되돌림: 통화 기호를 «원» 접미사로 시작했다가 ₩ 접두사로
  — 일곱 언어가 생긴 순간 «원»은 한국어를 읽는 사람에게만 통하는 그림이 된다
- 되돌림: 이름 입력 시트의 자동 포커스
  — 얼굴 피커와 함께 서면서 자판이 시트를 가린 채 튀어서

연보라를 제거하려는 시도는 두 번 있었습니다. 두 번째에는 이 기록을 읽고 앞서 왜 되돌렸는지 확인한 뒤 멈췄습니다.

언어가 늘어나자 앱에서 볼 것이 늘었습니다

8월 18일에 영어를, 8월 22일에 아홉 개 언어를 추가했습니다. 한국어 화면과 문구를 먼저 정리하고 열한 개 언어로 늘려, 문구가 바뀔 때마다 번역을 모두 다시 고치는 일을 줄였습니다.

문자열과 서식을 리소스에 두는 규칙은 처음부터 지켰습니다.

// 이렇게 쓰는 순간 그 화면은 한국어 전용이 됩니다
Text("${amount}원")

이 코드처럼 단위를 붙이면 번역에서 바꿀 수 없습니다. 날짜 서식, %1$s주 같은 단위, 통화 이름 옆의 괄호까지 리소스에 뒀습니다. 일본어와 중국어에서 쓰는 전각 괄호（）와 앞 공백도 " (" + symbol + ")"처럼 코드로 조합하면 조정하기 어렵습니다.

문구는 리소스에서 바꿀 수 있어도, 글자가 들어갈 공간은 앱에서 확인해야 했습니다. 언어별 길이, 자판이 시트를 가리는 범위, 기기의 스크롤 관성과 길게 누름, 시스템 글꼴 크기에 따른 배치는 HTML만으로 판단하기 어려웠습니다. 똑같이 재현하려면 목업에도 별도 구현이 필요했습니다.

마치며

8월 22일의 마지막 동기화 커밋입니다.

Design: 목업 시트 동기화 마무리 — 확인창 부제·선택지 두 줄, 종목 삭제/이력 삭제 문구를 앱과 한 벌로

‘그대로입니다’가 잘리는 것을 본 뒤에는 앱을 기준으로 확인하고 수정하기로 했습니다. 두 구현을 맞추는 수고에 비해 목업에서 얻는 정보가 줄어들고 있었습니다. 색 표가 여러 벌로 갈라졌던 작업에서도 같은 값을 따로 관리하는 부담을 겪었습니다.

목업 파일은 초기 화면과 토큰을 확인할 수 있도록 저장소에 남겼습니다. 이제 수정할 화면은 앱 쪽입니다.

3편: AdMob 광고와 동의 흐름