[프론트엔드 기초] 웹 앱 화면 설계하기

와이어프레임(Wireframe)

    - 와이어로 설계된 모양

    - 웹 또는 앱을 개발할 때 레이아웃의 뼈대를 그리는 단계

    - 도형으로 인터페이스를 묘사해 아주 단순하게 레이아웃과 제품의 구조를 보여줌

    cf. Oven: 와이어프레임 제작 플랫폼, [실습] 와이어프레임 만들기 - 풋몹(fotmob.com)

 

목업(Mock-up)

    - 실물 크기의 모형

    - 기능적으로는 동작하지 않는, 실제 웹 또는 앱과 모습이 동일한 HTML,CSS 문서

    cf. CodeSandbox: 프론트엔드 웹 개발 에디터,  [실습] 트위틀러 목업 구현하기

 

HTML로 웹 앱 구조 잡기

    1. 큰 틀에서 페이지 영역 나누기 (e.g. 댓글 쓰기, 댓글 읽기)

    2. 각 영역을 태그로 표현하기

    3. id와 class를 사용해 목적에 맞게 이름 붙이기

        id - 고유(unique)한 이름을 붙일 때 / class - 반복되는 영역을 유형별로 분류할 때