기획자가 알아두면 좋은 구축 관련 용어

기획자가 알아두면 좋은 구축 관련 용어

어제 이어 오늘도 기획자가 알아두면 좋을만한 용어들을 정리를 해봅니다. 처음부터 다시 배우는 웹 기획에 있는 자료를 옮겨 두는 것이므로 책이 궁금하신 분들은 예스24 eBook으로 구입해서 읽어 보시면 저렴하니 좋습니다. 

한파가 몰아치고 북극의 제트기류가 중반구까지 내려와 초속 200km의 속도로 지구를 돌고 있어 지금 이렇게 추운 것이라고 합니다. 다들 감기 조심하시고 건강 잘 챙기시길 바래요 ^^ 

<구축관련 용어> 

• HTML(Hyper Text Markup Language)
  웹 문서를 만들기 위하여 사용하는 기본적인 프로그래밍 언어의 한 종류로 하이퍼텍스트를 작성하기 위해 개발되었다. 문서의 글자 크기,글자색, 글 모양, 그래픽, 문서 이동(하이퍼링크) 등을 정의하는 명령어로서 홈페이지를 작성 등에 쓰인다. 
  
  
• UI(User Interface)
  사용자 인터페이스의 약자로 사람(사용자)과 사물 또는 시스템, 특히 기계, 컴퓨터 프로그램 등 사이에서 의사소통을 할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체를 뜻한다. 즉, 정보기기나 소프트웨어의 화면 등 사람과 접하는 면을 의미한다. 
  
  
• UX(User eXperience)
  사용자 경험의 약자로 사용자가 어떤 시스템, 제품, 서비스를 직간접적으로 이용하면서 느끼고 생각하게 되는 총체적 경험을 말한다. UX는 UI를 포함하는 개념으로 사용된다. 
  
  
• WBS(Work Breakdown Structure)
  작업 명세 구조라고 부르며 프로젝트의 범위, 전체 일정, 최종산출물을 세부 요소로 분할한 계층적 구조도를 말한다. 
  
  
• 웹 표준(Web Standards)
  웹에서 표준적으로 사용되는 기술의 총칭으로 대표적인 국제적 표준화 단체인 W3C가 정한 웹을 만드는 기술 권고안을 말한다. 
  
  
• 웹 접근성(Web Accessibility)
  장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식을 가리킨다. 
  
  
• 페르소나(Persnona)
  어떤 제품 혹은 서비스를 사용할 만한 목표 인구 집단 안에 있는 다양한 사용자 유형들을 대표하는 가상의 인물이다. 페르소나는 가상의 인물을 묘사하고 그 인물의 배경과 환경 등을 설명하는 문서로 꾸며지는데 가상의 이름, 목표, 평소에 느끼는 불편함, 그 인물이 가지는 필요 니즈 등으로 구성된다. 
  
  
• 표적집단면접(FGI, Focus Group Interview)
  표적 시장으로 예상되는 소비자를 일정한 자격 기준에  따라 6~12명 정도 선발하여 한 장소에 모이게 한 후 면접자의 진행 아래 조사 목적과 관련된 토론을 함으로서써 자료를 수집하는 마케팅 조사 기법이다. 
  
  
• Footer 
  페이지 하단에 위치한 공통 노출 요소로써, 보통 회사 관련 정보 및 서비스의 정책, 각종 신고 정보(사업자 등록번호, 통신 판매업 신고) 등을 수록한다. 
  
  
• GNB(Global Navigation Bar)
  Home, Login.Sitemap등 어느 페이지에서 들어가든 공통적으로 사용할 수 있는 메뉴 그룹을 지정한다. 보통 사이트 최상단에 위치한다. 
  
  
• IA(Information Architecture)
  콘텐츠나 서비스에 직관적으로 접근할 수 있도록 정보를 설계하고, 이것을 명확한 의미로 전달할 수 있도록 레이블링(Labeling)하는 것을 말한다. Sitemap은 IA에 포함되는 개념이다. 
  
  
• Interaction
  사람(사용자)의 입력(조작)에 따른 디바이스의 출력(반응)을 의미하며 시각, 청각, 촉각적 입출력과 피드백을 통칭한다. 
  
  
