와이어프레임
와이어프레임(wireframe)은 골격이라고도 표현할 수 있습니다. 말 그대로 "와이어로 설계된 모양"을 의미하며, 비교적 단순한 도형만을 사용하여 제품의 인터페이스를 시각적으로 묘사한 것입니다.
와이어프레임은 전환 효과나, 애니메이션, 사용자 테스트처럼 UX를 판단하는 것이 아니라. 아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도입니다.
특히 이번에 우리가 그릴 와이어프레임은 영역을 구분하는데 가장 큰 목적이 있습니다. 그래서 단순히 인터페이스의 그림을 그리는 것에 불과한 와이어프레임이 아닌, 각 영역에서의 주요 태그들을 간단하게 메모하는 형식으로 짜 보았으면 좋겠습니다.
예제를 하나 소개합니다. 다음은 어떤 목적을 가진 제품의 와이어프레임입니다. 이 와이어프레임을 보고, 어떤 목적을 가진 프로그램인지 유추해낼 수 있나요? 그렇다면 이 와이어프레임은 그 목적을 성공적으로 달성했다고 볼 수 있습니다. 한번 살펴보시고, 이 와이어프레임이 나타내는 제품의 목적이 무엇인지 알아맞춰보세요.
목업
어떻게 목업을 만들 수 있을까요?
실제 작동되는 모습처럼 HTML 코드를 작성하면 됩니다. 예를 들어, 트윗 작성자, 트윗 내용, 작성한 날짜 등을 HTML 상에 하드코딩한다고 생각하시면 됩니다.
참고로, 코드스테이츠에서는 와이어프레임은 Miro, 목업은 figma를 사용한다.
잠깐, 하드코딩이 뭔가요?
만일 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')
우리가 생명력을 가진 웹 앱을 만들어야 한다면, HTML에는 트윗 작성자, 내용 등에 변수의 값이 동적으로 담겨야 할 것입니다.
// JavaScript 어딘가에는 tweet 내용이 담긴 객체가 존재합니다
let tweet = { user: '김코딩', content: 'SNS는 인생의...' }하지만 아직 우리는 <div> 안쪽에 변수 내용을 담는 방법을 배우지 않았으므로, 아래와 같이 원하는 HTML 출력을 하나하나 입력해주어야 합니다. 이게 바로 하드코딩입니다.
<!-- 실제로는 어떤 로직에 의해서 적절한 위치에 값이 들어가겠죠 -->
<div class="writer">김코딩</div>
<div class="content">SNS는 인생의...</div>코딩을 시작하기 전에
이 단계를 건너뛰고 JavaScript로 작동되는 Twittler를 만들고 싶어할 지도 모르겠습니다. 그러나, 반드시 이 목업 단계를 거치시기를 바랍니다. HTML로 화면을 다 그려보지 않는다면, JavaScript를 작성할 때, 어떤 완성본이 나오게 될지 쉽사리 상상하기 어렵습니다. 마치 설계도를 그리지 않고 건물을 짓는 것과 마찬가지입니다.
이 과정을 끝낸 후, Twittler 함수 작성과 관련된 인트로와 Bare minimum requirement를 확인하시기 바랍니다.
와이어프레임의 목적, 해답편
상단의 와이어프레임은 POS기(상품 주문 시스템) 를 나타내고 있습니다. 메뉴와 카트, 그리고 총 합계가 잘 나타나있나요? 여러분들도 이렇게 작성해보세요
더 확인하면 좋을 자료들
