전정환 ( 주 ) 다음커뮤니케이션 CTO 본부 UI Engineering 팀

 HCI 에 대한 소개.  Web 에 있어서의 HCI 의 역할.  RIA 를 만드는데 있어 어려운 점과 HCI 의 역할.  한메일 Express 를 통해 본 HCI 기반의 사용자 중심 개발 방법론 적용 사례. 2

 “Human-Computer Interaction is a discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them.”, ACM SIGCHI 3

4

 Monitor  Keyboard  Mouse  GUI  Desktop Metaphor  Personal Computer  Virtual Reality  Tangible Media  Augmented Reality 5

 Web Usability ◦ Navigation, Labeling 등 설계 이슈.  Information Architect  FGI, Usability Test  Columns and Books ◦ Jakob Nielson’s Alertbox ◦ Information Architecture for the Word Wide Web ◦ Don’t Make Me Think : A Common Sense Approach to Web Usability 6

 Web 의 Rich Interaction 화.  iPhone 과 같이 혁신적 사용자 경험을 제공하는 디 바이스 출현.  Nintendo Wii 와 같은 새로운 input device 출현.  Microsoft Surface 와 같은 Tangible Media 출현.  Interaction 을 Design 하고 새로운 User Experience 를 창출하고자 하는 요구 증대.  “ 어떻게 하면 높은 사용성과 참신한 UX 를 만들 수 있는가 ?” 에 대한 관심 고조. 7

 파워포인트로 작성된 정적인 기획서.  기획단계와 개발 단계의 엄격한 분리.  프로젝트 팀간의 커뮤니케이션의 어려움.  사용자가 원하는 것이 정확히 무엇인지 초기에 모두 알 수 없음.  기존 서비스를 RIA 로 다시 만들고자 할 때 이유는 무엇인가 ? 그것이 주는 가치는 무엇인가 ? 그 가치 를 실현하기 위한 방법은 무엇인가 ?  HCI 기반의 사용자 중심 개발 방법론이 필요. 8

9

10

 User-Centered Design 과 Agile 개발의 상승 작용. ◦ 팀 내 활발한 의사소통, 피드백과 사용자의 협업을 통해 서비스의 Usability 와 User Experience 을 높인다. ◦ Iterative Development 와 “ 변화에 적응 ” 하는 측면은 사용자 중심 프로세스와 일치한다. ◦ 단순함은 UCD 와 Agile 개발이 공통으로 추구하는 가치.  “Agile Usage-Centered Software Lifecycle” (Gundelsweiler/Memmel/Reiter, in: Mensch&Computer 2004). Initial Requirements Usability Up-Front Initial Conceptual Phase Construction & Test Phase Deployment PhaseProduction Phase Fix major problems and defects Fix unforseen problems and defects, customer feedback, release planning, new features 11

 한메일 Express 란 ? ◦ Ajax 기반의 Rich Internet Application ◦ “ 빠르고, 편리하고, 심플한 메일 ”  한메일 Express 일정 ◦ Paper Prototyping ◦ Closed Beta 시작 ◦ 현재 27 만명 Closed Beta ◦ Open Beta 예정 12

* 2008 년 2 월 중, 오픈 베타 예정입니다. 13

 프로젝트팀 구성원의 활발한 커뮤니케이션. ◦ 의사소통, 단순성, 피드백, 용기, 존중 등 XP 적 가치 공유.  HCI 기반의 사용자 중심 개발 방법론. ◦ iteration 을 최대한 자주, 빠르게. ◦ 다양한 방법의 evaluation. ◦ deployment 단계와 production 단계의 분리. ◦ 평가 단계에서 불필요한 기능이라 합의되면 이미 설계, 개발이 진행된 사항도 과감하게 roll-back.  X-Internet 구현. ◦ 기존 한메일넷의 완벽한 Internal API 화. ◦ 새로운 사용자 경험을 주는 RIA 구현 기반. ◦ 한메일 Express 는 기존 한메일넷과 듀얼로 서비스. 14

15

 페이퍼 프로토타이핑. ◦ 실시. ◦ 프로젝트 검토 단계. ◦ 프로젝트 핵심 가치 확인 및 공유.  초기에 Lead User 를 사용자로 참여시킴. ◦ Lead User 의 피드백을 받으며 5 개월간 개발. ◦ 디자인 붙지 않은 상태에서 개발하여 기민성 높임.  수명의 사용자 대상 사용성 테스트. ◦ 1 차 (2007.1), 2 차 (2007.3) ◦ 초기 버전 대상으로 핵심 기능 사용성 테스트. ◦ Dynamic Scroll, Drag & Drop, 단축키, 탭, 상태 표시바 등의 사용성 이슈를 초기에 파악. 16

 Beta 사용자의 피드백 기반으로 반복적 개발. ◦ 핵심 타겟 사용자부터 점진적 사용자층 확대.  2 만명 (2007.7) -> 27 만명 (2008.1). ◦ 사용자 의견 쓰기 버튼을 잘 보이게 노출.  초기 한달간 1000 건 수신. ◦ 사용자 설문.  1 차 ( ), 2 차 ( )  1 주간 설문 참여자 15 만명 ◦ 블로그 트랙백.  한메일을 만드는 사람들 (daummail.tistory.com) 운영.  트랙백과 댓글의 의견을 서비스에 반영. 17

 시도되었던 메일 첫화면 (roll-back)  피드백에 의해 재설계된 현재 버전

 한메일 Express 를 통한 RIA 개발 교훈. ◦ HCI 기반의 사용자 중심 개발 방법론을 적용할 것. ◦ iterative 하게 개발할 것. ◦ 프로젝트 팀원간의 피드백, 협업 장려. ◦ 사용자로부터 다양한 피드백을 통한 평가. ◦ back-end 의 API 화. ◦ test, deployment, production 단계로 세분화. 19

* customers do not buy drills, they buy... 20

( 주 ) 다음커뮤니케이션 CTO 본부, UI Engineering 팀 전 정 환 21