Webbasic 7 인터페이스와 화면설계 20081216

7. 인터페이스설계와 화면설계 2008.12.16

인터페이스 설계 특정 작업을 수행하기 위한 사용자-시스템 간 인터페이스 설계란 의사소통 방식을 설계하는 것 1. 웹사이트 접근 경로 설계/도메인 등 범위 2. 마케팅 요소와 사용자간의 접점 조절 3. 네비게이션 설계 4. 온라인상의 고객 응대 설계 5. 고객 행동 패턴에 따른 인터페이스 요소 설계 Digital Insight Korea 2

프로토타이핑 설계한 인터페이스의 제일 좋은 검증 방법은 프로토타이핑이다. 사이트의 원형 모델 Prototyping 개발과정에서의 큰 폭의 수정 변경을 막기 위해 실제 개발 이전에 기본 사용성을 검증해 볼 수 있도록 만드는 것 그 타당성의 검증이나 성능 평가를 위해 미리 시험 삼아 만드는 모형제작방법 전자제품 Concept Mock-up CAR Prototyping! Pilot service Digital Insight Korea 3

프로토타이핑 Prototyping은 왜 필요한가? 정확한 개발이 가능 1 고객이나 사용자의 요구사항을 정확하게 반영 2 요구사항을 검증 3 Usability , Functionality, data flow의 검증 프로젝트의 성격과 예산에 맞게 방법을 선택하여 수행한다. Digital Insight Korea 4

프로토타이핑 Prototyping이 유용한 case 1. 사이트 내에 포함되어야 하는 애플리케이션 개발 시 예) 웹하드, 파일박스, 이체 및 기타 은행 시스템, 채팅, 아프리카 등, 모바일 연계 2. 독특한 사용자 인터페이스를 가지는 경우 예) RIA, 3D 가상 박물관 3. 복잡한 처리과정을 수행하는 back office system을 가지는 경우 예) B2B 마켓플레이스, 다중 회원 체계 및 결재 시스템 프로토타이핑 도입 조건 ㅣ 프로토타이핑이 성공하려면… 프로토타이핑 기간과 수정 적용 기간을 정식 일정으로 책정해야 한다. 프로토타이핑 단계의 내용물을 산출물로 등록한다. Digital Insight Korea 5

Function/Program 기획 기능 선정 ㅣ 1 사이트에 지원되어야 할 프로그램 요소 선정 프로그램 요소의 예 •회원가입, 정보수정, 탈퇴, 로그인/아웃, 회원검색등 •커뮤니티 게시판, 토론방, 자료실, 회원관리, 운영자등록, 운영자 관리 모드 등 •쇼핑몰 결재, 상품 등록, 장바구니, 마일리지, 입점 관리, 배송처리 관리 등 •온라인 문의, 포인트 관리, 위젯, 채팅툴등의 애플리케이션 연결 서비스 등 정책 결정 ㅣ 2 프로그램에 영향을 끼치는 정책적인 문제에 대한 조사 및 확정 정책 결정 필요의 예 •회원가입 정보 필드의 범위 : 주민번호 입력여부, 개인정보보호 정책 필요여부, 회원탈퇴 등 •온라인 쇼핑 관련 : PG사 결정, 온라인 결제 상품 상한가, 통신사업자 신청 등 프로그램 로직 설계 ㅣ 3 프로그램의 처리방식과 순서를 flow chart로 표현한다. •시스템 플로우 차트 : 자료 흐름을 중심으로 시스템 전체의 작업내용을 총괄적으로 표시 •프로그램 플로우 차트 : 해당 시스템중 프로그램부분이 하는 처리 내역을 표시 Digital Insight Korea 6

