2005년 애플 iPod 각인 미리보기, JPEG와 ImageMagick으로 실시간 구현
- 전 애플 온라인 스토어 UI 엔지니어가 2004-2006년 iPod 주문의 'Personalize your iPod' 페이지에 회전형 제품 화면, 실시간 각인 미리보기, 배송 지연 강조를 시제품으로 추가했음
- 회전 애니메이션은 여러 장의 JPEG를 JavaScript로 순환해 구현했고, 각인 문구는 서버의 ImageMagick이 이미지로 만든 뒤 iPod 뒷면 위에 겹쳤음
- 배송 일정이 바뀌면 CSS 클래스를 교체해 배경색을 바꾸는 yellow fade 효과를 적용했음
- 작성자는 당시 브라우저 기술 제약 속에서 만든 구현이며, 지금도 작동하는 데모 페이지를 공개했음
Hacker News opinions
키 입력마다 서버를 왕복한 이유가 궁금함. 미리 문자 모양을 클라이언트에 넣고 JS로 바꾸는 방법도 있었겠지만, 실제 각인 질감은 브라우저 텍스트만으로 재현하기 어려웠을 듯함
2005년엔 그 방식이 훨씬 쉬웠고, 다른 방식은 사실상 브라우저별 지뢰밭이었음. IE6와 IE5, Safari 2, Firefox 1.0, 넷스케이프까지 있었고 PNG 알파도 JS 해킹이 필요했음. 커스텀 폰트는 Flash sIFR 정도였는데 배경을 맞추기도 골치 아팠음
데모의 각인 이미지는 132x26픽셀에 JPEG 2-4KB라서 56k 모뎀에서도 1초 미만일 수 있음. 빨리 입력하면 중간 이미지를 건너뛰게 만들 수도 있는데, 데모 JS에 그 코드는 없어도 지금 브라우저는 일부 요청을 알아서 취소하는 것처럼 보임
1990년대에도 글자별 이미지를 써서 이런 건 했음. 다만 미리 정한 문자 집합만 지원하고, 투명 배경에는 GIF가 필요하지만 GIF는 색 관리가 안 됐음. CRT에서 회색이 붉게 보이는 문제를 애플이 피하고 싶었을 것임
이런 작은 상호작용을 찾아서 직접 만드는 역할이 있었다는 점이 좋음. 큰 팀에서는 보통 프로젝트 시작이나 리디자인 때만 이런 걸 넣는데, 사용자 경험을 조금씩 낫게 만드는 전담 역할은 드묾
2004-2006년이면 Flash 애플릿으로 클라이언트에서 만들 수도 있었음. 당시 QuickTime도 일부 Flash를 지원했는데 애플이 이 작업에 SWF를 썼는지는 궁금함
QuickTime의 Flash 지원은 단순 애니메이션을 QuickTime 상호작용으로 매핑하는 수준이었다고 기억함. ActionScript는 지원하지 않았을 가능성이 커서 이 정도 입력 반응은 어려웠을 것임
글에 적힌 시기는 2019년이 아니라 2004-2006년임. 실제 제작은 2004년이었을 수도 있음
각인은 재판매에 불리하니 왜 하는지 모르겠다는 말도 있지만, 시계나 보석, 이니셜 옷처럼 선물에는 오래전부터 쓰였음. 애플은 소비자 전자제품 범주 밖의 프리미엄 선물 경험을 노린 듯함
내 물건을 남의 것과 구분하고, 잃어버렸을 때 연락처를 남기려고 각인했음. 재판매 가치가 개인화나 선물의 의미보다 항상 우선할 이유는 없음
변경된 요소를 노란색으로 잠깐 강조하는 'yellow fade'가 그리움
내 사이트임. 궁금한 점 있으면 답하겠음
옛 데모를 직접 돌려보면 2005년 제약이 확 와닿음. 노란색 페이드와 서버 렌더링 프레임으로 만든 반응이 지금 봐도 정감 있음