티스토리 뷰
HTTP : 웹 문서를 만들기 위하여 사용하는 기본적인 웹 언어의 한 종류이고 화면을 담당한다.
웹 서버에 HTML 문서를 저장하고 있다가 클라이언트가 특정 HTML 페이지를 요청하면 해당 HTML 문서를 클라이언트로 전송한다.
프로토콜 : 컴퓨터 통신규약
웹서버 : 웹 서버 소프트웨어는 HTTP 프로토콜을 통해 클라이언트(웹 브라우저)의 요청 정보를 받아 처리하고 그 결과를 다시 클라이언트에 보낸다. 즉, 웹 서버는 HTML을 전달해 주는 역할이다.
ex) apache-tomcat
WAS : WEB APPLICATION SEVER
어플리케이션 서버에 존재한다. 인터넷 상에서 HTTP를 통하여 사용자 컴퓨터나 장치에 애플리케이션을
수행해 주는 장치이다.
apache tomcat 은 웹서버와 WAS를 합쳐 놓은 것이다.
apache : 웹서버 / tomcat : WAS
UI 구현
핵심 용어 사용자 중심 인터랙션 디자인(human computer interaction design), html(hyper text markup language), web, app, css(cascading style sheets), gui(graphic user interface), layout, font, header, container, footer, color, UI 설계 검토, UI 구현 표준, UI 저작도구, 프로토타입 UI, 단위 테스트, 테스트 케이스
GUI : GRAPHIC USER INTERFACE 그래픽 화면
컴퓨터 사용자 중심의 화면, 설계된 틀
UI에 적용되는 프로젝트 및 서비스를 정확하게 이해해야 사용자의 요구에 부합하고 만족도 높은 결과물을 만들어 낼 수 있다. 스토리라인(GUI GUIDE)을 보고 개발을 해야한다.
GUI GUIDE : UI 디자인 가이드(이하, 문서 또는 가이드 문서)는 일관성 있는 화면 디자인을 위하여 목표 시스템의 공통 규칙, 폰트, 컬러 등의 리소스 요소와, 서비스 목적에 따른 여려 유형의 레이아웃(예: 단순 정보 전달, 검색 레이아웃) 등을 사전에 설계해 둠으로써 반 복적으로 활용 가능한 내용들로 구성된다
리소스 : 웹을 구성하는데 필요한 자원
EX) 이미지, CSS파일
1. 주요 디자인 요소
1) 화면 설정 구현 환경(PC, 모바일, 태블릿)에 따른 해상도, 지원하는 브라우저 버전, 화면 정렬, 스크롤 바, 프레임 사용 여부 등 기본적인 화면 설정 내용을 전달한다.
2) 공통 규칙
전체적인 디자인의 느낌과 레이아웃의 일관성을 부여하기 위하여 폰트, 컬러 등 의 공통적인 리소스 정보를 전달한다
3) 구성항목
| 내비게이션 | 메뉴 |
| 테이블 | 표 |
| 툴팁 | 마우스를 갖다 댈 때 정보를 제공 |
| 탭 | 페이지를 구성하는 요소를 분류 |
| 아이콘 |
4) 레이아웃
전체적인 구조는 header, container, footer로 구성
상단/ 헤더 -> 본 내용/컨테이너 ->정보표시/ 포터의 3단구성
| 헤더 |
| 컨테이너 |
| 포터 |
필요에 따라 고정, 가변 할 수 있다.
* 5) 네이밍 규칙
사전에 정의 해 둔 공통 규칙
2. 구현 환경 기반 UI 구현 프로세스 검토
1. 구현 환경의 특성을 고려
UI 디자인 가이드는 구현 환경별 플랫폼의 특성을 고려하여 제작해야 한다.
웹과 앱의 개발은 틀리다. 각 환경을 고려해야 한다.
2. UI 구현 프로세스 검토
(1) 웹(Web) 환경 UI 구현 프로세스
웹 환경에서 UI 구현 시 프로세스는, 시스템에 대한 방향성 수립 후 디자인 기획을 수행하고 나서, HTML, CSS 등을 통해서 퍼블리싱을 수행한 후 다양한 언어를 이용하여 개발한다
퍼블리싱 : 디자이너가 만든 디자인을 HTML로 만드는 과정
3. 구현 환경별 UI 구현 프로세스를 검토
(1) Web 환경 특성을 검토
HTTP 프로토콜을 통해서 서버와 클라이언트(브라우저) 간에 통신을 수행하며,
브라우저 기반으로 실행된다.
웹 페이지 =/= 웹 사이트
| 웹 페이지 | 라인으로 볼 수 있는 단일 문서 또는 텍스트, 이미지, 비디오로 가득찬 페이지 |
| 웹 사이트 | 모든 웹 페이지가 모여서 웹 사이트를 형성 |
(2) UI 구현 프로세스
| 요구사항 분석 | 디자인기획 | 퍼블리싱 | 개발 및 테스트 |
UI 검토 기준 수립
- 사용자가 원하는 형태로 서비스가 적절하게 구현되었는지 검토
- 사용성 측면의 검토와, 텍스트, 색상 등이 직관적으로 적용되었는지 검토
1. 사용성 측면의 UI 검토 기준 수립
- 사용자에게 익숙한 단어, 문장 및 개념으로 용어를 설명 ex) 내비게이션 -> 메뉴
- 사용자를 향해 용어, 피드백, 문장 등이 일관성을 유지하고, 표준을 준수
- 처음부터 에러가 나지 않도로 설계
- 직관적인 기능, 초보자도 사용이 가능
2. 디자인 측면의 UI 검토 기준 수립
- 유사한 정보를 그룹화
- 유사한 요소를 그룹화 -> 특정한 의미나 기능이 인식
- 복집하지 않은 필요한 정보만 전달
-
2-1 . UI 표준
ui - user interface
ux - user experience
사용자의 경험을 토대로 화면이 구성
1. UI 구현 표준의 구성 요소
(1) 사용자 제어 가능한 인터페이스
작업취소 / 간편한 인터페이스 / 시스템 상태를 표시
(2) 편리한 상호작용
전문용어 자제 / 불필요한 요소를 제거
(3) 사용자의 원활한 사용성
- 그룹화하여 정보를 구성
- 동작 수 최소화
- 인식강화 : 그룹의 정보를 사용자가 인식할 수 있음
2. 웹 표준, 웹 접근성, 웹 호환성
웹 표준 : 웹 기술을 표준화 하기위한 일련의 단계와 요구사항.
구조(html), 표현(css), 동작을 구분하여 사용하는 것.
웹 접근성 : 장애를 가진 사람과 장애를 갖지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식
웹 호환성 : 웹사이트가 작동하는 서비스 이용자 단말기(PC, 모바일기기 등)의 하드웨어 및 소프트웨어 환경이 다른 경우에도 동등한 서비스를 제공하는 것
3-1. UI 저작도구 파악
UI개발
퍼블리싱을 통해 디자인을 최대한 살려서 작성된 html, css, java script 작업파일을 기반으로 시스템이 작동하고, 데이터와 연결해 주는 코딩을 수행한다.
와이어프레임 :
애플리케이션의 프로토타입.
페이지상에 어떤 내용이 실릴지 간략하게 표현하는 기법.
자세한 디자인은 포함하지 않는다.
스토리보드 : 웹 사이트의 전체적인 흐름 및 프로세스 포현
텍스트, 이미지, 소리, 애니메이션 등의 데이터가 어떻게 조합되어 보이는지 구체적인 사항.
이해관계자, 기획자, 디자이너, 개발자 의사소통 도구.
네이티브 앱 : 스마트폰 운영체제에서 프로그래밍 언어를 사용하여 제작
웹 앱 : 웹 브라우저를 통해 실행되는 앱
하이브리드 앱 : 웹 표준 기술과 네이티브 앱 변환을 통해서 구동
<HTML>
hyper text mark-up language
html 문서 버전은 doctype으로 서술.
<!-- html 대한 설명 -->
<!doctype html> <-- html5 문서의 버전을 가르킨다.
<html> <- html문서 시작을 알린다.
<head>
눈에보이지 않는 영역.
해당 문서의 정보가 서술된다.
</head>
<meta charset="UTF-8">
<body>
<!--
사용자 눈에 보이는 영역
컨텐츠를 배치
-->
</body>
</html> <- html 문서를 닫는다.
단일태그 : <b/> 열고 닫고가 동시에 된다.
UTF-8 - 다국어 지원
<h1></h1> - 헤드라인.
tag : html 문서를 구성하는 언어
<이클립스 기본 설정하기>
1.
CSS FILES, HTML FILES, JSP FILES 에서 인코더를 UTF-8로 설정해주기
2.
탬플릿에서
<!doctyple html> 로 html5 설정,
meta charset 설정해주기
localhost : 내컴퓨터
8080 : 8080 포트 사용
html01-0825 : 프로젝트 명
<요소와 속성>
요소 : 시맨틱 태그 및 엘리멘트 요소등을 포함
시맨틱 태그 : 의미가 있는 명칭으로 만들어진 블럭요소인 header, footer등이 있다.
엘리맨트 요소 : 태그
body의 요소 : <h1> ~ </h1>
속성 : 태그가 가질 수 있는 정보
<meta charset="UTF-8"> : HTML 문서의 문자 인코딩 방식. 유니코드(Unicode)를 위한 문자
<블럭요소 및 인라인 요소>
블럭요소 ( block element)
- 모든 인라인 요소를 포함. 다른 블럭요소도 포함
인라인은 블럭요소를 포함 할 수 없다.
- 자동 줄 바꿈
- 가로폭 100%를 가지는 직사각형 형태
- 마진(바깥 여백), 패딩(안쪽 여백) 설정 가능
- 주로 레이아웃을 구성할 때 사용
인라인 요소(inline elemnet)
- 항상 블럭 요소 안에 포함
- 인라인 요소 내에 인라인 요소 포함이 가능하다.
- 높이 설정 불가능
- 좌, 우, 중 정렬기능
- 자동으로 줄바꿈이 없음
'41기 개발자과정' 카테고리의 다른 글
| 20210830 java 하나의 패키지 내 ~ 메서드 선언 및 호출 (0) | 2021.08.30 |
|---|---|
| 20210827 상담 및 국비수업진행안내 (0) | 2021.08.27 |
| 20210826 절대경로 ~ form 태그 (0) | 2021.08.26 |
| 20210824 웹 응용프로그램 개발환경 셋팅 (0) | 2021.08.24 |
| 20210823 OT~ SW개발환경 (0) | 2021.08.23 |