Service flow 설계 웹사이트 전체를 하나의 흐름도로 보여주는 것 ‘서비스 흐름도’ 란 방문자가 웹사이트에 접속하여 사용자가 task를 수행하기 위한 과정을 하나의 흐름으로 만들어 한눈에 알 수 있도록 도식화하여 나타내는 것 Task 수행이 적절하게 잘 설계되었는지 확인이 가능하다. 프로젝트팀과의 개발을 위한 원활한 협의가 용이하다. 순서도의 주요 표시항목의 의미 데이터 처리 판단 디스크 *개발에 참여하는 제작진은 flowchart를 이해하고, 작성하는 법을 알고 작성자는 표준에 따라 작성하여 누 구라도 이해할 수 있다면 원활한 작업이 가능해진다. Digital Insight Korea 7

Event flow 예시1 Flow chart를 보고 이벤트 진행 형태를 배너. E-DM, 검색 이벤트 페이지 main 파악해 보자. No 로그인 or Log-in 회원가입 Yes Quiz 정답여부 정답 오답 Hit 정답 오답 참여감사 html (이벤트 내 페이지 전환) No 이미 참여했다는 Yes 참여 여부 Alert창 확인 회원정보수정 지점 검색하기 확인 회원정보수정 지점 검색하기 (중복 참여 불가) 회원정보 수정 링크 지점 검색 링크 Digital Insight Korea 8

Service flow 예시2 Digital Insight Korea 9

Service flow 예시3 Digital Insight Korea 10

Flowchart로 보는 flow 변경 예시 이벤트 페이지 main 6개중 선택 이벤트 페이지 main 6개중 선택 No Log-in 로그인 or 회원가입 1 2 3 4 5 6 Yes 스토리 선택하여 확인 스토리 마지막 선택 선택 스토리 마지막 컷 선택 선택 Log-in 로그인 or 회원가입 No Yes No Yes 참여 여부 No Yes 참여 여부 참여 불가 Alert창 참여 불가 Alert창 (중복 참여 불가) 참여감사 html (중복 참여 불가) 참여감사 html (이벤트 내 페이지 전환) (이벤트 내 페이지 전환) 이벤트 메인으로 가기 회원정보수정 이벤트 메인으로 가기 회원정보수정 NEXT 확인 회원정보수정 NEXT 확인 회원정보수정 회원정보 수정 회원정보 수정 Digital Insight Korea 11

Flowchart실습 * 이벤트메인화면을 캡춰하여 자신의 블로그에 스크렙한 후 포스팅 주소를 이벤트 화면에 등록하면 추첨하여 경품 제공(회원 이벤트) Digital Insight Korea 12

화면설계 Digital Insight Korea 13

화면설계서 화면설계서란 웹사이트 개발의 구체적이고 상세한 작업지침서이다. *일반적으로 스토리보드(storyboard)라고도 불린다. 웹사이트의 모든 페이지들에 대한 구성요소를 설계하여 담아놓은 화면 설계도이다. 프로젝트 기획서 요건 정의서 컨텐츠 구조도/사이트 맵 등 디자인 개발 기획서 스타일 가이드 컬러 시스템 레이아웃 시스템(그리드시스템) 타이포 시스템 제작 기획서(화면설계서) 화면 코드 컨텐츠 가이드 등 제작 start 제작 start Digital Insight Korea 14

왜 필요한가 정확한 전달이 필요하기 때문이다. 1. 프로젝트 팀에게 수행해야 할 일에 대한 고객에게 앞으로 진행할 내용에 대해 알리고 협의 할 수 있다. 컨텐츠나 서비스를 위한 타부서 협의가 가능하도록 틀을 제공한다. 디자인팀에게 디자인해야 할 페이지의 내용과 구성을 전달 한다. 개발 및 프로그램팀에게 구현되어야 할 기능과 구축해야 할 내용을 전달한다. 사전에 오류 수정이 가능하다. 2. 초기 정의한 프로세스의 오류나 현재의 진단으로 본 개발 단계에서의 수정은 많은 시간과 비용을 발생시킨다. 화면설계서를 통해 오류나 미흡한 요소를 사전에 점검할 수 있다. (컨텐츠 수집 미비, 커뮤니케이션 오류로 인한 수정사항 등) Digital Insight Korea 15

