웹 화면 설계하기

순서

• 와이어프레임(Wireframe)
• HTML로 구조 잡기
• ID 및 Class 목적에 맞게 사용하기
• 목업(Mock-Up)

---

와이어프레임(Wireframe)

웹 또는 앱을 개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임(Wireframe) 이라고 합니다. 선이나 도형으로 인터페이스를 시각화한 것으로 아주 단순하게 구조를 잡을 때 사용합니다. 와이어프레임의 가장 큰 목적은 화면의 영역을 구분하기 위함으로써, 각 영역에서 그 용도에 맞는 Tag를 사용할 수 있도록 함께 작성하는 것이 좋습니다.

---

HTML로 구조 잡기

와이어프레임이 뼈대를 그리는 단계였다면, 이번 단계는 실제로 뼈대를 만드는 단계라 할 수 있습니다. 앞서 작성한 와이어프레임을 참고하여 큰 부분에서 작은 부분까지 차근차근 tag를 작성해 나갑니다. 이 과정에서 미처 생각하지 못해 추가적으로 필요한 부분이나 수정이 필요한 부분을 변경해가며 진행해도 좋습니다.

---

ID 및 Class 목적에 맞게 사용하기

ID는 고유한 영역을 나눌 때 사용하며 Class는 반복되는 영역을 나눌 때 사용합니다.
ID는 tag에서 가장 큰 부분이 될 수 있으며, class는 그 안에 작은 부분이 될 수 있습니다.

쇼핑몰 홈페이지를 예를든다면,

빨간 부분이 ID, 나머지 부분은 Class가 될 수 있습니다. 이를 잘 나눈다면 나중에 CSS로 작업을 할 때 영역을 잘 나누었기 때문에 원하는 부분에 스타일 적용하기 수월합니다.

---

목업(Mock-Up)

실제 제품과 동일하게 HTML 문서를 작성하는 것을 말합니다. 만약 지금까지의 단계를 잘 따라왔다면 목업을 작성하는데 큰 어려움이 없지만, 바로 목업부터 작성한다면 처음부터 다시 설계해야하는 골치 아픈 일이 생길 수 있습니다.
목업을 하는 과정에서는 JavaScript를 사용하지 않는 단계이기 때문에 사용자 데이터 같은 부분들은 더미 데이터를 이용합니다.

<span class="seller">김범수</span>
<span class="price">3000원</span>