모바일메뉴

EOND

검색
마이페이지
홈페이지제작솔루션 CMS WEB 툴팁 위키 지식인 CMS 포럼 경매모듈 질문•답변
HTML5/CSS3
글쓰기
-
가
+
[UI] 글읽기 화면의 인터페이스
이온디
2009.02.01 22:52
7585
0
https://eond.com/164665
object(HotopayModel)#1143 (23) { ["error"]=> int(0) ["message"]=> string(7) "success" ["variables"]=> array(0) { } ["httpStatusCode"]=> int(200) ["module"]=> string(7) "hotopay" ["module_info"]=> NULL ["origin_module_info"]=> NULL ["module_config"]=> NULL ["module_path"]=> string(52) "/home/eond/web/eond.com/public_html/modules/hotopay/" ["xml_info"]=> NULL ["module_srl"]=> NULL ["mid"]=> NULL ["act"]=> NULL ["template_path"]=> NULL ["template_file"]=> NULL ["layout_path"]=> NULL ["layout_file"]=> NULL ["edited_layout_file"]=> NULL ["stop_proc"]=> bool(false) ["user"]=> object(Rhymix\Framework\Helpers\SessionHelper)#1142 (20) { ["member_srl"]=> int(0) ["user_id"]=> NULL ["user_name"]=> NULL ["nick_name"]=> NULL ["email_address"]=> NULL ["phone_number"]=> NULL ["homepage"]=> NULL ["blog"]=> NULL ["birthday"]=> NULL ["denied"]=> NULL ["status"]=> NULL ["is_admin"]=> string(1) "N" ["is_site_admin"]=> NULL ["profile_image"]=> NULL ["image_name"]=> NULL ["image_mark"]=> NULL ["signature"]=> NULL ["description"]=> NULL ["group_list"]=> array(0) { } ["menu_list"]=> array(0) { } } ["request"]=> object(Rhymix\Framework\Request)#10 (13) { ["method"]=> string(3) "GET" ["compat_method"]=> string(3) "GET" ["url"]=> string(28) "coding/164665/comment/465443" ["hostname"]=> string(8) "eond.com" ["domain"]=> NULL ["protocol"]=> string(5) "https" ["callback_function"]=> string(0) "" ["_route_status":protected]=> int(200) ["_route_options":protected]=> object(stdClass)#11 (5) { ["cache_control"]=> bool(true) ["check_csrf"]=> bool(true) ["is_forwarded"]=> bool(false) ["is_indexable"]=> bool(true) ["enable_session"]=> bool(true) } ["module"]=> string(5) "board" ["mid"]=> string(6) "coding" ["act"]=> string(16) "dispBoardContent" ["args"]=> array(4) { ["document_srl"]=> string(6) "164665" ["comment_srl"]=> string(6) "465443" ["mid"]=> string(6) "coding" ["act"]=> string(16) "dispBoardContent" } } ["ajaxRequestMethod"]=> array(2) { [0]=> string(6) "XMLRPC" [1]=> string(4) "JSON" } ["gzhandler_enable"]=> bool(true) }

아래 스크린샷은 '구글 철학'에 대해서 검색해보다가 나온 블로그입니다. 대개의 블로그가 그렇듯 아주 구조적으로 정리가 잘 되어있어 보입니다.
요즘의 블로그툴은 웹표준에 맞추어 스킨을 제작하기 때문에 특이할만한 별다른 디자인적 요소는 없습니다. 다만 내가 펴내는 정보를 얼마나 남에게 잘 전달할 수 있는가 하는 컨텐츠 위주의 레이아웃 구성을 하기 때문에 첫눈에 보기에도 무엇이 중요한 정보인지 덜 중요한 요소인지 분간할 수 있습니다.

layout_yongpd_readpage.png

예를 들어 위 스크린샷의 경우 글이 위주이고 오른쪽 컬럼에는 글쓴이에 대한 정보와 전체 글의 주제 꾸러미들을 볼 수가 있습니다.
글의 하단에는 트랙백이나 댓글 등이 표시되어 있고요. 특이할 것 없는 일반적인 블로그의 형태라 할 수 있습니다.

그런데 우리가 검색을 통해서 어떤 웹사이트에 내가 찾고자 하는 정보에 바로 접근하였다면 어떻게 그것이 내가 찾는 정보인지 판단할 수 있을까요?
나에게 필요한 정보는 바로 내가 찾고자 하는 정보이고, 그 정보가 얼마나 정확한 정보인지에 대해 먼저 판단할 것입니다. 그러한 판단의 기준은 다음과 같습니다.

1. 첫눈에 들어오는 글의 제목
2. 훑어본 대강의 글 스토리
3. 글의 작성일자

저의 경우는 이 세 가지 기준으로 내가 찾고자 하는 정보의 정확성을 판단 짓습니다. 물론 전반적인 웹사이트의 디자인을 통해 웹사이트의 분위기를 판가름 지을 수 있겠지만 형태적이 아닌 내용적인 측면에서 바라보도록 합니다.

다시 위 블로그를 예를 들어 좀 더 파고들어보자면, 위 사이트에 접속합니다. 그런 다음 내가 찾는 글의 주제, 글의 내용을 확인하게 되면, 이 글이 과연 언제 작성된 정보인지를 먼저 확인합니다.

layout_yongpd_readpage_deta.png

그런데 글의 제목과 내용은 가장 먼저 들어오지만 언제적 쓴 글인지에 대한 정보는 바로 확인하기 어렵습니다.
제가 말씀드리고 싶은 건 글보기 화면에서의 웹페이지의 구조 또한 중요하다는 것을 말씀드리고 싶은 것인데,
일반적인 웹페이지의 구조를 큰 틀로 나누어 보면,

1. 헤더
2. 본문
3. 푸터

헤더, 본문, 푸터의 구조로 나누어져 있습니다. 글보기의 화면 역시 이와 같아야 그 글에 대한 정보를 이용자가 더 쉽게 파악할 수 있습니다.
우선 헤더에는 글의 제목, 글쓴 날짜, 글쓴이, 댓글의 수(이는 글목록 화면에서의 UX를 그대로 글보기 화면에까지 적용시킨 것입니다.)가 표시되어야 하고, 본문은 글의 본문, 푸터에는 글의 주소 및 트랙백, 댓글이 표시되어야 합니다.

글보기에도 이러한 구조적으로 일반적인 스크롤의 상단에 글의 정보를 한 눈에 파악할 수 있는 헤더 정보가 삽입되어 있어야지 사용자들이 찾을 때 쉽게 이용할 수 있는 글보기 화면이 됩니다.
0
0
목록
글쓰기 신고 스크랩

댓글 0

댓글작성칸으로
HTML5/CSS3
-
가
+
전체 웹표준 웹접근성 부트스트랩 반응형 웹 UI HTML5 jQuery Script CSS Meta Table Form 미분류 PHP Flash CGI DIV 웹폰트 크로스브라우징 위지윅에디터 svg 프레임워크 map swiperjs
2 3 4 5 6 7 8 9 10 11
글쓰기
메뉴닫기
profile
로그인 해주세요.
자유게시판 글쓰기 저장함 쪽지
전체글보기 인기글 인기멤버 태그

전체 게시판

닫기

마이페이지

로그인을 해주세요

네이버로 로그인
ID/PW찾기 회원가입