화면설계서 구성요소 Flowchart : service flow와 logic을 이해할 수 있도록 기술 1 페이지 주제 : 해당화면의 내용, 용도 명기 2 페이지 ID : 이 화면의 코드명. 플로어차트상의 프레임 scene 번호 3 Page : 화면설계서 page 번호 4 화면구성 : 화면의 내용과 구성 요소들을 이해하기 쉽도록 표현 5 •네이게이션의 구성과 아이콘 텍스트 등의 화면 구성요소의 시각적 우선순위와 중요도를 묘사한다. •가능한 정확하고 묘사하는 것이 중요하다. 화면설명 : 디자인이나 개발자들이 작업시에 참고해야 할 내용 서술 6 텍스트로 구현될 컨텐츠 : 화면에 표현되어야 할 컨텐츠 중 텍스트 요소를 담아둔다. 7 (만일 내용이 길 경우 별도의 문서에 담고 해당 문서의 파일명을 표기해 둔다.) 기타 : 수정 변경 내역, 화면설계서 버전 정보 등 8 Digital Insight Korea 16

화면설계 방법 1 목적에 맞게 중요도별 비중 배치 • 중요하게 부각시켜야 될 요소들을 중요도별로 크기나 시각적 볼륨감을 높게 처리한다. • 사이트나 페이지의 성격에 따라 중요하게 부각되어야 할 요소가 다를 수 있다. 배치될 컨텐츠의 명확한 그룹핑 2 • 개별 컨텐츠간의 관계를 고려하여 유사한 것끼리, 상식적으로 그룹핑 한다. 시각적 디자인요소로 표현할 요소 명기 3 • 컨텐츠 부분중 시각적요소(다이어그램/플래시/이미지 등) 로 표현할 것과 텍스트로 처리할 것을 분명히 표기한다. • 텍스트중에서도 더 강조하여 나타낼 것들에 대해 별도 표기한다. 일관성을 유지하자 4 • 일관성을 유지해야 할 요소들(페이지 타이틀, 블릿, linmap 등)은 기획서 상에 정확하고 일관되게 표기한다. Digital Insight Korea 17

화면설계시 사전 고려 요소 브라우저 : 서비스할 브라우저의 기준[브라우저 종류와 버전] 1 (서비스지역/타깃 고려) 2 해상도 : 점유도가 높은 사이트 해상도 통계 자료를 기준으로 선정(서비스 시점/지역/타깃 고려) 3 네트워크 환경 : 사용자의 네트워크 속도, 보안 등의 요소(지역/타깃 고려) Digital Insight Korea 18

