웹 앱 화면 설계하기

Achievement Goals

• 만드려는 앱을 와이어프레임으로 그려볼 수 있다.
• 와이어프레임만 보고 HTML로 코딩할 수 있다.
• div (또는 section, header 등의 시맨틱 태그)로 영역을 구분하는 이유를 이해할 수 있다.
• HTML에서 어느 때에 id, 어느 때에 class를 사용해야 하는지 이해할 수 있다.

---

와이어프레임

와이어프레임(wireframe)은 골격

단순한 도형만을 사용하여 제품의 인터페이스를 시각적으로 묘사

레이아웃과 제품의 구조를 보여주는 용도

목업

실제 작동되는 모습처럼 HTML 코드를 작성. 하드코딩하는 것을 말한다.

혼동되는 용어를 정리해보자.

이곳에서 시각적인 차이를 느껴보자. https://brunch.co.kr/@cysstory/103