와이어프레임 작성하기

와이어프레임 작성

• 기획된 UI/UX 콘셉트에 따라서 화면의 기본 구조를 정의할 수 있다.
• 사용자 인터페이스 요소의 구성에 따라 모든 화면들을 간략하게 설계할 수 있다.
• UI 기술과 개발 난이도를 고려하여 요소별 액션을 정의할 수 있다.

구조도 (사이트 맵)

구조도 정의

• 정보 공간의 형태를 개괄적으로 보여주며, 각각 사이트 개발자와 사용자를 위한 요약 도 기능을 한다.
• 페이지와 다른 콘텐츠 요소들 간의 관계를 보여주기 때문에 조직화, 내비게이션, 레이 블링 시스템을 표현하는 용도로 사용하는 것이다

구조도 설계

• 상위 레벨 구조도

  메인 페이지에서 시작해서 하위 페이지들을 추가하고 단순성을 유지하며 구조에 계속 적으로 살을 붙여 나가며 사용자의 예상 접근 경로뿐 및 조직화 및 콘텐츠 관리에 대 한 논의를 통해 구조도를 그려 나간다. 구조도는 손으로 그릴 수도 있지만 비지오나 옴니그래플과 같은 다이어그램을 그리는 소프트웨어를 사용 할 것을 권한다.

• 상세 구조도

  전체 사이트에 대한 계획을 다루며 메인 페이지에서부터 목적지 페이지까지 모든 정 보 계층구조를 다루고 있어야 한다.

• 구조도 조직화하기

  상세 구조화 된 구조도를 고유 식별자 체계를 사용하여 모듈별로 분류하여 콘텐츠 목 록과 구조화 프로세스를 연결하도록 한다.

와이어프레임

비주얼 디자인이 시작되기 전에 흑백으로 제작되어 UX/UI 디자인의 방향을 잡는 역할을 하며 페이지나 화면에 보여지는 요소들을 정하기 위해 그려지는 일종의 ‘프로토타입’이 라고 할 수 있다. 피드백과 함께 이루어지는 작업이기 때문에 한번에 완성도를 높이기보 다 반복적 작업을 진행하는 것을 염두 해 두고 작성해야 한다.

정의

대략적인 스크린 디자인을 일컫는 것으로, 각 페이지와 기능 간의 관계와 구조를 제안하 고 시각화하는 것이다. 이러한 와이어프레임은 인터페이스 디자인에서 기본 안내서로 사 용한다. 즉, 와이어프레임은 인터페이스의 기본 요소를 담은 레이아웃을 그림 등으로 표현 한 것으로, 기획서나 스토리보드 등의 UI 디자인을 의미한다. 가벼운 스케치와 인터랙티브 프로토타입 사이에 위치한다고 본다

• 개별적인 페이지 혹은 템플릿이 구조적인 관점에서 어떻게 보여야 하는지를 정의한다
• 사이트의 정보구조와 시각 디자인 및 정보 디자인의 특성을 모두 가지고 있다.
• ‘페이지’라고 불리는 상대적으로 좁은 2차원 공간에 포함될 콘텐츠와 정보구조를 설명한다.
• 콘텐츠 요소를 어떻게 그룹핑 할지, 어떻게 배열할지, 어떤 요소 그룹들이 높은 우선 순위를 가질지 결정하며 화면설계 작업을 진행한다.
• 메인 페이지, 주요 카테고리 페이지, 검색으로 이동하는 인터페이스와 같이 사이트의 가장 중요한 페이지들과 그 밖의 중요한 애플리케이션을 위해 생성된다.

화면 설계의 종류

다양한 완성도의 수준에 따라 지니는 각각의 장단점을 항상 염두에 두게 되면, 화면설계 는 정보구조 설계 프로세스에서 커뮤니케이션과 협업을 위한 매우 강력한 도구가 된다

• 낮은 완성도의 화면설계

  어떤 그래픽 요소나 실제 콘텐츠가 담겨있지 않다. 이 화면설계는 시각 디자이너가 페 글로벌, 로컬, 컨텍스추얼 내비게이션 요소에 집중할 수 있도록 해준다. (그림 2-2)

  

• 중간 완성도의 화면설계

  세부사항들이 잘 표현되어 있다. 이 화면설계 콘텐츠, 배열, 내비게이션의 몇 가지 측 면을 보여주기 위한 목적으로 만들어졌다. (그림 2-3)

  