UCC_main_001.htm 영화 예매권 받기 Project 씨즐 사이트 개편 상영정보 DVD TV영화 VOD 스타 C-Zine UCC영화 화면명 UCC영화 > Sub Main My 씨즐 홈 UCC게시판 명예의 전당 웹툰 UCC UCC 활용가이드 Location Reviewer 지수 : 123(매니아) 관심 스타 소식 #건 ▶ 심형래 화려한 휴가 두사람이다 영화에 대한 모든 것 search 통합 ▼ Description (화면설명) 예매 현황 #건 * UCC NEON SIGN – 8월 30일 현재 가장 많은 추천을 받은 동영상입니다. 1 현재 가장 많은 추천을 받은 동영상을 4 금주 추천 영화 보기 1 명예의 전당 보여줍니다. More> 1위 2위 영화 예매하기 9월 씨즐 감독 이영주 등극! 2 이주의 웹툰 주제와 주제와 최신 웹툰 3개를 보여줍니다. VS 작성자 : kayagum79 작성자 : kayagum79 이영주감독의 희 작성일 : 2007.08.31 작성일 : 2007.08.31 3 영화 UCC와 웹툰 UCC, 펌 UCC를 선 귀하고 다양한 레 추천수 : 30 추천수 : 15 택해서 볼 수 있습니다. 고 인형의 세계로 GO GO! 전체는 게시물이 올라온 순서대로 모두 보여줍니다. 더보기 [펌] 이동국 감격의 첫골 장면 [영화] 쇼바이벌 -스윗소로우 4 이달에 명예의 감독을 보여줍니다. 2 5 처음 명예 감독이 없을때는 명예의 전 웹툰 UCC! 참여기간 : 2007.8.1 ~ 2007.8.7 ㅣ 웹툰명: 싸이코메들리 ㅣ 작가 : 박병희 Best UCC 당의 주인공이 되어보세요. 안내 문구가 나갑니다. 제비다리를 고쳐준 착한 흥부, 이동국 감격의 첫골 장면 제목 : 제비한테 사기당한 흥부 은혜를 갚으러온 제비.. 작성자 : @date77 ㅣ 추천 : 7 ㅣ 작성일 : 2007.8.5 Kayagum79님 영화관 탐방기 5 가장 조회수가 많은 Best 10을 보여줍 그들은 무슨일이 있었을까? 니다. 클릭 서치 ? 제목 : 제비한테 사기당한 흥부 2. 삐에로 채연, 완전 코믹 셀카 6 각 게시물은 게시물 상세페이지로, 작성자 : @date77 ㅣ 추천 : 7 ㅣ 작성일 : 2007.8.5 영화제목 영화人 영화사전 3. 커프 막방 촬영장에 가다 More는 활용가이드 메인 페이지로 이 4. 프리즌브레이크 4차원패러디 동합니다. 제목 : 제비한테 사기당한 흥부 5. 이천수 선수의 EPL 포기? 작성자 : @date77 ㅣ 추천 : 7 ㅣ 작성일 : 2007.8.5 7 6. 이게 얼짱의 헤어스타일!! 7. 남자는 첫사랑을 못잊나요? 더보기 8 8. H마트 참치캔에 바퀴벌레가 * UCC 게시판 9. 레고카페 스타-채용호님 9 10. 김치치즈스마일 하이킥 할까? 3 웹툰 UCC 펌 UCC 영화UCC 전체 10 6 오늘 씨즐에서 본 영화 UCC 활용 가이드 More> 11 제목 : [펌] 엄태웅 딱걸렸어! 엄태웅 데이트 장면 목격 작성자 : @date77 l 작성일 : 2007.8.31 ㅣ 추천수: 23 • UCC 주소 쉽게 복사하는법 • 내가 쓴 글 UCC세상에 추천하세요 • UCC세상 본인확인 안내 드립니다 제목 : [웹툰] 엄태웅 딱걸렸어! 엄태웅 데이트 장면 목격 • UCC 스타로 초대합니다 • 툴바에서 UCC 세상 컨텐츠 즐기는법 작성자 : @date77 l 작성일 : 2007.8.31 ㅣ 추천수: 23 • UCC 주소 쉽게 복사하는법 라따뚜이 기담 • 내가 쓴 글 UCC세상에 추천하세요 • UCC세상 본인확인 안내 드립니다 제목 : [영화] 엄태웅 딱걸렸어! 엄태웅 데이트 장면 목격 시사회/이벤트 • UCC 스타로 초대합니다 작성자 : @date77 l 작성일 : 2007.8.31 ㅣ 추천수: 23 • 툴바에서 UCC 세상 컨텐츠 즐기는법 라파예트, 눈빛만 으로 사랑에 빠지 이미지 다 제목 : [펌] 엄태웅 딱걸렸어! 엄태웅 데이트 장면 목격 최대 10개까지 보입니다. 작성자 : @date77 l 작성일 : 2007.8.31 ㅣ 추천수: 23 • 김조광수 대표의 올미다, 예매권 19 Digital Insight Korea 19 • 김조광수 대표의 올미다, 예매권

