아이리버의 과감한 이미지 컷팅

예전 광고를 찾아 볼 것이 있어서 아이리버 사이트에 갔다가, 인덱스에 예쁜 신제품이 나온 것을 봤습니다. 깜찍하게 생긴 것이 그냥 지나칠 수가 없어서 들어가서 스펙을 보다가..
평소 습관대로 페이지 드래그를 했는데…
헛..
페이지 전체가 다 이미지 인 것 아니겠습니까! 안티앨리어싱 안먹힌 텍스트에 속고 말았습니다!

아이리버

iriver
Image border mode

S10을 소개하는 페이지입니다.
코딩하신 분이… 오픈 날짜가 엄청 임박했거나, 엄청 과감한 사람이 아닌가 싶습니다.
코드를 살펴 보면, 예전의 테이블 기반 방식을 철저히 따라갔다고 볼 수는 있는데, 그 중에서도 굉장히 독특한 케이스가 아닌가 싶습니다.
보통 테이블의 셀 안에 이미지와 텍스트를 하나씩 넣는다고 해도 컨텐츠의 형태에 맞게 자르는 경우가 대부분인데, 지금 이 경우는… 아무런 고민없이 격자로 툭툭 잘라버린게 눈에 보입니다.
보통 텍스트를 가로 질러서 이미지를 자르지는 않는데 말입니다. 이분은 아주 과감하게 텍스트를 분리시켜버렸습니다!
아래는 테이블 시작 부분 코드입니다.

이런이런.. 살짝 살펴보니 문서안에 DTD 선언도 없고, img에 alt값도 없습니다.

그나마 E10을 소개하는 페이지는 이미지와 텍스트를 살짝 섞어서 코딩했습니다. 약간 여유가 있었던것 같습니다.

애플

0610_apple
컨텐츠나 컨텐츠를 배열하는 형식이 비슷한 애플을 한번 둘러보겠습니다.
역시나 습관처럼 페이지를 마우스로 긁어 보았어요. 역시나.. 텍스트와 이미지를 넣고 CSS로 적절히 배치를 해준 구조입니다.
아래는 HTML코드, 그 아래는 CSS코드입니다.

img에도 .left나 .right등의 항목을 미리 지정해 놓고 사용하는 것을 볼 수 있습니다.

흠.
그렇다고요~
별얘기 아니었습니다~

  • 저 정도의 레이아웃이면 웹표준 기반으로 짜는 데 그리 오래 걸리지도 않을 텐데..(디자인 완료됐다는 가정 하에 한 30분?) 좀 아쉬운 모습이군요..;

  • 왠지 논점에서 한~참 벗어났지만 새제품 디자인 멋지네요. 😀

  • 30만원 짜리 알바생이 만들었을 수도.. 있어;;
    내가 그랬단건 아니공; 푸히히

  • 이러니 개발 비용이 많이 들어간다는 말이 나오지…쯧쯧

  • 눈물 나올 뻔 했어요. ㅋㅋㅋㅋ

  • 유지보수에 힘쓰기 싫어서 그냥 이미지나 뚝딱 짤랐을 가능성이 많죠;
    그냥 한번 만들고 버릴 페이지라고 생각했을거에요 -_-;

    안타까운현실이죠 =_=;

  • 헉쓰.. 저는 이미지를 잘 안써서 그런지 저렇게 놀라운 장면은 처음 보는군요.

  • 누구는 스케쥴 쫓겨가면서 힘들게 이미지 잘라 넣었을 텐데..
    그것이.. 어떤 사람한테는 유머가 되고 또 안타까움이 되고 짜증이 되고 놀람이 되고 그러네요..ㅋㅋ

  • jay

    코멘트가 시간대별로 색이 다르구뇽 +_+
    걍 테스트;;;;; 후다닥

  • 대략 3년전에 제가 아이리버 작업했었는대 -ㅅ-);;;

    아에 달라졌네용 홍홍홍.

  • bubicom

    그런거죠. .인터넷 종량제를 찬성하지 않지만
    이미지로 바르는 경우가 늘어서 걱정입니다.