160711: 82회차

종료하기 전 티스토리 네이버 로그아웃 할 것

1. 툴

동일

추가시: 

2. 폴더

동일

추가시:

3. 사용할 사이트

동일

추가시:

4. 공부하는 것

[15] UI 설계

[01] UI 설계

01) UI 설계의 이해

UI의 설계부터 구현 및 검증까지는 해당 프로젝트의 시작부터 종료까지 전반에 걸쳐 진행

되며 진행 내용은 다음과 같다.

1. UI 개발 목표와 범위 수립

해당 프로젝트의 목표 및 정의 단계에서 UI 부분의 목표와 범위에 대한 계획을 수립하는 

단계로 프로젝터 계획 전반에 UI 계획을 반영한다. 이 과정을 수행하기 위해서는 해당 프

로젝트의 이해 당사자(Stake Holder)의 UI 요구 사항을 조사하고, 정의하며 UI 트렌드 및 

해당 서비스의 사용자를 분석한다.

2. UI 전략 수립

서비스를 사용할 사용자 조사 및 시장 조사를 통해 UI와 UX에 대한 전략을 수립하는 단

계로 사용자는 물론 기술적 관점에서도 전략을 수립하는 것이 중요하다.

3. 사용자 요구 사항 분석 및 정의

사용자 조사와 페르소나(Persona) 결과를 기반으로 사용자의 요구사항을 추출하고 선별하

여 사용자 요구 사항을 분석한다. 이를 통해 해당 시스템 전반에 적용되는 UI의 컨셉을 

18

설계한다. 이때 페이퍼나 도구를 활용한 프로토타입(Prototype)의 제작이 진행된다.

4. UI 상세 설계

UI에 대한 콘셉트가 정의되면 이를 토대로 실제 설계와 구현을 위한 모든 화면에 대해 상

세 설계를 진행하게 된다. UI의 기능에 대한 구조와 화면 간의 상호 흐름, 예외 처리 등의 

UI 전반에 걸친 설계가 이루어진다.

5. 구현

UI 설계에 따른 구현에는 다양한 기술들이 사용되며 HTML5, CSS3, JavaScript 등과 같은 

기본적인 언어들은 물론 jQuery와 같은 JavaScript의 라이브러리 또한 범용적으로 사용된

다. 또, UI 구현은 UI 디자이너들과 협업으로 이루어지게 된다.

6. 테스트

테스트 단계는 일반 사용자를 대상으로 해당 개발 소프트웨어의 사용성을 검증하는 단계

로 사용성에 대한 계획을 수립하고, 이 계획을 토대로 테스트를 진행하게 된다.

 

02) UI 상세 설계

1. UI 시나리오 작성

(1) UI 상세 설계의 첫 단계는 시나리오 문서의 작성이다. 전체 기능을 한 번에 확인하고 

이해할 수 있도록 기능 구조를 만들게 되는데, 보편적으로 계층 구조 또는 플로차트 

형태로 작성하게 된다.

(2) 모든 기능에 대해서 공통적으로 적용되는 UI 요소와 사용자와의 상호 작용에 대한 일

반적인 규칙을 정의한다.

(3) 사용자와 화면과 화면의 상호 작용에 대한 흐름과 순서(Sequence), 분기(Branch), 조건

(Condition), 루프(Loop) 등을 명시한다.

(4) UI에 대한 일반 규칙을 준수하고 각 기능의 상세 시나리오를 작성한다.

2. UI 시나리오 작성을 위한 일반적인 규칙에 대한 정의

(1) 주요 버튼의 위치와 기능

화면에서 공통으로 배치되는 주요 버튼들의 위치와 기능을 설명하는 것으로 화면들에 

대한 일관성을 보장한다.

(2) 공통 UI 요소

다양한 형태의 입력 폼(일반 버튼, 체크 박스, 라디오 버튼, 텍스트 입력, 탭 등)과 각 

UI 요소들에 대해 언제 사용되는지, 어떤 형태를 갖는지를 정의하며 사용자의 조작에 

대해 어떻게 반응하는지를 설명한다.

(3) 기본 레이아웃

여러 화면에 공통적으로 나타나는 제목, 버튼들, 인디케이터 등의 위치와 속성을 설명

한다.

(4) 기본 상호 작용 규칙

공통적으로 사용되는 조작 방법과 실행, 이전, 다음 등과 같은 화면 전환효과 등에 대