Project LS산전 홈페이지 리뉴얼 고객지원센터 교육지원센터 제품정보 회사소개 사이버홍보 채용안내 화면ID 제품 기본 정보 화면명 11 Close Location HOME>제품정보>RIA 1 저압기 전자식 모터보호계전기(EMPR) 기존URL http://kr.lsis.biz/product/pr 지락보호용 EMPR (GMP60-3TZ/TZR/TN/TNR) 2 oduct/introduce/detail_faq_l 채용안내 ist.asp 지락보호용 EMPR (GMP60-3TZ/TZR/TN/TNR) ▼ 전자식 모터보호계전기(EMPR) ▼ Category 바로가기 DB/HTML RIA 화면수 1/3 12 Description (화면설명) 4 5 6 3 고객문의 정격보기 Download F.A.Q * RIA 1 대분류명 + 소분류명 카탈로그 * 대분류명이 구분되게 표현해 준다. 주요 기능 사용설명서 지락 검출 기능 - 영상전류 검출형 (0.1~2.5A)- 잔류전류 검출형 (0.5~6A) 2 제품명 최종 고장원인 저장 기능 기술자료 3 제품설명 4~12line 정도 슬라이드 스위치 설정으로 정격전류범위 조절 가능- 1개 모델로 0.5~60A까지 사용 가 인증서 4 F.A.Q 로 이동 버튼 능 관통형/단자접속형 타입 납품실적 5 고객문의로 이동 버튼 조작 전원: AC100~240V Free Voltage 구현 관심제품 담기 소프트웨어 + ZOOM 6 정격보기로 이동하는 버튼 CAD자료 7 새창으로 보여주는 이미지 크게보기 400 x 300 (pixel) A/S,기술문의 1544-2080 - (2/3 화면 참조) 8 관심제품 담기 버튼 – 새창을 통해 7 8 9 진행된다. - (3/3 화면 참조) 9 RSS주소 복사 버튼 – 클릭시 해당 10 주소가 복사되었음을 알림. “RSS 주소가 복사되었습니다. RSS Reader 프로그램에 등록하십시요.” 다운로드 영역은 이 상세정보창이 펼쳐진 이후 DB에 접속하여 안보이는 영역으로 모든 목록 컨텐츠가 로드되어 클릭시 바로 표기되어야 한다. (실행 퍼포먼스 중요) 10 리아를 모두 종료하는 버튼으로 데이 터창 아래 카테고리 창도 사라지는 F.A.Q, 고객문의 버튼은 명칭 고정 버튼, 정격보기 버튼은 DB에서 명칭을 받아서 표기되는 버튼으로 것으로 리아를 모두 닫는다. 시스템 폰트를 사용해 버튼으로 구성하며, 명칭은 최대 6자(공백포함) 길이를 갖는다. 정격보기와 같은 종류의 버튼은 정격보기를 포함해 최대 4개 이며, DB에 내용이 없거나 display 값이 false(0) 버튼은 11 데이터창만을 닫는다. 카테고리 창에 표기되지 않도록 설계되어야 한다. 서 제품을 선택할 수 있다. 제품 설명이 간략하게 4~12라인정도로 표현되는 영역 12 중분류/제품 카테고리를 리스트로 선택해 이동하게 한다. (넓이 고정) 이 창은 카테고리 선택창 위에 (카테고리 창을 가림)띄우는 창으로 실질적인 데이터 처리 페이지 이며, 기타 이 창을 닫는 경우에도 아래 있는 카테고리 창은 남아 사용자의 제품 재선택 프로세스를 진행해야 한다. 20 Page Digital Insight Korea 20

화면설계서 예시 로밍 앨범 로밍 A to Z 로밍 이야기 12 해당월의 월 사진 선정작 슬로건 당선작 display “로밍과 함께 떠나면 어디든지 갈 수 있다!” 일러스트 안에 구성 아~ 이런 모습 첨이야… 김현정 축하합니다! <Main Copy Sample> •로밍이와 든든한 여행을! 당선자들의 이름이 •나만의 로밍 이야기…오우~노! 너에겐 여행 상식! 순차적으로 올라감 •로밍아…통했느냐? •로밍이 통한다. 그리고 내 마음도 통한다. •내가 움직이는 로밍… 로밍이 움직이는 세계(우주) Updated News! more *[옹달샘] 로밍 덕분에 내 아이 를 찾았어요… ! *[옹달샘] 고마워요 로밍! 나 장 가가게 해줘서. *[찰칵] 나는 람보다! 두두두두 <로밍 생각> 네 생각을 말해줘! 12월의 주제 : 로밍 2행시 참여와 선물안내 •로:밍해서 클스마스에 여행가야지/밍:크코드 입고 추운데로 떠나야지 아싸! 오롤라왕녀 나도 나도 쓰기 뒷북쟁이 쓰기 •로:밍서비스 받고 즐겁게 여행떠나려 했는데 타이/ 밍:이 안맞아서 렌탈폰이… 홍보 공간 Digital Insight Korea 21

