커피향 그윽한 블로그~

지난 금요일(5/30) 다음 UI DevDay 2008 를 다녀왔다.
다행히 팀장님의 넓으신 아량(?)으로 오전근무만 하고 소백에서 맛있는 점심을 먹고 삼성동 섬유센타로 향했다.

조금 일찍 도착하니 눈에 띄는건 사은품!!


USB(512MB), 컵, 안마봉, 수첩 중 마음에 두는 두가지를 고르라고 해서 난 USB와 안마봉을 골랐고 다음로고가 새겨져있는 데스크노트도 기본 사은품으로 받았다.
절대..사은품때문에 간 것은 아닌데 언제나 세미나를 갈 때마다 한아름 안아오는 사은품은 이상하게 나에게 큰 기쁨(?)이 되곤한다.^^

대회의실과 중회의실로 나누어 세미나는 진행되었으며 1:30~5:20 까지 두 세션으로 진행되었다.
keynote로 다음 이재혁 님께서 행사 취지를 설명하셨다.

KeyNote. Daum의 UI 기술력

이재혁 님 (Daum CTO)

다음에는 현재 500여 명의 개발자가 있으며, 2000년부터 UI관심을 갖기 시작하였습니다.

Daum 세상과 소통하다.
최고의 기술은 마술입니다. 여러분 마술사가 되세요.

 그 후 각 세션에 맞춰 회의실 이동이 있었다. 난 대회의실에서 Session1을 들었다.
(잠깐!! 
하나, 너무 뒤쪽에 앉아서 사진질이 좋지 않아서 발표자분들의 멋진 외모^^ 가 잘 안나왔으니 양해바람.
둘, 아래 강의 내용은 내가 기억하고 싶은 내용들만 그냥 수첩에 슥슥 적은것이라서 실제와 다분히 차이가 있을 수 있음 )

다음 메인 페이지에 담긴 비밀

김선진 님 (Daum Main UI 개발)

다음에서는 다음 메인페이지, 첫페이지를 Daum Top 으로 부른다.
Daum Top은 Daum의 대표 얼굴이며 Daum의 서비스 게이트웨이 이다.
user 입맛에 맞는 컨텐츠를 적절하기 위해 여러가지 관점에서 접근하여 개발한다.

- 메인을 대략 개편하려면 6개월이 소요되며 오픈 후에도 웹표준 및 웹 접근성을 높이기 위해 더 바쁜 시간을 보낸다.

* Daum Top의 역사
2003~2005 맞춤탑 (타겟팅 : 성별, 연령등)
~2007 개인화탑 (정보를 세분화한 1:1 개인화 탑)
~2008 개편 (지능화된 실시간 개인화 서비스 진행중)
- 한 페이지다. 허나 만만치 않다.

* W3C
1) XHTML 사용
- 메타데이타 생성이 쉽다.
- 각 노드에 새로운 속성을 추가하기 쉽다.
- 재가공하여 사용하기 쉽다.
2) Semantic Markup
- rel 태그를 사용하여 영역 구분
  Home / bookmark / Directory(카테고리) / Tag(실시간검색어)
3) 접근성
- 다음 메인의 CSS를 벗겨보면 목차가 나오는 것을 확인 할 수 있다.
- user의 시선 : 로고 -> 상단 시작페이지로 -> 디렉토리
- 의미에 맞는 마크업 작성

    ㄴ 외부적으로는 레이어 , 내부적으로는 라디오 버튼
- IR (Image Replace)

    ㄴ 키보드 사용자도 고려하여 특별한 스크립트를 쓰지 않아도 종합글을 모두 TAB 키으로 이동한 후에는 스포츠 탭으로 이동함

" 이제 보이지 않는 곳까지 신경써야 하는 시대가 왔다."

첫 세션이라 그런지 나 스스로도 열심히 들었던 김선진님의이야기는
Daum TOP에 대한 히스토리와 고민했던 문제들, 현재의 상황들을 자세하게 설명하였다.
한페이지 밖에 없지만 서비스방향, 사용자들의 욕구, 그리고 개발자 배려가 모두 녹아 있는 Daum Top, 설명을 듣고 나니 더욱 매력적으로 다가왔다.
특히, SWET(Semantic web Editor TFT)라는 ui 개발툴이 신기했고 한번 경험해보고 싶은 깊은 충동을 느꼈다.
  

미니다음 개편 사례 : 20픽셀의 미학, 그 현재와 미래

추홍엽 님 (UI Tech-Fronlier 개발)

* 미니다음이란?
GNB, 상단의 서브메뉴이다. 어쩌면 20픽셀의 작은 공간일 수 있지만 만약 로그인 버튼과 로그아웃버튼이 포함된 미니다음이 없다면 어떻게 될까? 로그인, 로그아웃 그리고 다른 서비스로 이동하기 위해 다음 메인페이지로 이동할 것인가?

* 개발 이슈
- 최상단에 위치한 미니다음이 로딩이 안될경우 다른 페이지에 영향을 끼칠수 있기 때문에 미니다음은 페이지 하단에 임시영역을 만들어 로딩한 후 상단으로 뿌려줌.
- 자바스크립트 속도 개선
  : 자바스크립트의 문자열 결합(+) 대신 array에 해당 string을 push 하여 추후 조인 방식을 씀
    array.push()가 ie5.0에선 작동하지 않아서 s[s.length] = "넣을 데이타" 로 코딩
- DocType 차이로 인한 어려움
 : 여러페이지에 들어가는 미니다음이라 문제 발생
  select 박스 위로 레이어가 뜰 경우 z-index가 적용되지 않아서 레이어 위로 select 박스가 보임(IE6)
  해결방안->더보기 영역에 동일한 사이즈의 iframe을 깔아 해결

