와이어프레임 설계 및 목업 구현

와이어프레임(Wireframe)

웹 또는 앱을 개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임이라고 합니다. 와이어프레임은 말 그대로 "와이어로 설계된 모양"을 의미하며, 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것입니다. 와이어프레임은 아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도입니다. 전환 효과나, 애니메이션, 사용자 테스트같은 스타일링 요소나 UX(사용자 경험, User Experience)를 판단하는 것이 아닙니다.

특히 이번에 우리가 그려볼 와이어프레임의 가장 큰 목적은, 화면의 영역을 구분하는 일입니다. 그래서 인터페이스를 그림으로 표현하는 와이어프레임이 아니라, 각 영역에서 사용할 주요 태그를 메모하는 형식으로 와이어프레임을 작성하세요.

예제를 하나 소개합니다. 다음은 특정 목적을 가진 프로그램의 와이어프레임입니다. 이 와이어프레임을 보고, 어떤 목적을 가진 프로그램인지 유추할 수 있나요? 그렇다고 답했다면, 이 와이어프레임은 그 목적을 성공적으로 달성했습니다. 다음 그림을 살펴보고, 이 와이어프레임이 나타내는 프로그램의 목적이 무엇인지 유추해보세요.

[그림] 특정 목적을 가진 프로그램의 와이어프레임

목업(Mock-up)

대부분의 산업에서 목업은 실물 크기의 모형을 뜻합니다. 실물 제품이 없는 무형의 웹 또는 앱은 어떻게 목업을 만들까요? 웹 또는 앱을 제품이라고 할 때, 목업은 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성합니다. 예를 들어, 트윗 작성자, 트윗 내용, 작성한 날짜 등을 HTML 문서 내에 하드코딩하는 방식입니다.

하드코딩이란?

만일 JavaScript에서 변수를 사용하지 않고, 구구단을 만든다고 가정하겠습니다. 변수를 사용하지 않고 구구단처럼 보이기 위해서는, 각 숫자의 단을 소스코드에 모두 출력하는 방법뿐입니다.

// 하드코딩의 예

console.log('2 x 1 = 2')

console.log('2 x 2 = 4')

console.log('2 x 3 = 6')

console.log('2 x 4 = 8')

[코드] 하드코딩한 2단의 일부

우리가 역동적인 웹 어플리케이션을 만들기 위해서는, HTML 문서에 트윗 작성자, 내용을 변수로 관리하여 값을 동적으로 담아야 합니다.

// JavaScript 어딘가에는 tweet 내용이 담긴 객체가 존재합니다

let tweet = {user: '김코딩', content: 'SNS는 인생의...'}

[코드] 변수를 이용한 데이터 관리

 

그러나 아직 우리는 <div> 태그 내에 변수의 값을 전달하는 방법을 배우지 않았습니다. 아직은 변수를 이용할 수 없기때문에, HTML 문서에 아래와 같이 하나하나 입력해야 합니다. 이런 방식을 하드코딩이라고 합니다.

<!-- 실제로는 어떤 로직에 의해서 적절한 위치에 값이 들어가겠죠 -->

<div class="writer">김코딩</div>

<div class="content">SNS는 인생의...</div>

[코드] 하드코딩한 HTML 문서

코딩을 시작하기 전에

와이어프레임과 목업을 작성하는 단계를 건너뛰고, JavaScript로 동작하는 Twittler를 만들고 싶을 수 있습니다. 그러나 와이어프레임과 목업을 작성하는 단계를 반드시 진행해주세요. HTML 문서를 통해 화면을 다 그려보지 않으면, JavaScript를 적용한 완성본이 어떤 형태를 가질지 상상하기 어렵습니다. 마치 설계도없이 건물을 짓는 것과 같습니다.

여러분은 다음 유닛을 통해 조금 자바스크립트의 상위 개념을 접하게 됩니다. HTML 문서와 CSS 파일을 이용해 작성하는 것에서 그치지 않고, 자바스크립트를 이용해 실제 웹 어플리케이션을 만들기 위해서는 꼭 알아야 하는 내용으로 구성하였습니다. 이번 유닛을 통해 작성한 와이어프레임과 목업을 보면서, 실제와 동일하게 동작하는 웹 어플리케이션을 만듭니다.