화면설계서 예시 로밍 A to Z 로밍 이야기 로밍 앨범 주요 기능 부분 로밍 이야기 주요 이벤트 외에도 추가적 로밍이야기 고객 여러분의 SK 텔레콤의 국제로밍서비스 이용 후기를 올리 인 이벤트 관리 시스템에서 만 시는 공간입니다. 여러분의 다양한 경험을 공유할 수 있도록 들어서 사용할 수 있다. 글쓰기 글쓰기 12월 올려주세요. 관리자의 관리력을 최대한 01월 10 뉴욕 뒷골목에서 떨었던 기억 이경민 2005.12.01 121 높일 수 있는 기능 제공 02월 9 뉴욕 뒷골목에서 떨었던 기억 이경민 2005.12.01 121 8 뉴욕 뒷골목에서 떨었던 기억 이경민 2005.12.01 121 구사일생 이야기 관리자의 별도의 닉네임을 7 뉴욕 뒷골목에서 떨었던 기억 이경민 2005.12.01 121 설정하여 관리자가 방문객과 니 생각을 말해줘 커뮤니케이션 할 수 있도록 지 6 뉴욕 뒷골목에서 떨었던 기억 이경민 2005.12.01 121 원 5 뉴욕 뒷골목에서 떨었던 기억 이경민 2005.12.01 121 관리자 관리 및 관리자 설정 4 뉴욕 뒷골목에서 떨었던 기억 이경민 2005.12.01 121 3 뉴욕 뒷골목에서 떨었던 기억 이경민 2005.12.01 121 2 뉴욕 뒷골목에서 떨었던 기억 이경민 2005.12.01 121 1 뉴욕 뒷골목에서 떨었던 기억 이경민 2005.12.01 121 ㅣ1ㅣ2ㅣ3ㅣ4ㅣ 글쓰기 글쓰기 Digital Insight Korea 22

화면설계서 예시 2 365 씨네 이벤트 1 SHOW BOX FJ! 2.12 2.13 Today - 2.14 2.15 Weekly Hot & Hot 대 event Ps.Day 초 사랑의 날! Sexy! 자키 정혜랍니다. 모두가 로맨틱해지는 응모 응모 화끈한 영화소식 전해드릴수 있도록 여 Ps.Day에 초대합니다. 다운로드 Free 컬러링 러분 저를 사랑해 주세요~.^^ 이름 : 강정혜 사랑을 더욱 달콤하게~ 조회 : 21,768 보내기 사랑의 마음을 담은 선물을 선택하세요. Free SMS 추천 : 520 Sexy! 자키 정혜랍니다. 화끈한 영화소식 전해드릴수 있도록 여 러분 저를 사랑해 주세요~.^^ 이름 : 정우성 Coming soon 4 조회 : 18,920 3 Play now 추천 : 422 내사랑 2007 크리스마스 세상 가득 찾았나요? 당신의 반쪽 Sexy! 자키 정혜랍니다. 감독 : 이한 화끈한 영화소식 전해드릴수 있도록 여 주연: 감우성, 최강희, 엄태웅, 정일수 러분 저를 사랑해 주세요~.^^ 예매하기 예매하기 이름 : 심영진 조회 : 10,400 추천 : 130 마지막선물 감독 : 김영준 세상 가장 소중한 사랑을 담은 생애 처음, 지키고 싶은 사람이 생겼습니다. 희망이 없던 그에게.. Wow! 2008년 summer SHOW BOX FJ 선발대회 예매하기 예매하기 주연: 신현준, 허준호, 조수민, 권오중 2008. Summer SHOWBOX 무비자키를 모집합 니다. P.S., I Love You 응모 모집일시 : 2008.04.02~06.22 응모 응모방법 : 자신만의 무비자키 동영상 응모 “절대 너를 떠나지 않을꺼야” 그러나… 당신이 다시 할 결과발표 : 2008.06.30 수 있기를… 감독 : 리차드 라그라브네스 예매하기 예매하기 주연: 힐러리 스웽크, 제라드 버틀러 Digital Insight Korea 23

