[DAY2] HTML/CSS 활용(와이어프레임, 목업)

목차

🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일

⭐요약

---

웹 개발 프로젝트의 초기 단계에서 와이어프레임과 목업을 활용에 대해 정리함.

 

🚀 HTML/CSS 활용

 

1) 와이어프레임(Wireframe)	웹 페이지의 기본 구조를 설계하는 과정으로, 핵심 요소와 기능을 배치하여 전체적인 페이지 레이아웃을 계획함. 프로젝트의 목적과 요구 사항을 명확히 하고, 초기 단계에서 디자인과 기능에 대한 이해도를 높임.
2) 목업(Mock-up)	와이어프레임을 기반으로 한 단계 더 발전된 디자인 단계로, 실제 제품과 유사한 방식으로 HTML 문서에 구현됨. 목업을 통해 실제 콘텐츠와 디자인 요소를 사용하여, 최종 제품의 모습을 시각적으로 예측할 수 있음.

 

⭐HTML/CSS 활용

1. 와이어프레임(Wireframe)

• 와이어프레임: 웹 페이지의 기본 구조를 설계하는 과정
• 핵심 요소와 기능을 배치하여 전체적인 페이지 레이아웃을 계획함.
• 프로젝트의 목적과 요구 사항을 명확히 하고, 초기 단계에서 디자인과 기능에 대한 이해도를 높임.

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

2. 목업(Mock-up)

• 목업: 실제 제품이 작동하는 모습과 동일하게 HTML 문서.
• 와이어프레임의 다음 디자인 단계. 실제 콘텐츠와 디자인 요소를 사용하여, 최종 제품의 모습을 시각적으로 예측할 수 있음.
• 예를 들어, 트위터에서 트윗 작성자, 트윗 내용, 작성한 날짜 등을 HTML 문서 내에 하드코딩하는 방식임.

1) 하드코딩이란?

: 만일 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로 동작하는 애플리케이션을 만들고 싶겠지만, 반드시 진행해야 함. HTML 문서를 통해 화면을 다 그려보지 않으면, JavaScript를 적용한 완성본이 어떤 형태를 가질지 상상하기 어려움. 설계도 없이 건물을 짓는 것과 같음.

와이어프레임의 목적

상단의 와이어프레임은 POS기(상품 주문 시스템)를 나타내고 있음. 메뉴와 카트, 총합계가 잘 나타나 있는지 확인함.

⭐과제

---

계산기

• 지금까지 배운 HTML/CSS를 사용하여 나만의 계산기 만들기
• font-family 속성으로 폰트를 계산기처럼 설정함. background-color 속성으로 디스플레이 배경 색상을 실제 계산기 색상으로 지정함. border-radius 속성으로 계산기와 버튼의 모서리를 둥글게 함. 사진으로는 보이지 않지만 :hover을 사용하여 마우스를 올리면 색이 바뀌는 효과를 설정함.
• background-image 속성으로 body 태그의 배경 색상을 이미지로 지정하려고 했는데, 적절한 이미지를 찾지 못하여 적당한 색상으로 배경색을 지정함. 공학용 계산기처럼 만들고 싶었으나 생각대로 구현이 되지 않음.
• 제출 완료.

[사진] 다른 사람들의 계산기

⭐후기

---

• 와이어프레임과 목업을 통해 웹 페이지의 기본 구조를 이해하는 데 많은 도움이 되었음.
• 실제 코딩 전에 이를 설계하는 과정이 중요하다는 것을 깨달았으며, 배운 내용을 적용하면 웹 개발의 효율이 증가할 것이라고 예상됨.
• 목업을 직접 작성하며  웹 개발 프로젝트를 시작하기 전에 페이지의 기본 구조와 디자인을 미리 계획하는 것의 중요성을 깨달음.
• 와이어프레임과 목업 단계를 거쳐 동적인 웹 애플리케이션을 개발할 수 있도록 실력을 키워야겠음. 또한, 사용자 경험(UX) 디자인에 대한 이해를 높이기 위한 공부도 해야 할 필요가 있음.

⭐참고자료

---

1) Sandbox, "day2-calculator", https://codesandbox.io/s/happy-zhukovsky-kp85lr?file=/session.css

2) fejigu.log, "HTML, CSS 계산기 만들기", 2022.07.04, https://velog.io/@fejigu/HTML-CSS-%EA%B3%84%EC%82%B0%EA%B8%B0-%EB%AA%A9%EC%97%85-%EB%A7%8C%EB%93%A4%EA%B8%B0

 

이 글은 코드스테이츠 x KNU가 주최한 직무역량캠프에서 공부한 내용을 작성한 것입니다.