1. 모바일 우선주의(Mobile-First)의 기술적 실현

웹사이트의 진정한 완성도는 가장 제약이 많은 환경, 즉 모바일 작은 화면에서 결정됩니다. 데스크탑의 넓은 캔버스에서 우아하게 펼쳐지던 아르누보 인터페이스는 모바일로 넘어오면서 예상치 못한 문제들에 직면했습니다. 메뉴 항목이 겹치고, 장식 요소들이 콘텐츠를 가리며, 클릭 반경이 너무 좁아 오동작이 빈번했습니다. 우리는 이를 해결하기 위해 단순한 레이아웃 수정을 넘어, 모바일 전용 이벤트 처리 로직을 새롭게 설계했습니다.

가장 공을 들인 기술적 디테일은 '햄버거 메뉴'의 동작 방식이었습니다. 사용자가 메뉴 외부를 터치하거나 화면을 스크롤할 때 메뉴가 자동으로 닫히는 기능을 구현하기 위해, 자바스크립트의 이벤트 버블링(Event Bubbling)을 정교하게 제어했습니다. 또한 `touchstart`와 `click` 이벤트를 동시에 지원하면서도 중복 실행을 막는 `e.preventDefault()` 전략을 사용하여, 어떤 모바일 기기에서도 매끄러운 반응성을 확보했습니다. 이는 단순한 디자인의 변화가 아닌, 사용자 경험(UX)의 질적 도약이었습니다.

2. 국경을 넘는 지혜: 국경을 넘는 지혜: 다국어 번역 시스템 아키텍처

'별자리 다방'이 전하는 운명의 이야기는 특정 언어권에 국한될 필요가 없다고 판단했습니다. 우리는 글로벌 사용자를 맞이하기 위해 한국어와 영어를 동시에 지원하는 다국어 시스템을 독자적으로 구축했습니다. 외부 라이브러리에 의존하여 사이트 무겁게 만드는 대신, HTML5의 표준 속성인 `data-attributes`를 활용한 시맨틱한 접근 방식을 택했습니다.

각 텍스트 요소에 `data-ko`와 `data-en` 속성을 부여하고, `main.js`의 번역 엔진이 사용자의 선택에 따라 DOM을 실시간으로 교체하는 구조입니다. 또한, 사용자의 언어 설정을 브라우저의 `localStorage`에 영구 저장하여, 재방문 시에도 사용자가 선호하는 언어로 즉시 서비스를 이용할 수 있도록 배려했습니다. 여기에 구글 번역 API를 통합하여 제3의 언어를 사용하는 유저들까지 포용할 수 있는 '글로벌 접근성'을 완성했습니다.

3. 폰트 렌더링 최적화 전략

한글 명조체와 영문 세리프체는 글꼴의 굵기와 가독성 범위가 상이합니다. 우리는 두 언어 모두에서 아르누보의 우아함을 유지하기 위해 'Font-display: swap' 전략을 사용하여 폰트 로딩 중에도 콘텐츠가 즉시 보이도록 조치했습니다. 또한 필요한 글자 집합만 포함된 서브셋(Subset) 폰트를 활용하여 초기 로딩 속도를 30% 이상 단축시키는 성과를 거두었습니다.

4. 사용자로부터 배운 겸손한 교정

Phase 4를 통해 우리는 '나를 위한 개발'이 아닌 '사용자를 위한 배려'가 무엇인지 깊이 고민하게 되었습니다. 실제 모바일 기기 수십 대에서 교차 테스트를 진행하며 발견된 미세한 오동작들을 하나씩 해결하는 과정은 고되었지만, 그만큼 서비스의 품질은 단단해졌습니다. 이제 서비스의 기능적 측면은 거의 완성되었습니다. 마지막 단계에서는 이 모든 시스템을 안전하게 지키는 보안과 최종 안정화 작업을 다루겠습니다.