1. 웹 월드 컨퍼런스 2008 DAY2 : 디자인 파트 IT 팀 / 김진선 W E B W O R L D C O N F E R E N C E 2 0 0 8

2. 개요 1. 국내외 웹디자인 최신 트렌드 및 2009 년 웹디자인 핵심 키워드 2. 국내 베스트 ‘ UI 디자인’ 사례 3. 국내외 베스트 ‘인터렉션 디자인’ 사례 4. 국내외 베스트 ‘크리에이티브 전략’ 사례 5. 국내외 베스트 ‘전략적 , 설득적 웹디자인’ 사례 6. 국내외 베스트 ‘위젯 디자인’ 사례 7. 국내외 베스트 ‘소셜 네트워크 서비스 디자인’ 사례 8. 국내외 베스트 ‘웹표준 & CSS 활용’ 사례 9. 국내외 베스트 ‘웹그리드 & 타이포’ 사례

3. 1. 국내외 웹디자인 최신 트렌드 및 2009 년 웹디자인 핵심 키워드 1. 영역의 확장 , 영역의 파괴 - 디지털과 아날로그의 연결 : HYPER BLENDING - 이중논리 : 서로 상반되는 성질의 것들 ex) Digital/Analog, Text/Image, Fantasy/Reality

4. 1. 국내외 웹디자인 최신 트렌드 및 2009 년 웹디자인 핵심 키워드 2. 인터렉션디자인 . 감성 디자인 - 정보가 이야기를 하는 Info-Telling information( 정보 ) ▶ experience( 경험 ) ▶ Storytelling( 이야기 ) - 소통의 본질 삶 지혜 숙지 정보 자료

5. 2. 국내외 베스트 ‘ UI 디자인’ 사례 1. Interface - UI : 사용자 소통의 시각화된 접점 User / System ← Data (Information) -> User 정보의 재활용 ex) 지도 서비스 -> 맛집 또는 주변소개 양방향 소통 ex) 영화 : 사용자 리뷰 & 평점 적극적 아이덴티티의 표현

6. 2. 국내외 베스트 ‘ UI 디자인’ 사례 2. To Platform - 매시업 되고 , 플랫폼 화 되어간다 매시업 : 웹으로 제공하고 있는 정보와 서비스를 융합 하여 새로운 소프트웨어나 서비스 , 데이터베이스 등을 만드는 것을 말한다 .

7. 3. 국내외 베스트 ‘인터렉션 디자인’ 사례 1. 사용자가 이해해주기를 원하는가 ? - RIA : 풍부한 정보 - UX : 서비스를 통해 느낄 수 있는 모든 것 - Interaction Design : 매뉴얼 없이 사용할 수 있는 서비스 디자인 처음 접하는 물건도 바로 사용할 수 있을 만큼 쉬운 인터페이스

8. 3. 국내외 베스트 ‘인터렉션 디자인’ 사례 1. Interaction Design Tool - Adobe Flex - Microsoft Silverlight - JavaFX Script 모든 주요 브라우저 , 데스크톱 및 운영 체제에 일관되게 배포할 수 있는 표현력이 풍부하고 인터랙티브한 웹 애플리케이션을 구축할 수 있는 기술

9. 4. 국내외 베스트 ‘크리에이티브 전략’ 사례 1. Fine Art & Design 의 차이 - Fine Art 는 10 명중 1 명만 만족해도 인정받지만 , Design 은 적어도 10 명 중 6 명은 만족해야 한다 . 2. Definition of Design - 디자인 크리에이티브 ↔ 클라이언트 설득 . ( 객관적 근거를 기반 )

10. 4. 국내외 베스트 ‘크리에이티브 전략’ 사례 3. 웹 디자이너 = 슈퍼맨 or 원더우면 = YES! - 모든 상황에 대해 판단과 분석 - 사회 , 경제 , 문화 , 과학 등 모든 정보에 민감하게 반응하며 지속적인 학습과 경험을 축적 4. 눈으로만 사는 디자이너 - 읽고 , 보고 , 느끼고 , 경험하되 그것을 분석하고 대안을 찾아 자기주장을 만들어야 한다 .

