웹 디자인 이론 STEP 03.

 

웹디자인 이론 STEP 03. 에서는 UI 디자인의 실무 용어를 문서, 기획서, 퍼블리싱, 디자인의 4가지 분야로 나누어서 알아보도록 하겠습니다. 각 분야별 용어를 알아두어야 실무에서 다른 팀원들과 회의를 하거나, 업무를 진행함에 있어서 수월하기 때문에 정리하게 되었습니다. 실무나 교육기관에서 배운 내용을 기반으로 작성하는 글로 잘못된 내용이 포함될 수 있습니다.

 

UI 디자인 실무 용어 - 문서

1. RFP(Request For Proposal)

업무, 기술, 운영 요구에 해당하는 요구사항을 발주처에서 작성하여 제시하는 제안요청 문서

 

2. RFI(Request For Information)

RFP에 명시된 주요 요구사항에 대해 제안 참여 업체에서 요구사항 별로 질의를 통해 답변 요청하는 문서

3. IA(Information Architecture)

정보구조설계라는 의미로 수많은 정보들을 사용자가 쉽게 이용할 수 있도록 구조화하는 것, Depth명, 탭 개수와 내용, 기능 버튼(인쇄, 스크랩, 목록), 형식(html, 게시판, out link), 접근 권한(로그인의 여부), 관리자 유무, 설명 등

 

4. WBS(Work Breakdown Structure)

작업 명세 구조 문서, 프로젝트 범위, 전체 일정, 최종 산출물을 세부 요소로 분할한 계층적 구조 문서

 

5. SB(Story Board)

스토리의 내용을 쉽게 이해할 수 있도록 주요 장면을 그림으로 정리한 계획표

 

UI 디자인 실무 용어 - 기획서

1. Description

기획서 우측에 스토리 보드에 대한 각 영역 별 상세한 설명을 써 놓은 부분

 

2. As-is

현재의 업무 프로세스 및 상황 설명

 

3. To-be

앞으로 -되었으면 하는 상황이라는 뜻으로, 도출하고자 하는 이슈 사항, 개선 방향, 목표의 의미

 

4. Depth

메뉴의 단계를 의미하는 용어로, 일반적으로 1 Depth, 2 Depth와 같은 형식으로 사용되며, 단계가 깊어질수록 세부적인 카테고리를 의미

 

 

UI 디자인 실무 용어 - 퍼블리싱

1. HTML(Hypertext Markup Language)

인터넷에서 웹을 통해 접근되는 대부분의 웹 페이지들은 HTML로 작성된다. 문서의 글자크기, 글자색, 글자 모양, 그래픽, 문서 이동(하이퍼링크) 등을 정의하는 명령어로서 홈페이지를 작성하는 데 쓰인다.

 

2. j-Query

자주 쓰이는 javascript소스를 모아놓은 라이브러리이다.

 

3. CSS(Cascading Style Sheets)

웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일 시트라고 보면 된다. 예를 들어 CSS를 통해 웹사이트에 적용된 폰트 크기나 스타일을 일괄적으로 간단히 수정할 수 있다.

 

4. 크로스 브라우징

웹사이트 구축을 하면, 모든 브라우저(익스플로러, 크롬, 사파리 등)를 만족시키게 하는 것을 말한다. "크로스 브라우징"은 실무 웹사이트 구축 테스트에서 꼭 필요한 과정이다.

 

5. Parallax

스크롤의 움직임에 따라 사이트의 배경 및 오브젝트가 시간차를 두고 변하는 기술

 

6. Infinite Scrolling

무한 스크롤 - 사용자의 편의성을 고려해 페이지 이동 없이 많은 양의 컨텐츠를 스크롤 만으로 볼 수 있게 구현

 

UI 디자인 실무 용어 - 디자인

1. Tone & Manner(톤&매너)

디자인 스타일과 방향성에 대한 느낌을 말하는 것으로서, 포괄적인 디자인에 대한 느낌을 말하는 것

 

2. Style Guide(스타일 가이드)

"웹스타일 가이드"라고도 많이 불리는데, 웹디자인을 하기 위한 기본적인 디자인 아이덴티티와 텍스트, 컬러, 버튼, 줄 간격 등 여러 가지 기준을 통해 디자인, 퍼블리싱, 개발에 디자인적으로 일관성을 유지하기 위한 필수요소

 

3. Prototype(프로토타입)

실제 작업에 들어가기에 앞서 시험용 또는 견본으로 작업하는 가안

 

4. Mock Up(목업)

실제로 구현되는 형태를 가리킨다. 웹사이트인 경우 PC나 모바일 등의 디바이스 화면에 목업 작업을 하여 시연한다. 목업의 스타일도 다양하기 때문에 트렌드에 부합하는 목업을 통해 작업된 시안을 보다 효과적 으로 시연할 수 있다.

 

5. 유지보수

웹사이트 구축 이후에 사이트를 운영하는 과정을 말하는 것으로, 유지보수 혹은 사이트 운영 이라고도 말하며, 유지보수 범위에는 예를 들어 배너 교체, 이미지 교체, 문구 수정 등 비교적 간단한 업무가 포함된다.

 

6. Favicon(파비콘)

상단 브라우저 탭 타이틀 옆에 위치한 16x16 px 사이즈의 아이콘 형태를 말한다. 통상적으로 CI 나 BI를 사용한다.

 

7. Component(컴포넌트)

사용자를 위한 온스크린 인터 페이스(On-Screen Interface)를 구성하는 기본 단위이다. 유저가 사용하는 시스템에 대한 조작장치를 이야기한다. "컨트롤(Control)"이라고도 하고 UI라고도 할 수 있다.

 

8. Wireframe(와이어프레임)

웹 또는 앱 프로젝트를 진행할 때 필요한 과정 중 하나로 웹 페이지의 구조를 제안하기 위한 화면 설계도이다. 디자인이 들어가기 전 단계에서 선(Wire)을 이용해 윤곽선(Frame)을 잡는 것을 말한다.

 

9. Develop(디벨롭)

문제점을 보안하여 디자인의 완성도를 높여가는 과정

 

10. Resizing(리사이징)

디자인된 그래픽 파일을 주어진 사이즈에 맞추어 재 디자인하는 것

 

11. Variation(배리에이션)

기본적인 디자인 스타일은 유지하되, 부분적인 변화를 주는 작업으로 디자인을 다양하게 만들어낼 때 사용