• LNB(Local Navigation Bar)
  웹사이트에서 2 Depth이하 메뉴 단계를 표기할 때 사용한다. 왼쪽에 위치해서 'Left Navigation Bar'로 혼용하기도 하며 SNB(Side Navigation Bar)와도 같은 의미로 사용한다. 
  
  
• RNB(Right Navigation Bar)
  정식 용어로 보기는 힘들며, 일반적으로 우측에 위치한 메뉴를 지칭한다. 
  
  
• UML다이어그램(Unified Modeling Language Diagram)
  UML은 요구 분석, 시스템 설계, 시스템 구현 등의 시스템 개발 과정에서, 개발자 간의 의사소토을 원할하게 이루어지게 하기 위하여 표준화한 통합 모델링 언어이다. UML 다이어그램은 시스템 상호작용, 업무흐름, 객체 간의 메시지 전달, 시스템 의 구조, 컴포넌트 관계 등을 그린 도면을 말한다. 
  
  
• 뎁스(Depth)
  메뉴의 단계(깊이)를 의미하는 용어로, 일반적으로 1Depth, 2Depth와 같은 형식으로 사용한다. 
  
  
• 라이트박스(Light Box)
  팝업이 뜨는 동시에 백그라운드 화면이 어두워지거나 밝아지는 효과를 말한다. 딤드(Dimmed)라고도 지칭한다. 
  
  
• 사이트맵(Sitemap)
  웹사이트의 웹 페이지를 계층적으로 분류한 목록으로, 해당 웹사이트를 구성하고 있는 전체 구조를 보여주며, 웹 디자인을 계획하는 문서로 사용될 수도 있다. 
  
  
• 스와이프(Swipe)
  손가락을 댄 후, 일직선으로 드래그하는 것을 말한다. 직선 움직이라는 제한이 있으나 시간의 제한은 없으므로 손가락을 때 때까지 스와이프 동작을 인식한다. 
  
  
• 스토리보드(SB, Story Board)
  웹사이트 제작에 있어 아직 만들어지지 않은 페이지의 구성과 기능들을 화면의 흐름에 따라 표현한 그림을 말한다. 디자이너/개발자가 참고하는 최종적인 산출 문서로써 UI 및 개발적인 이슈가 담겨 있으며, 해당 문서를 바탕으로 커뮤니케이션을 진행한다. 
  
  
• 스플래시 스크린(Splash Screen)
  App이 실행될 때 표시되는 이미지를 말한다. 평균2~3초간 지속되는 시간 동안 애플리케이션의 로고와 함께 App에 대해 간략한 소개를 하거나, 로딩 진행률을 애니메이션으로 표시하기도 한다. 
  
  
• 슬라이딩 메뉴(Sliding Menu)
  평상시에는 닫혔다가 당길 때 열리는 서랍과 같다고 'Drawer'라고 부르기도 하며 슬라이딩 되면서 나오는 모션에서 착안하여 'Sliding Menu'라고도 부르기도 한다. 일반적으로 App의 최상위 메뉴를 표시하며, 최근 할동이나 알림 등 각 App의 부가적인 기능을 모아 볼 수 있는 공간으로 쓰인다. 
  
  
• 와이어 프레임(Wire-Frame)
  스토리보드의 전 단계로 서비스 레이아웃을 구상하는 단계에서 손으로 그리거나 PPT로 간단하게 그린 그림을 뜻하며 모크업이라고도 부른다. 
  
  
• 코치 마크(Coach Marks)
  App을 처음 사용하는 사용자를 위해 간단한 도움말을 제공하는 패턴으로 화면에 반투명한 화면을 덮어 그 위에 각 메뉴에 대한 도움말을 표시한다. 
  
  
• 토스트 팝업(Toast Pop-up)
  토스트기에서 토스트가 나오는 모양과 유사해서 붙여진 이름으로 PC에서는 주로 모니터의 우측 하단에서 몇 초간 나타났다가 사라지는 형태를 취하며, 모바일의 경우 화면의 중앙에 주로 위치한다. 
  
  
