인터랙티브 앱 가이드 구축하기
지원 팀은 직접 설치해 보지 않은 앱을 사용할 때 종종 어려움을 겪습니다. PDF 매뉴얼은 아무도 읽지 않기 때문에 좋은 해결책이 아닙니다.
브라우저 내에서 실제 앱 스크린샷과 상호작용할 수 있는 도구를 만들었습니다. 실제 휴대폰을 사용하는 듯한 느낌을 줍니다. 스크린샷의 버튼을 클릭하면 다음 화면이 나타납니다.
작동 방식
이미지는 Firebase Storage를 사용했고, 로직은 vanilla JavaScript를 사용했습니다. 가볍게 유지하기 위해 외부 라이브러리는 사용하지 않았습니다.
비결은 퍼센트(%) 기반의 핫스팟(hotspot)을 사용하는 것입니다. 고정된 픽셀 대신 0에서 100 사이의 좌표를 사용하여 클릭 가능한 영역을 정의합니다. 이렇게 하면 창 크기가 변해도 버튼의 정렬이 유지됩니다.
시스템은 간단한 상태 머신(state machine)을 사용합니다. 각 화면은 다음을 포함합니다:
- 이미지 ID
- 핫스팟 목록
- 대상 목적지
내가 만든 도구
눈대중으로 좌표를 측정하는 것은 느립니다. 프로세스를 가속화하기 위해 독립형 HTML 에디터를 만들었습니다.
- 캔버스에 스크린샷 업로드.
- 마우스를 드래그하여 사각형 그리기.
- 에디터가 퍼센트 좌표를 자동으로 계산합니다.
- 드롭다운을 통해 해당 영역을 다른 화면에 연결합니다.
- 최종 객체를 코드에 직접 내보냅니다.
사용자를 돕기 위해 클릭 가능한 영역에 푸른색으로 깜빡이는 효과(pulsing blue glow)를 추가했습니다. 이를 통해 사용자가 어디를 탭할 수 있는지 정확히 보여줍니다.
주요 기술적 교훈
Firebase Security: 스토리지 URL을 수동으로 만들지 마세요. SDK의
getDownloadURL메서드를 사용하세요. 여기에는 필요한 인증 토큰이 포함되어 있습니다. 이 토큰이 없으면 오류 메시지도 표시되지 않은 채 이미지를 불러오는 데 실패하게 됩니다.Layout Fixes: flex column 레이아웃에서는 부모 요소에 명시적인 높이를 설정하세요. 자식 요소에는
min-height를 0으로 설정하세요. 이는 레이아웃 붕괴 및 오버플로 문제를 방지합니다.Scaling: CSS
transform: scale속성을 사용하세요. 이를 통해 이미지와 핫스팟이 함께 크기가 조정됩니다. 화면 크기에 관계없이 모든 요소의 비율이 유지됩니다.Speed: URL을 하나씩 가져오면 지연이 발생합니다. 인메모리 캐시(in-memory cache)와 백그라운드 프리로드(preload) 함수를 구현했습니다. 모달이 열릴 때 모든 이미지가 병렬로 로드됩니다. 덕분에 탐색이 즉각적으로 이루어지는 느낌을 줍니다.
결과
- 전체 탐색이 가능한 20개의 화면.
- 52개의 인터랙티브 핫스팟.
- 자동 스케일링 덕분에 스크롤바가 전혀 없음.
- 프리로딩을 통한 즉각적인 화면 전환.