리서치 뉴스
애플의 초기 웹 경험 혁신 사례: 아이팟 각인 페이지 개선
Apple iPod Engraver (2019)
Hacker News애플이 2004년부터 2006년 사이 온라인 스토어에서 iPod 개인화 페이지를 개선하며 사용자 경험을 혁신한 사례입니다.
세 줄 요약
- 단순 입력 양식에 그치지 않고, 회전 가능한 모델과 고객의 문구가 실시간으로 각인되는 인터랙티브 기능을 추가했습니다.
- 당시 브라우저 기술적 한계 속에서도 마법처럼 느껴지는 수준의 웹 애니메이션을 구현해낸 점이 주목할 만합니다.
- 이는 초기 웹 환경에서 어떻게 창의적인 디자인과 사용자 경험(UX) 혁신이 가능한지 보여주는 중요한 레퍼런스입니다.
글쓴이는 2004년부터 2006년까지 애플에서 UI 엔지니어로 근무하며 온라인 스토어에 적용할 인터랙티브 개념을 프로토타이핑했습니다. 그중 한 프로젝트는 고객이 주문하는 아이팟 뒷면에 두 줄의 문구를 각인할 수 있는 '개인화' 페이지를 개선한 것입니다.
원래 이 페이지는 단순한 입력 양식으로만 구성되어 있었으나, 글쓴이는 여기에 회전 가능한 아이팟 모델을 추가하고, 고객이 제출한 텍스트가 실시간으로 각인되는 미리보기 기능을 구현했습니다. 또한 배송 시간 변경 시 배경색을 변화시켜 강조하는 기능도 포함되었습니다.
애니메이션은 JavaScript를 사용하여 일련의 JPEG 이미지를 순환시키는 방식으로 처리되었으며, 각인은 imagemagick을 이용해 사용자 텍스트를 받아 아이팟 뒷면에 오버레이되는 이미지로 만들었습니다. 배송 시간 하이라이트는 CSS 클래스 전환(노란색 페이드 스타일)으로 구현되었습니다. 글쓴이는 당시 제한적인 브라우저 기술 환경 속에서 이러한 솔루션들이 마법처럼 느껴졌다고 설명했습니다.