[TIL] 와이어프레임, 디자인 시스템 - 6/13

와이어프레임

와이어프레임이란?

웹사이트의 골격이나 애플리케이션의 사용자 인터페이스(UI) 및 핵심 기능을 나타내는 단순한 선과 도형으로 구성된 다이어그램 또는 다이어그램의 집합.

디자인적인 요소는 제외하고, UI 배치, UX 설계에 목적을 둔다.

글로만 작성하면 팀원 간에 이해하는 방식이 다를 수 있기 때문에 시각적으로 그리면서 기능에 대한 이해를 맞추는 역할을 한다.

 

이렇게만 설명하면 어떻게 작성해야 할지 전혀 감이 잡히지 않을 것이다.

그래서 자체적으로 와이어프레임에 들어갈 내용을 정리해봤다.

와이어프레임에 들어갈 내용

• 각 요소들의 위치
  ex) 버튼, 문구, 사진, 그래프 등
• 그 중에서도 데이터에 따라 동적으로 바뀌는 요소들은 그냥 텍스트로 설명
  ex) "어떤 사진"
• 버튼에 사용할 아이콘이나 디자인 생략
• 메뉴 이름, 기능 설명과 같이 고정적인 문구는 작성
• 인터페이스 작동방식

위와 같은 내용만 충족하면 팀원들 간의 이해를 충분히 맞출 수 있다.

 

 

우리도 이전에 작성해둔 요구사항 명세서와 IA를 기반으로 와이어프레임을 작성했다.

 

이번에는 개인적으로 리딩을 조금 잘한 거 같은데
전체적인 틀을 제작할 사람 1명을 정하고, 각 페이지별로 1명씩 담당해서 제작하고,
마지막에 틀에 넣는 방식으로 합쳤다.

 

 

PM/PO는 개발자, 디자이너와의 커뮤니케이션을 통해 프로덕트를 개발하는 역할을 한다.

그 중 디자이너와 소통하기 위해 디자인 시스템이라는 것을 알아야 한다.

디자인 시스템

디자인 시스템이란?

디자인 원칙과 규격, 재상요 가능한 UI 패턴과 컴포넌트, 코드를 포괄하는 시스템.

단순 스타일 가이드, 패턴 라이브러리 역할만 하는 디자인 시스템도 있고, 브랜드 원칙과 UX 원칙에 이르는 하나의 철학을 구성하는 시스템도 있다. 정해진 디자인 패턴과 컴포넌트를 재사용하여 제품을 구축하고, 개선하는 시간을 단축시켜준다. 일종의 레고세트

출처: https://yozm.wishket.com/magazine/detail/1830/

 

디자인 시스템이 필요한 이유

• 디자인의 일관성 유지
• 비효율적인 작업 감소
• 확장성 증가

 

디자인 시스템의 정의

• 형태(기본 스타일)
• 기능
• 접근성
• 커스텀