'CGV 예매 화면'에 해당하는 글 1건

12가지 웹페이지 패턴 정리

designingwebinterfaces.com/ 에서 웹페이지에 대한 패턴을 정리한 포스트가 있어서 최대한 우리나라에 있는 페이지를 찾아서 정리 해보고자 합니다. 

designingwebinterfaces.com 메인

designingwebinterfaces.com 메인


이 포스트에서 정리한 패턴은 아래와 같습니다.

12가지 웹 페이지 패턴

12가지 웹 페이지 패턴



1. 메뉴와 상세 페이지로 이루어진 형태

보통 메일 서비스들에게서 그 패턴이 보이고 아이튠과 같은 음악 재생 프로그램에서도 그 형태를 보입니다.

네이트 통합메세지함

네이트 통합메세지함

 
애플 아이튠즈

애플 아이튠즈




2. 다단계 구조의 페이지

위의 1번 패턴보다 더 하위의 콘텐츠들을 나타나게 할 때 쓰입니다. 대표적으로는 CGV 영화 예매 사이트나 학원 수강 신청 사이트들에게서 볼 수 있는 패턴입니다. 아웃룩도 비슷하게 포함되네요.

CGV 예매 화면

CGV 예매 화면

 
아웃룩

아웃룩




3. 검색,결과 페이지

단순 검색과 상세검색으로 나눌 수 있습니다. 첫 검색 페이지의 검색 결과가 많을 경우 상세검색을 할 수 있도록 구성해주는 것이 사용자가 되도록이면 빨리 검색결과를 찾게 도움을 줄 수 있을 것입니다. 검색조건의 그룹핑이 관건이라고 할 수 있습니다.

스마트빌 전체 세금계산서 조회 화면

스마트빌 전체 세금계산서 조회 화면

 
istockphoto.com 상세 검색 페이지

istockphoto.com 상세 검색 페이지




4. 정보 데이터 필터 적용 페이지

네이트 검색, 테이버 지식쇼핑등에서 확인 할 수 있습니다. 인터렉티브한 사용자 경험을 위주로 직관적인 UI들을 선택하고 있습니다. 네이트에서는 정량적인 정보의 필터링 뿐만 아니라 감성적인 접근으로 컬러로도 검색이 되도록 하고 있습니다. 주로 쇼핑 서비스에서 그 특징이 두드러지는 것 같습니다.

네이트 눈에보이는 검색?

네이트 눈에보이는 검색?

 
네이버 지식쇼핑

네이버 지식쇼핑




5. 입력형 페이지

보통 정보 입력 페이지에서 이런 특징을 가집니다. 회원가입 페이지나 결제 페이지등이 해당 됩니다. 예시 사이트로는 위자드닷컴 회원가입 페이지와 디앤샵 결제 페이지 입니다. 요즘 사이트들은 특수한 경우를 제외하고 는 이렇게 간단하게 가져가고 있습니다.

위자드닷컴 회원가입 페이지

위자드닷컴 회원가입 페이지

 
디앤샵 결제 페이지

디앤샵 결제 페이지




6. 빠레트 캔버스 형태

웹 페이지에서도 있을 수 있지만 보통 디자인 소프트웨어나 어플리케이션 소프트웨어에서 많이 볼 수 있습니다. Axure의 스토리 보드 작성 도구나 포토샵등이 해당 될 수 있을 것입니다. 예시로는 티스토리 사이드 위젯 설명 관리자 페이지와 마인드맵 프로그램인 컨셉리더의 화면입니다.

티스토리 사이드바 관리자 페이지

티스토리 사이드바 관리자 페이지

 
컨셉리더 화면

컨셉리더 화면



작성 하다보니 많아지네요. 조금 설명이 부족할 수도 있는데 실제 사이트나 페이지를 보는 것이 더 이해가 빠를 듯 합니다. 12가지 웹페이지 패턴 정리_part 2에서 다시 올리도록 하겠습니다.
저작자 표시 비영리 변경 금지
신고

WRITTEN BY
어라
웹 서비스기획과 소셜웹에 대해 연구하고 실무지식을 공유하는 현웅재의 블로그 since 08.1.28

트랙백  3 , 댓글이 없습니다.
secret