HCI/RIA 를 통한 미래가치 창출 부제 : 한메일 Express 를 통해 본 사용자 중심 개발 방법론 적용 사례

1. HCI/RIA를 통한 미래가치 창출부제 :한메일Express를 통해 본 사용자 중심 개발 방법론 적용 사례 전정환 anaxa@hanmail.net (주)다음커뮤니케이션 CTO본부 UI Engineering팀

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

3. HCI의 개념 • “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

5. 컴퓨터 역사 속의 HCI • Monitor • Keyboard • Mouse • GUI • Desktop Metaphor • Personal Computer • Virtual Reality • Tangible Media • Augmented Reality

6. Web에서의 HCI 적용 • 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

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

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

9. 기존의 waterfall 개발 방법론

10. HCI 기반의 사용자 중심 개발 방법론

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

12. 한메일Express를 통해 본사용자 중심의 RIA 개발 • 한메일 Express란? • Ajax 기반의 Rich Internet Application • “빠르고, 편리하고, 심플한 메일” • 한메일 Express 일정 • 2006.11 Paper Prototyping • 2007.6Closed Beta 시작 • 2008.1 현재 27만명 Closed Beta • 2008.2Open Beta 예정

13. 한메일Express오픈베타 동영상 * 2008년 2월중, 오픈 베타 예정입니다.

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

15. 한메일Express의 사용자 피드백

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

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

18. 사용자 피드백 통한 개선 예 • 시도되었던 메일 첫화면 (roll-back) • 피드백에 의해 재설계된 현재 버전

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

20. RIA를 만들때 명심해야 할 것 * customers do not buy drills, they buy ...

21. 감사합니다 (주)다음커뮤니케이션 CTO본부,UI Engineering팀 전 정 환 anaxa@hanmail.net