(1-5) React 기초 - Wireframe

 

Wireframe은 디자인에 들어가기 전 단계로 선(wire)를 이용해 윤곽선(frame)을 잡는 것을 말한다. 이 작업을 통해 개발자는 디자인 컨셉과 사이트 기능에 대한 이해를 할 수 있다. 그리고 목업(mockup) 은 데스크톱, 스마트폰의 프레임을 덧씌워 직관적으로 이해하기 쉽게 디자인한 것을 말한다.

 

 

 

자, 이제 유튜브 개발자인 여러분이 React를 이용해 어떻게 애플리케이션을 만들지 설계를 한다고 상상해 보자. 컴포넌트 기반 개발 방법을 학습하였기 때문에, 페이지를 먼저 만들기 보다는 어떤 컴포넌트를 만들고 이들을 조합할지부터 구상할 계획이다.

 

 

 

먼저 화면 상단의 경우 상단 전체를 아우르는 Header라는 컴포넌트가 있고  그의 자식으로 Search와 Setting이라는 컴포넌트를 만들기로 하였다. Header 컴포넌트는 애플리케이션 내의 어떤 페이지에 가더라도 늘 상단에 위치하니 이 부분을 감안해서 설계 로직을 작성해야겠다고 생각했다.

 

 

 

화면 중앙에는 크리에이터들이 올린 영상을 담고 있는 컨텐츠 리스트라는 컴포넌트가 있고, 그 안에는 동일한 형태를 가진 영상물들이 반복적인 형태로 화면을 구성하고 있기 때문에 컨텐츠라는 컴포넌트를 한 번만 만들어 재사용하기로 하였다.

 

 

 

어떤 컴포넌트들이 필요하고, 이들을 어떻게 조합하여 전체 UI 를 만들지 설계가 끝났다. 하지만! 과연 이게 정말 끝일까?

 

 

 

가장 작은 단위의 컴포넌트를 한번 분석해 보자. 한눈에도 다양한 정보를 담고있는 콘텐츠 컴포넌트를 한번 살펴보기로 하자. 콘텐츠 컴포넌트는 상단에는 썸네일, 중앙에는 아바타와 영상 소개글, 하단에는 채널 이름과 조회수, 업로드 한 날짜가 기재되어 있다.

 

 

 

콘텐츠 컴포넌트는 영상과 관련된 데이터를 입력받아  UI에 맞게 화면에 출력해 준다. 더불어 눈에 보이지는 않지만 클릭 시 해당 영상을 재생해 주는 기능도 가지고 있다.

 

 

 

이뿐만이 아니다. 이 데이터는 영상이 대기 목록에 있을 때도, 혹은 재생 중일 때에도 동일한 내용이 화면에 출력된다. 어떤 상태로 있느냐에 따라 출력되는 위치만 조금씩 달라질 뿐이다.

 

 

 

컴포넌트가 UI 의 필수 요소란 정의도 맞고, 각자 고유의 기능을 가지고 있다는 정의도 맞다. 하지만 조금 더 고차원의 React 개발자라면 어플리케이션 안에서 다뤄지는 데이터를 컴포넌트들끼리 보다 유기적으로 주고 받을 수 있도록 설계해야 한다.