Wireframe

Wireframe

디자인에 들어가지 전 단계로 선(wire)를 이용해 윤관석(frame) 을 잡는 것

웹 페이지의 레이아웃과 UI 요소 등에 대한 뼈대

- 이 작업을 통해 개발자는 디자인 컨셉과 사이트 기능에 대한 이해를 할 수 있음

 

Mockup

데모 시연, 평가를 위한 최소한의 기능만 담은 모형

 

 

와이어프레임을 보고 컴포넌트 구분하기

 

1. 어떤 컴포넌트를 만들고 이들을 조합할지 부터 구상

- 예를 들어 상단의 경우, 상단 전체를 아우르는 Header라는 컴포넌트가 있고, 그 자식으로 search와 setting 이라는 컴포넌트를 만들기로 함 

- Header 컴포넌트는 애플리케이션 내의 어떤 페이지에 가더라도 늘 상단에 위치하니 이 부분을 감안해서 설계 로직을 작성

 

2. 컴포넌트 재사용 고려

- 동영상 플렛폼을 예시로 메인 화면에 나열되는 영상 정보들은 디테일은 달라도 레이아웃은 동일하니 컴포넌트를 한 번만 만들어 재사용 가능 

 

3. 작은 단위의 컴포넌트 분석 

- 컴포넌트가 표현하는 값 분석

- 컴포넌트가 가지고 있는 기능 분석(ex. 클릭시 해당 영상 재생)

- 컴포넌트가 어떤 상태로 있느냐에 따라 달라지는 출력 화면 예상

 

 

설계시 컴포넌트 관련 고려 사항

- UI의 필수 요소, 각자 고유의 기능을 가지고 있다는 정의도 맞음

- 고차원의 개발자라면 애플리케이션 안에서 다뤄지는 데이터를 컴포넌트끼리 보다 유기적으로 주고 받을 수 있도록 설계해야 함