• 높은 완성도 화면설계

  실제 페이지 모습과 매우 흡사하다. 이 화면설계는 대부분의 인포메이션 아키텍트가 그래픽 디자이너의 도움 없이도 이미지를 사용할 수 있다는 것을 보여준다. (그림 2-4)

 

와이어프레임 장점

• 디자인을 좀 더 세밀하게 파악할 수 있게 한다. 세밀하게 작성된 문구는 화면을 이해 하는데 도움을 준다.
• 와이어프레임을 몇 장 묶으면 사용성에 대한 피드백을 얻을 정도의 충분한 완성도가 나온다.
• 사용자에게 보여줘서 화면에 대해 어떻게 생각하는지, 어떻게 태스크를 완수할지 들여 다 볼 수 있다
• 사이트의 디자인과 기능에 대한 요구 사항을 명확히 전달할 수 있는 커뮤니케이션 도 구 역할을 한다.
• 디자인 명세 문서를 상당 부분 대체할 수 있다

콘텐츠 매핑과 콘텐츠 모델

콘텐츠 매핑

• 기존의 콘텐츠를 사이트에 포함하기 쉬운 콘텐츠 청크로 잘게 나누고 재조합하는 작 업을 수행한다
• 콘텐츠 청크는 개별적으로 다뤄질 필요가 있고 개별적으로 다뤄질 가치가 있는, 최대 한 잘게 나누어진 콘텐츠의 일부이다
• 출처 페이지와 목적지 페이지 모두에서 각각 콘텐츠를 담고 있는 컨테이너로부터 콘 텐츠를 분리하는 것이 중요하다
• 콘텐츠 청크는 보다 작은 청크로 나누어져야 하는지, 콘텐츠의 가장 작은 섹션은 무엇 인지 이러한 질문을 통해 청크를 정의해야 한다.
• 콘텐츠 매핑의 부산물은 콘텐츠 목록으로, 활용 가능한 콘텐츠와 그 콘텐츠가 어디에 서 보이는지를 설명해줄 뿐만 아니라 채워질 필요가 있는 콘텐츠 공백을 알려준다.
• 콘텐츠 목록은 각기 시점에 따라 제작해야 하는 페이지의 목록, 설계해야 하는 페이지 목업(mockup)의 목록, 웹사이트로 통합되기 전에 검토할 필요가 있는 디자인된 페이지 의 목록으로 사용된다.

콘텐츠 모델

• 콘텐츠 모델은 서로 연결된 작은 청크들로 만들어진 ‘미세한’정보구조이다
• 콘텐츠 모델이 제 기능을 발휘하기 위해서는 요소들의 일관적인 세트나 요소들 간의 논리적인 연결이 필요하다.
• 어떤 콘텐츠가 콘텐츠 모델에 있어 가장 중요한 콘텐츠인지 정의하고 많은 데이터 속 성 중에서 콘텐츠 모델 운영에 사용될 메타데이터 속성을 선택하게 만들어 가치 있는 프로세스를 만든다

메타데이터

• ‘정보에 대한 정보’를 뜻하며, 특정한 콘텐츠를 설명하는 구조적인 접근 방법을 의 미한다
• 메타데이터를 이용하여 웹사이트에 새로운 항목을 빠르게 추가함으로써 기존 콘텐츠 를 갖고 새로운 사용자의 요구를 충족시킬 수 있다, 즉, 콘텐츠에 대해서 보다 자세한 정보를 가질수록 더 유연한 설계를 할 수 있게 된다.
• 메타데이터에 일관적으로 같은 용어를 사용하면, 별다른 작업을 하지 않아도 같은 주 제에 대한 페이지들을 동적으로 서로 연결할 수 있어 사용자가 정보를 검색할 때 문 서 전체를 검색하는 기초적인 방식보다 더 빠르고 정확하게 원하는 정보를 찾을 수 있게 된다

구성 콘텐츠별 UI 레이아웃 구성 원칙

UI 레이아웃 구성에 있어서 콘텐츠 유형에 따른 주요 구성 원칙에 따라 설계한다

데이터가 많은 유형

• 콘텐츠와 조작부 간의 명확한 구별이 필요하다.
• 폰트는 한정적으로 사용하며 그래픽적 완성도는 높인다
• 가독성을 높인다

이미지와 동영상이 많은 유형

• 화면을 최대한 넓고 선명하게 표시할 수 있도록 한다.
• 컨트롤러보다 콘텐츠 중심으로 화면을 구성한다.

게임과 유사한 유형

• 일관성을 유지하며 메뉴, 폰트, 비주얼 스타일에 통일성이 있어야 한다
• 그래픽 비주얼의 수준이 높아야 한다.