• 페이지네이션(Pagination)
  페이지에 번호를 매겨서 정확한 페이지로 구분하는 것을 말한다. 
  
  
• 팬(Pan)
  손가락을 댄 후, 손을 떼지 않고 계속 드래그하는 움직임을 말한다. 
  
  
• 프로그레스 인디케이터(Progress Indicator)
  콘텐츠가 로딩되고 있음을 시각적으로 보여주는 효과로 로딩이 완료되는 시기를 예측하기 어려운(Indeterminate), 예측이 가능한(Determinate) 두 타입으로 나누어 진다. 
  
  
• 프로토타입(Prototype)
  설계가 끝난 화면이 어떻게 구동되는지 직접 실행해 볼 수 있도록 스크립트를 이용해 구현한 데모를 말한다. 
  
  
• 플로챠트(Flowchart)
  논리(Logic)의 흐름을 특정한 순서도 기호(Flow Chart Symbol)를 사용하여 도식적으로 표현한 다이어그램을 가리킨다. 
  
  
• 플릭(Flick)
  스와이프에서 좀 더 제한적인 동작으로 빠르게 한쪽 방향으로 쓱~ 긋는 것을 말한다. 
  
  
• 핀치(Pinch)
  화면의 일정 부분을 두 손가락으로 모으거나 벌리는 동작을 말한다. 
  
  
• 네이티브 앱(Native App)
  모바일 OS제주사에서 제공하는 개발 언어를 이용하여 자신들의 제품에서만 동작되는 앱을 말한다. 네이티브 앱의 장점으로는 특정 플랫폼에 함께 탑재되어 있는 다른 애플리케이션과의 인터페이스나 API의 사용이 가능하여 애플리케이션 간의 확장성이 용이하고 UI구성 요소가 대부분 패키지화 또는 라이브러리형식으로 기본 제공되기 때문에 빠른 로딩 속도가 장점이다. 
  
  
• 모바일 웹(Mobile Web)
  웹 페이지를 작업할 때 사용하는 HTML5, CSS, Javascript등을 활용하여 작성된 브라우저에서 동작하는 화면을 말한다. 개발 시 화면 체크를 바로바로 할 수 있고, 바로 변경 및 수정이 가능하기 때문에 즉각적인 대응이 가능하다는 장점이 있지만, 모바일에서 사용되는 API활용이 불가능하고 UI의 구성요소를 실시간으로 로딩하므로, 처리 속도가 느리다는 점, 인터넷이나 와이파이의 연결 상태에 영향을 받는다는 단점이 있다. 
  
  
• 반응형 웹(Responsive Web)
  디스플레이 종류에 따라 화면의 크기가 자동으로 최적화되도록 조절되는 웹 페이지를 말한다. 
  
  
• 하이브리드 앱(Hybrid App)
  네이티브 앱과 동일한 환경을 가지고 있지만, 부분적으로 HTML, CSS로 작성된 앱을 말한다. 인터넷 환경과 와이파이 환경에 따른 영향에도 유연하고, 모바일 앱보다는 빠른 로딩 속도와 스마트폰에서 바로 실행이 가능하다는 장점이 있다. 모바일 웹과 네이티브 앱의 장,단점을 적절히 융합한 형태의 앱이다. 
  
  
• 스큐어모피즘(Skeuomorphism)
  사물의 모양을 실제와 동일하게 인식할 수 있도록 제작하는 iOS7 이전의 디자인 패턴을 말한다. 
  
  
• 머티리얼 디자인(Material Design)
  구글이 안드로이드 5.0과 함께 공개된 디자인 철학이자, 가이드라인이다. 그리고 기반의 레이아웃, 응답 및 전환 애니메이션, 조명 및 그림자와 같은 사물에 대한 깊은 묘사가 주 특징이다. 
  
  
• 플랫 디자인(Flat Design)
  입체감을 주는 디자인이 아닌 평평한 느낌을 주는 디자인을 말한다. 대표적인 플랫 디자인은 MS의 윈도우8 애플의 iOS7에서부터 적용되었다. 

출처: PXD블로그 참고 / 웹만사 / 처음부터 다시 배우는 웹 기획