웹사이트를 위한 글쓰기 Digital Insight Korea 24

web writing Web을 위한 ‘글쓰기’가 왜 필요할까? 다르기 때문이다. PRINT WEB 읽기 •편하다(해상도가 높다). •어렵다. • 전체 페이지를 한 눈에 보기 어려우며, 사용자의 화면 •페이지 전체를 볼 수 있다. 크기에 따라 달라진다. 사용성 •다음 페이지로 빨리 이동할 수 있다. • 다음 페이지로의 이동이 인쇄물보다 느리고 사용 환경에 •내용의 분량을 쉽게 파악할 수 있다. 따라 페이지 로딩 속도가 차이가 난다. 제약성 •시간과 장소의 제약을 덜 받는다. •모니터를 통해서만 읽기가 가능하다. •읽기 시작과 중단이 비교적 쉽다. •읽기의 시작과 중단이 자유롭지 못하다. 북마크 •나중에 다시 읽는 것이 편하다. •프린트나 북마킹을 하지 않으면 나중에 다시 읽기 어렵다. 피로도 •눈의 피로가 적고 읽는 자세가 자유롭다. •눈의 피로와 자세의 제한 때문에 장시간 읽기 어렵다. 노주환의 웹라이팅 핵심10가지 Digital Insight Korea 25

웹 글쓰기 핵심 1. 낮은 가독성을 고려하자. 인쇄물과 웹의 가독성 차이는 객관적으로는 큰 수치가 아니지만 실제 느끼는 차이는 매우 크다. 특히 읽는 시간이 늘어날 경우 웹에서의 읽기는 더욱 어려워지므로 다음과 같은 사항을 고려해야 한다. 짧고 간결해야 한다 •사용자의 읽기 습성을 고려한다. - 흝어읽기(scanning)과 건너뛰며읽기(skipping)를 이해한다. - 웹에서의 읽기는 많은 집중력을 필요로하기 때문에 긴 문장이 연속되면 쉽게 지칠 수 있다. •문장을 진행시키는 명사,동사 위주로 문장을 구성한 후, 필요한 수식어를 첨가시키는 것이 바람직하다. 단락(Paragraph)을 자주 이용한다 •정보과다(information overload)가 되지 않게 정보의 양을 잘게 나누어 제공하는 것이 중요하다. •인쇄물과는 달리 웹에서는 내용이 약간만 달라지더라도 단락 구분을 시도해야 한다. 웹은 가독성이 떨어지므 로 인쇄물보다는 2~3배 이상 단락을 자주 이용하는 것이 좋다. Digital Insight Korea 26

웹 글쓰기 핵심 2. 요점을 문장 앞에 둔다. • 앞에 둘수록 읽혀질 확률이 높다. • 헤드라인을 사용하여 요점을 부각시키는 것이 좋다. • 특히 요점을 스크롤해야 하거나 페이지를 넘겨야만 볼 수 있다면 앞 부분에 목차(TOC: Table of Contents)를 두어서 라도 요점을 알려야 한다. 3. 메인 타깃(Main Target)에 맞게 작성한다. • 만약 대상층에 따라 다른 스타일(또는 수준)의 문장을 제공해야 한다면 다른 버전의 페이지를 따로 만드는 것도 좋은 방법이다. 이러한 것은 사용자 편의를 위한 맞춤화의 한 방법으로도 볼 수 있다. 4. 포지티브(positive) 글쓰기를 지향한다. 카피를 작성할 때 우울한 것, 부정적인 것은 피하고 긍정적으로 밝게 접근해야 한다 한다. 포지티브(positive) 문장은 네거티브(negative) 문장보다 더 간결하고 명확하다. 그리고 더 호소력이 강하다. •포지티브 글쓰기: “글쓰기는 반드시 짧아야 한다” •네거티브 글쓰기: “글쓰기는 절대 길어서는 안된다” Digital Insight Korea 27

