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

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

2. 다단계 구조의 페이지

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

3. 검색,결과 페이지

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

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

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

5. 입력형 페이지

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

6. 빠레트 캔버스 형태

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

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