해 설명한다.

(5) 공통 단위의 테스크 흐름

대다수의 기능에 공통적으로 사용되는 삭제, 검색 등에 대한 반응 흐름을 설명한다.

3. UI 시나리오 작성에서 고려할 사항

(1) 완전성(Complete)

누락되는 것이 없도록 최대한 상세하게 기술해야 하며 해당 시스템보다는 사용자의 

사용 방법에 기초하여 작성해야 한다.

(2) 일관성(Consistent)

전체 화면과 UI 요소들은 일관성을 갖고 있어야 한다.

(3) 가독성(Readable)

표준화된 템플릿 등을 활용하여 작업자 간에 문서 통한 소통이 원활하여야 하며 문서

를 쉽게 읽을 수 있어야 한다.

(4) 이해성(Understandable)

추상적이거나 보편적으로 사용하지 않고 이해하기 어려운 용어의 사용은 피한다.

(5) 수정 용이성(Modifiable)

수정이나 개선 사항에 대해서 시나리오에 반영하는 것이 쉬워야 한다.

(6) 추적 용이성(Traceable)

변경 사항에 대해서 언제, 어떤 부분이 어떤 이유로 변경 되었는지에 대해 쉽게 추적

할 수 있어야 한다.
 

3) GUI 설계

GUI 설계를 통해 개발 소프트웨어의 시각적 콘셉트를 정의하고 표현한다. 이를 통해 전체 

UI 구성에 대해 이해할 수 있다.

1. 통일성(Unity)

GUI 설계에서 통일성은 UI 요소들이 공통적으로 갖는 특성을 뜻한다. 통일성을 나타내는 

방법은 색상, 모양, 스타일, 요소들의 배치 등 다양하게 존재한다.

2. 우선순위

우선순위는 화면에 보이는 요소들의 나열되는 순서라고 할 수 있다. 우선순위는 사용자가 

해당 페이지를 바라보는 시선에 따라 정해지며, 우선순위에 영향을 줄 수 있는 요소로는 

UI 요소들의 위치, 색상, 크기 등이 있다.

3. 그 외의 요소들

GUI 설계에서 고려해야 할 부분은 통일성, 우선순위 외에도 비율과 균형, 인터랙션과 모

션 등이 있다.

 

[02]  UI 상세 설계하기

1. UI 시나리오 문서를 작성한다.

(1) 전체 페이지들의 계층 구조를 설계한다.

(2) 전체 페이지에서 공통적으로 적용되는 UI 요소들에 대해 정의한다.

(3) 메인 화면에 대한 레이아웃과 기능을 정의한다.

(4) 각 페이지별 이동 경로를 설계한다.

(5) 전체 사이트 맵을 작성한다.

(6) UI 시나리오 내용을 구성원 간에 반복하여 검토한다.

2. GUI 템플릿 제작과 화면을 디자인한다.

(1) 화면 디자인에 활용될 레이아웃, 컬러 패턴, 디자인 요소 등을 정의한다.

(2) 디자인 요소들에 대한 정의 이후에 GUI 템플릿을 제작한다.

(3) 각 페이지에 대한 세부 화면을 디자인 한다.

(4) 디자인된 GUI 화면을 검토한다.

 

5. 수업

진도: 

hw: 

6. 할것

1. web.xml → 한글 처리★

2. pom.xml → lib설정★

3. web-inf/root-context.xml★

web-inf/appservlet/servlet-context.xml★

4. resources/*.xml -> CRUD★

src/test/resources/homepage.xml → test용 bean 설정★

5. dao → junittest★

6. Controller 생성

7. view 연결

//6이랑 7 같이 bbs에선 csfinder (tlds도 건드리고) + etc 어려운거 : member

//memo부터~.~

루트 -컨텍스트 하는 중임★

Bbs

Reply

Image

Memo★

Guest★

Member★

8. tile2 → template 설정

덧글 & bbs는 같이 서비스를 만들고 (서비스 = 매니저 같은 것)

= 관계가 형성되어진 DAO는 같이 서비스를 사용하고

관계가 없는 애들은 따로 따로 dao 마다 서비스를 만든다.

UML에서 ITestService는 선택 사항

오늘 신청해야 내일 시험 볼 수 있음

이건 스프링 디자인 참조 사이트

니가싫어도나는좋아.html