1시 30분 부터 6시까지 두 세션으로 나누어 진행되었는데 나는 디자이너 인지라 UI 관련된 Session1을 들었다.
KeyNote. Daum의 UI 기술력
이재혁 님 (Daum CTO)
다음에는 현재 500여 명의 개발자가 있으며, 2000년부터 UI관심을 갖기 시작하였습니다.
Daum 세상과 소통하다.
최고의 기술은 마술입니다. 여러분 마술사가 되세요.
다음 메인 페이지에 담긴 비밀
김선진 님 (Daum Main UI 개발)
다음에서는 다음 메인페이지, 첫페이지를 Daum Top 이라고 부른다.
Daum Top은 Daum의 대표 얼굴이며 Daum의 서비스 게이트웨이 이다.
유저의 입맛에 맞는 컨텐츠를 적절히 제공하기 위해 여러가지 관점에서 접근하여 개발한다. 또한 고객의 소리에 민감하며 많은 서비스팀과 연계되며 여러대의 서버와 과도한 트래픽이 발생한다. UI 관점에서 매년 포커스를 맞춰 개발한다.
- 메인을 개편하려면 대략 6개월이 소요되며 오픈 후에도 웹표준 및 웹 접근성을 높이기 위해 더 바쁜 시간을 보낸다.
* 메인 개편 프로세스
1. 과거 Daum 첫화면 분석
2. 일반사용자 UI 및 전문가 리뷰
3. 개선사항을 도출한 개편 시나리오
4. 디자인
5. UI개발 (HTML/CSS/Javascript)
HTML : 과거 W3C Validation Markup 위주에서 시맨틱 마크업으로 웹표준화,
웹접근성 향상 작업
CSS : Cross Browsing, 핵 없이 작업
6. 데이터연동 및 개발협업
7. 오픈 프로세스
--> 6개월 정도 소요
* Daum Top의 역사
2003~2005 맞춤탑 (타겟팅 : 성별, 연령등)
~2007 개인화탑 (정보를 세분화한 1:1 개인화 탑)
~2008 지능형 개인화탐 (실시간 Data 연동을 통해 고객의 Needs가 즉각적으로 반영되는 TOP)
(1) W3C
① XHTML 사용 (W3C Validator 통과)
- 메타데이타를 생성하기 쉽다.
- 각 노드에 새로운 속성을 추가하기 쉽다.
- 재가공이 용이하다.
W3C의 비젼
- Semantic Web : 가치있는 정보들이 존재하고 검색과 공유가 이루어지는 웹.
- 유비쿼터스 웹 : 웹접근성 (언제 어디서나 접근 가능)
② Semantic Web
- rel 속성을 사용하여 영역별 구분과 표시
Home : 페이지 시작(로고)
Bookmark : 페이지 인덱스
Directory : 카테고리 구분
Tag : 실시간검색어
사용자의 신체적 환경적 조건에 관계없이 웹에 접근하여 이용가능하도록 보장하는 것
- 접근성 링크 제공 : 다음 메인의 CSS를 벗겨보면 목차가 나오는 것을 확인 할 수 있다. 이는 페이지의 구조를 알 수 있는 기능 이기도 하다.
- 웹접근성 안내페이지 제공
: 서비스 소개
: 화면 낭도기 사용시 참고사항
: 접근성 향상을 위한 제안
: 사용자의견 접수 현황
- 노출 순위에 따른 마크업 : 다음 로고 -> 시작페이지+툴바설치 -> 상단 주력 서비스 우측 미니 다음 -> 상단 주력 서비스 좌측 디렉토리
- 의미에 맞는 마크업 작성 (Heading와 Hr-영역별 구분)
(2) IR기법과 키보드 고려한 탭 컨텐츠
- IR (Image Replace)
ㄴ 외부적으로는 레이어 , 내부적으로는 라디오 버튼
ㄴ 키보드 사용자도 고려하여 특별한 스크립트를 쓰지 않아도 종합글을 모두 TAB 키으로 이동한 후에는 스포츠 탭으로 이동함
" 이제 보이지 않는 곳까지 신경써야 하는 시대가 왔다."
미니다음 개편 사례 : 20픽셀의 미학, 그 현재와 미래
추홍엽 님 (UI Tech-Fronlier 개발)
- 각 페이지 상단의 로그인/로그아웃, 메일, 카페, 블로그등을 연결하는 Tool bar
- Daum 의 Gateway 역할을 한다.
- 20픽셀의 미학
- 성능 : 미니다음은 다음 성능에 영향을 미치지 않아야 하므로 페이지 로딩 후 하단에서 호출한다
한메일 Express iphone 버전 개발 사례
2. 디자인은 심플하게
이올린에 북마크하기