11. 5. 국내외 베스트 ‘전략적 , 설득적 웹디자인’ 사례 1. Remarkable Design - 이례적으로 놀랍게 할 수 있는 디자인 2. 낯설게 하기 - 슈클로프스키 의 주장 “그들은 친숙한 사물엔 주목하지 않는다” - 일상화되어 친숙하거나 참신하지 않은 사물이나 관념을 특수화하고 낯설게 하여 새로운 느낌을 갖도록 표현 하는 것

12. 6. 국내외 베스트 ‘위젯 디자인’ 사례 1. Widget Design - Gadget / Banner 2.0 / Blog Parts

13. 6. 국내외 베스트 ‘위젯 디자인’ 사례 2. Ajax 위젯 디자인 원칙 / dojo - Cross browser support ( 크로스 브라우저 지원 ) - Graceful degradation ( 우아한 성능 저하 ) : 실시간 스트리밍을 위한 대역폭 적응을 위해 - Accessibility ( 접근성 ) - Internationalization ( 국제화 ) - Expandability ( 확장성 )

14. 7. 국내외 베스트 ‘소셜 네트워크 서비스 디자인’ 사례 1. 소셜 네트워크 사이트의 요소들 - 제공자와 참여자에게 필요한 것은 네트워크 와 협업 으로 단순한 정보제공만 이루어지면 SN 이 아니다 . - 일정 수준 이상의 참여자가 있어야 한다 . 비활동 사용자 (50%) 〉구경꾼 〉 참여자 〉 창조자 (10%) - Profile 과 Friend List : 네트워크와 협업 수준을 알려주는 바로미터 이다 .

15. 7. 국내외 베스트 ‘소셜 네트워크 서비스 디자인’ 사례 2. 소셜 네트워크 사례 - me2Day - 싸이월드 미니홈피 - flickr - thisnext.com

16. 8. 국내외 베스트 ‘웹표준 & CSS 활용’ 사례 1. 웹 표준이란 ? - 월드 와이드 웹의 측면을 서술하고 정의하는 공식 표준 및 기술 규격 - 웹 접근성 법제화 – 장애인 차별 금지법 시행 (2015 년까지 확대시행 ) -> 국가인권위원회의 시정명령 불이행시 3 천만원 이하의 과태료 , 악의적 차별로 판단될 시에는 3 년 이하의 징역이나 3 천만원 이하의 벌금

17. 8. 국내외 베스트 ‘웹표준 & CSS 활용’ 사례 2. 마인드 전환이 필요 - 웹 표준 준수는 웹 기술 발전을 위한 초석 - 기존의 습관을 버리고 새로운 방식 습득 - 신기술에 대비하기 위한 전문 조직화 - 웹 표준은 기획 / 디자인 / 개발 하는 웹 제작자 모두의 몫

18. 9. 국내외 베스트 ‘웹그리드 & 타이포’ 사례 1. 웹 타이포그래피 - 타이포가 작을수록 굵게 , 클수록 가늘게 … - 문장이 길수록 넓게 , 짧을수록 좁게 … - 체계적으로 기능을 강조 하고 , 기능적 정보 를 시각화 한다 .

19. 9. 국내외 베스트 ‘웹그리드 & 타이포’ 사례 2. 웹 그리드 - “ 형태는 기능과 목적을 따른다 .” - 마구잡이로 배열한 것 같지만 일정한 규칙에 따라 배열하는 방식 - 3 차원 공간감 을 부여하여 색다른 효과 구현 가능

20. 질문 1. 국내외 웹디자인 최신 트렌드 및 2009 년 웹디자인 핵심 키워드 2. 국내 베스트 ‘ UI 디자인’ 사례 3. 국내외 베스트 ‘인터렉션 디자인’ 사례 4. 국내외 베스트 ‘크리에이티브 전략’ 사례 5. 국내외 베스트 ‘전략적 , 설득적 웹디자인’ 사례 6. 국내외 베스트 ‘위젯 디자인’ 사례 7. 국내외 베스트 ‘소셜 네트워크 서비스 디자인’ 사례 8. 국내외 베스트 ‘웹표준 & CSS 활용’ 사례 9. 국내외 베스트 ‘웹그리드 & 타이포’ 사례