웹 글쓰기 핵심 5. 설득력 있게 작성한다. 논리적이어야 한다 : 설득하기 위해서는 무엇보다도 빈틈없는 논리가 뒷받침되어야 한다. 강한 어조와 강한 표현을 사용한다 : 강한 어조와 표현은 상대편의 주의를 집중시키고 호소력을 키운다. 반복을 이용한다 : 마케팅에서는 메시지를 장기기억(LTM:Long Term Memory)으로 보전하기 위해 무조건적 인 반복을 시도한다. 유머를 사용한다 : 정보에 대한 선호도를 높이고, 긍정적인 분위기를 조성하여 전달효과가 증대된다. 단, 적절 하지 않거나 지나친 유모, 맥락에서 벗어난 유모는 요점 전달을 방해할 수 있다. 명확해야 한다 : 웹에서의 글쓰기는 짧고 간결해야 한다. 구체적이고 직접적인 표현을 사용해야 한다. 숫자나 통계등 구체적인 내용을 사용한다. Digital Insight Korea 28

웹 글쓰기 핵심 6. 제목을 잘 활용하자. 사용자의 관심과 주의를 끈다. •사용자가 기대하는 단어를 제시하여 관심을 유도하거나 그래픽 텍스트를 사용하여 흥미를 갖게 해야 한다. 본문을 읽게 한다. •제목은 본문을 읽으면 일종의 혜택을 받을 수 있다는 확신을 주어야 한다. •간접적 직접적, 장식적 단순한 표현의 제목이 바람직하다. •부제목이나 내용을 요약한 요약문을 이용하는 것도 좋은 방법이다. 내용 파악을 돕는다. 7. 문법적 활용과 어휘 사용과 표현은 올바르게 한다. • 어휘의 사용과 표현이 올바르지 않다면 콘텐츠 자체는 물론이고 사이트마저도 신뢰하지 않을 것이다. • 일반적으로 통용되는 경우가 아닌 외래어의 사용은 확인을 거치도록 한다. • 로마자 표기법은 약속된 형식을 사용하도록 한다. Digital Insight Korea 29

웹 글쓰기 핵심 단락과 단락 사이는 충분히 여백을 두어 구성한다. 테이블이나 블릿을 사용한다. 헤드라인 제공으로 컨텐츠의 요점을 전달하고 읽기를 자극한다. 충분한 내용 전달이 필요할때는 full version 문서는 별도 [다운로드]와 [인쇄 기능]을 제공한다. 그래프와 도표를 적극 활용한다. 단락이나 내용이 그룹핑이 가능하면 그룹핑하여 제공한다. Digital Insight Korea 30

웹 글쓰기 예 도식화를 통한 빠른 전달 중간 분리 카피를 통한 구분 •텍스트 컬러로 구분 : http://www.mrpizza.co.kr/#/weare/info/concept/ •숫자로 구분 : http://www.paradisecasino.co.kr/Kor/gaming/table_03.asp •박스로 영역 구분 : http://www.bizdeli.com/index.asp •이미지로 구분 : http://www.lottetown.com/ •면분할 http://www.unil.co.kr/product/feature.asp 쎔네일 이미지를 통한 구분 Digital Insight Korea 31

http://i-ruru.com	118
http://ruru.tistory.com	12
http://www.slideshare.net	10
http://www.uxclub.co.kr	6

Webbasic 7 인터페이스와 화면설계 20081216

by Amy Park on Feb 25, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 146

Statistics

Webbasic 7 인터페이스와 화면설계 20081216 — Presentation Transcript