추홍엽님의 세션은 어쩌면 너무나 작은 공간인 20픽셀의 미니다음에 대한 이야기었다.
발표하시면 긴장한 모습이 많이 보였지만, PT내용을 통해 그 작은 공간을 위해 얼마나 많은지 쏟았는지 느껴졌다.(개발자적인 관점에서 ^^)

그후 휴식시간..난 session2를 듣기위해 중회의실로 이동했다.
복도에는 닌텐도위의 신호를 제어(?)하여 드럼과 기타등의 악기 소리를 낼 수 있도록 한 프로그램이 전시되어 있었다. 데모 보여주신다며 눈을 지그시 감으시고 연주하던 어떤 님의 심취한 표정이 아직도 생각난다..ㅋㅋ

AJAX 채팅 애플리케이션 구현

최종배 님 (웹 애플리케이션개발)

* 웹 채팅이란? - 온라인에서 실시간 커뮤니케이션을 하는 것으로 별도의 설치 없이도 채팅이 가능함
- HTTP는 비연결 지향이기 때문에 클라이언트의 요청없이는 서버가 응답하지 않음
  해결방안으로 ActiveX를 사용하긴 하지만 설치가 필요함
- Ajax의 등장으로 좀 더 쉽게 채팅 애플리케이션의 구현할 수 있음

* 웹 채팅 방식
- 클라이언트 polling 방식 / 통신규약 JSON / 서버 WEB + DB

1) Client Polling 방식
- 장점 : 구현이 간단
중간에 끊어져도 새롭게 요청함
- 단점 : Polling 간격이 짧으면 짧을 수록 트래픽 부하 현상 발생
매번 새로운 연결을 맺기때문에 리소스 손실이 있음

2) Server Push 방식
서버에서 무한 루프를 돌림
- 장점: 매번 연결을 맺지 않기에 리소스가 적게 듬
- 단점 : 연결유지 구현 복잡 / 문제 있는 프로세스를 별도로 종료하기 힘듦

3) Client Polling + Server Push 방식
위의 두가지 방식을 혼합하여 서버에서 새로운 전달 내용이 있을 경우 클라이언트한테 Push하고 서버에 재연결을 함

* AJAX 채팅의 문제점
도메인이 같지 않으면 통신이 되지 않기때문에 플래시로 구현할 경우 해결 가능

사실 최종배님의 세션은 처음부터 기대를 많이 하고 간 세션이었고 만족도도 높은 강의였다.
지금 하고 있는 일이 웹 채팅이고 Client Polling 방식을 사용하고 있는데, 위에서 언급한대로 부하문제가 있어서 어떻게 개선할지 생각 중이었기 때문이다. 최종배님의 말씀처럼 Polling + Push 방식을 고려해봐야겠다는 생각이 들었다.
특히 데모와 경험을 토대로 이루어진 발표였기 때문에 새롭게 웹 채팅 프로그램을 구현 하려는 사람들에게는 많은 도움이 되었을 것 같다.

써드파트 웹 애플리케이션 구현

유시형 님 (UI 개발팀)

FF Ext. Opera Widget 구현 방법 제시

사실 유시형님의 개발이야기는 주로 코드위주로 발표를 해주셔서 특별히 필기를 하지 못하였다. 게다가 나 스스로도 위젯을 만들어야 겠다는 생각을 현재 하고 있지 않기때문에 살짝 주위산만해지기도 했다.
하지만 웹 개발하듯이 간단하게 FF와 Opera 위젯을 만들수 있다는 가능성(?)을 발견할 수 있었다.
파폭에서도 여러가지 함수를 제공해주어서 몇가지 함수만으로도 원하는 위젯을 만들 수 있다는 점, 그리고 Opera 위젯 등록 시 닫기 버튼이 있어야만 등록된다는 유용한 TIP도 들을 수 있었다.


마지막 세션은 Front-End 성능향상 TIP 이었다. (사진 찍지 못한게 아쉽)

Front-End 성능향상 Tip

유승근 님 (UI 개발자 / 동영상 개발팀)

* HTTP Request
HTTP Request를 줄이면 줄일 수록 성능이 향상됨  : 여러개의 파일을 하나로 통합
* Image 처리방법
- Image Map 사용
- Css Sprite -> 하나로 만들어진 이미지를 클라이언트에 내려보내고 클라이언트에서 잘라서 씀
* javascript css combine
CSS -> @media rule 을 사용하면 <link> 태그 2개를 하나로 가능함

유승근님의 세션은 실제 데모를 보여주시며 "이런 현상이 있었는데 이렇게 해결했다." 라는 이야기를 해주셨다.여러가지 뼈와 살이 되는 이야기를 하셨지만 수첩에 급하게 적다보니 알아보기가 힘들어서 아쉬웠다.

모든 세션이 끝나고 경품추천이 있었다. 스크린에 랜덤수를 돌려가며 경품추첨을 하는데 나도 모르게 패턴 분석을 하고 있었다는..ㅋㅋ 좌우당간 난 경품은 하나도 되지 않았지만 devday 자체가 나에게는 나름 경품이 었단 것 같다.(아부성발언..ㅋㅋ)

Daum UI Devday 2008, 세상과 소통한다는 의미에서 좋은 자리가 되었고 앞으로도 2009, 2010 계속 참여하고 싶은 행사였다. 또한 ui 뿐만이 아니라 웹에 관한 좀 더 넓은 소통의 자리도 살짝 기대해본다.