인터랙티브 앱 가이드 만들기
지원 팀은 종종 직접 설치해 보지 않은 앱을 다루는 데 어려움을 겪습니다.
스크린샷이 포함된 PDF가 표준적인 해결책이지만, 대부분의 사람들은 PDF를 읽지 않습니다. 저는 더 나은 것을 만들고 싶었습니다. 실제 앱을 사용하는 듯한 느낌을 주는 가이드를 원했습니다. 홈 화면을 보고, 버튼을 클릭하면 다음 화면이 나타나는 방식 말이죠.
실제 스크린샷과 클릭 가능한 핫스팟(hotspots)을 사용하여 인터랙티브 가이드를 제작했습니다.
작동 방식
이미지는 Firebase Storage를 사용했고, 로직은 외부 라이브러리 없이 바닐라 JavaScript를 사용했습니다.
- 각 화면은 하나의 전체 이미지입니다.
- 이미지 위에 '핫스팟'이라 불리는 투명한 사각형을 배치합니다.
- 이 핫스팟들은 픽셀 대신 퍼센트(%) 단위를 사용합니다. 덕분에 창 크기가 변해도 정렬이 유지됩니다.
- 간단한 상태 머신(state machine)이 내비게이션을 처리합니다. 각 화면은 ID, 이미지, 그리고 핫스팟 목록을 가집니다.
에디터
좌표를 일일이 수동으로 측정하는 것은 느립니다. 프로세스를 가속화하기 위해 독립형 HTML 에디터를 만들었습니다.
- 스크린샷 업로드.
- 마우스를 드래그하여 핫스팟 그리기.
- 핫스팟을 대상 화면에 연결.
- 코드를 직접 내보내기.
디자인 선택 사항
모든 화면에 전체 내비게이션이 있는 것은 아닙니다. 혼란을 방지하기 위해 클릭 가능한 영역에 푸른색으로 깜빡이는 효과(pulsing blue glow)를 추가했습니다. 이를 통해 사용자는 어디를 탭할 수 있는지 정확히 알 수 있습니다.
주요 기술적 교훈
- Firebase Storage: URL을 수동으로 생성하지 마세요. SDK 메서드인
getDownloadURL을 사용하세요. 여기에는 보안 규칙을 통과하는 데 필요한 인증 토큰이 포함되어 있습니다. - CSS Flexbox: 컬럼 레이아웃에서
flex: 1을 사용하는 경우, 부모 요소에 명시적인 높이가 있어야 합니다. 오버플로를 방지하려면 자식 요소에min-height: 0을 설정하세요. - 성능: 클릭할 때마다 Firebase를 호출하면 지연이 발생합니다. 인메모리 캐시(in-memory cache)를 구현하고 모달이 열릴 때 모든 이미지를 미리 불러오도록(preload) 했습니다. 이를 통해 내비게이션이 즉각적으로 이루어집니다.
- 스케일링: CSS
transform: scale()속성을 사용하세요. 이를 통해 화면 크기에 관계없이 이미지와 핫스팟이 완벽하게 정렬된 상태를 유지할 수 있습니다.
결과
- 실제 휴대폰처럼 조작 가능한 20개의 화면.
- 시각적 힌트가 포함된 52개의 핫스팟.
- 프리로딩 및 캐싱을 통한 즉각적인 로딩.
- 어떤 모달 크기에도 적합한 반응형 디자인.