[HTML+CSS] 01_화면구현 시작하기

화면 구현 시작하기

#01. 화면 구현 작업 단계

• 일반적인 화면 구현의 작업 단계
  

  

#02. 요구사항 확인

• MindMap 구조를 활용한 웹 페이지의 요구사항 확인

  • 회사마다 요구사항을 도출하기 위한 양식이 다를 수는 있다.

  

  • XMind8 -> 요구사항 확인을 위한 MindMao 도구
    • https://www.xmind.net/download/xmind8
  • 엑셀을 활용한 웹 페이지의 요구사항 정의서

  

#03. UI 설계

1) UI(User Interface)의 정의

• 사용자가 하드웨어나 시스템에 연결되는 과정에서 사용자의 편리성과 가독성을 높여 주기 위한 것이다.

• CLI (Comman Line Interface)

  • 명령어 라인 인터페이스
  • 사용자와 시스템이 상호 작용을 하는 방식으로 명령과 출력이 텍스트 형태로 표현된다.

  ex) 윈도우의 명령 프롬프트 환경

• GUI (Graphic User Interface)

  • 그래픽 유저 인터페이스
  • 사용자가 컴퓨터의 자원을 사용할 수 있도록 구성요소들이 그래픽 형태로 표현된다.

  ex) 윈도우의 바탕화면 환경

3) UI 설계

- 웹 사이트의 페이지 구성요소를 기록한 설계도. 정적이 형태의 화면 형태로 **와이어프레임**이나 **목업**등을 이용하여 작성한다.

• 와이어 프레임 도구로는 카카오 오븐(https://ovenapp.io/)을 사용한다.
• UI 목업 제작도구로는 Photoshop을 사용한다.

#04. 웹 접근성이란?

1) 웹 접근성의 의미

• 웹 접근성 (Web Accessibility)

  • 웹 사이트에서 제공하는 정보를 차별 및 제한 없이 동등하게 이용할 수 있도록 보장하는 것.
    • 장애인 및 고령자등 모든사람
    • 다양한 Platform 및 Device와 웹 브라우저 등 모든 환경

  ex) 웹 접근성을 준수하지 않는 경우?

  - 장애인 차별 금지 및 권리구제 등에 대한 법률

#05. 시멘틱 웹과 웹 표준

1) 시맨틱 웹 = 의미있는 문서

• 웹 페이지를 읽어들이는 주체는 “웹 브라우저”이므로 기계의 입장에서 이해 해야 한다.
• 기계가 문서의 내용에 대한 구조를 분석하여 사용자에게 “A”라는 내용이 “B”라는 목적으로 사용되었다는 것을 알려주기 위하여 태그 마다 의미를 부여하여 분석하기 쉽게 만든것.

2) 웹 표준이란?

• 웹 표준은 시맨틱 웹을 구성하기 위하여 사전에 미리 약속되어진 작업방식.
• 웹 접근성을 확보하기 위해서는 시멘틱 웹을 작성하여야 하며, 작성하기 위해서는 웹 표준을 준수해야 한다.