웹기획 용어들 모음

[바다]

Ad Click
사이트 이용자가 사이트에서 제공하는 광고를 몇 번 클릭했는 지를 말합니다. 

Ad Click Rate
Ad Click Rate = { (총클릭횟수) / (총노출횟수) } x 100
광고가 게제되는 사이트 페이지가 보여지는 횟수와 실제 광고가 클릭이 되는 횟수의 비율을 말합니다. 페이지를 보는 사람들이 관심있어하는 분야의 광고일 경우에 비율이 더 높아지며, 광고의 효과를 나타내기도 합니다.

Ad Views (impressions)
광고를 클릭하는 횟수가 아닌 광고가 보여지는 횟수를 말합니다. 즉 광고가 게제되어 있는 페이지의 페이지뷰와 동일한 횟수입니다. 

Anti-Burn Out 
광고 노출 횟수를 계산할 때 한 사람이 광고를 계속 클릭하여 광고비가 과도하게 산출되는 것을 막는 것으로, 한사람이 특정 수 이상으로 광고를 클릭했을 때 광고 산정 횟수에서 제외하는 것을 말합니다.

ASP (Application Service Provider)
어플리케이션을 임대하거나 공급해주는 사업자를 말합니다.

BackBone
네트워크를 구성하는 데 있어 대형경로를 구성하는 초고속 라인을 말합니다. 

Bandwidth
대역폭을 의미하는 것으로 서버에서 사용자의 컴퓨터로 전송되는 Data의 양을 나타내는 말입니다. 하나의 커넥션을 통해 어느 정도의 정보 (텍스트, 이미지, 비디오, 사운드)가 전송될 수 있는가를 나타내며, 일반적으로 초당 비트 수(bps)로 측정되어 집니다.

Banner
웹 페이지에 게재하는 광고형태로 주로 이미지로 되어 있고 클릭을 하면, 광고 페이지나 광고주 사이트로 이동하도록 되어있습니다.

Benchmark
자신이 새로운 사업을 시작하거나 변경할 때 다른 곳의 잘 되고 있는 부분을 분석하여, 내게 맞도록 재편성하여 적용하는 것까지를 말합니다.

Browser Cashing
인터넷 페이지 로딩를 높이기 위하여 브라우저가 최근에 사용한 페이지를 사용자의 디스크에 저장해 두고, 동일한 페이지를 방문할 때 서버에서 다시 로딩하지 않고 디스크에 저장된 페이지를 보여주는 방법을 말합니다.

BtoB (Business to Business, B2B)
기업간 거래를 말하는 용어입니다. 사업대상이 기업과 기업에 이루어지는 사이트들이 이런 경우에 속합니다.

BtoC (Business to Consumer, B2C)
기업간의 전자 상거래는 BtoB인 것처럼, 기업과 개인 소비자간의 거래를 BtoC라고 합니다. 전자 상거래. 온라인 쇼핑 등이 대표적인 예이다. 

Button
일반적인 배너에 비해 크기가 작은 배너광고를 말합니다. 보통 사각형의 작은 아이콘 형태로 제공되어 집니다.

CGI (Common Gateway Interface)
인터페이스 생성 스크립트형 웹프로그램으로 넓은 의미로는 현재의 스크립트형 웹프로그램을 총칭합니다. 사용자와 동적으로(Dynamically) 상호 대화하는 가장 일반적인 방법입니다.

Click Through
Ad Click Rate와 같은 뜻으로 광고가 게재되는 사이트 페이지가 보여지는 횟수와 실제 광고가 클릭이 되는 횟수의 비율을 말합니다.

CMS (Contents Management System)
웹 사이트의 컨텐츠 관리 시스템 또는 솔루션을 말합니다. 컨텐츠가 많은 사이트의 경우 관리자가 쉽게 컨텐츠의 메뉴추가 삭제 재편집등을 쉽게 처리할 수 있도록 하는 것을 말합니다.

CRM (Customer Relationship Management)
고객과 관련된 관계에 따른 고객관리를 하는 것을 말합니다. 기존의 대중마케팅과는 상반되는 내용으로 고객의 정보를 중심으로 고객을 적극적으로 관리하여 고객의 가치를 극대화하는 마케팅 이론이기도하며, 이런 마케팅 방법을 계획, 지원, 평가하는 솔루션을 말하기도 합니다.

Contents
인터넷 사이트에서 제공되는 정보와 기능을 포함한 모든 내용을 말합니다.

CP (Content Provider)
인터넷에서 서비스할 수 있는 정보(Content)를 생산해 공급하는 기업 또는 개인을 말한다.

CPA(Click Per Action) 
광고를 통해 사이트에 접속한 회원이 회원가입이나 물건구매등 광고주와 약속된 행동을 취하게 될 때 광고비용을 지불하는 방법을 말합니다. 

CPC (Cost-Per-Click)
배너광고의 가격을 설정하는 데에 사용되는 단가 결정 기준의 하나입니다. 광고주는 특정 광고 배너가 클릭된 횟수에 따라 광고비를 지불하게 됩니다. 

CPM (Click-Per-Mille)
배너광고의 가격을 설정하는 데에 사용되는 단가 결정 기준의 하나입니다. 광고주는 특정 광고 배너가 몇번 노출되는 가에 따라 광고비를 지불하게 됩니다. 1,000 임프레션 단위로 가격을 산정합니다.

CTR(Click Through Ratio) 
광고의 노출당 광고가 클릭되는 비율을 말합니다. 

CtoC (Consumer to Customer)
인터넷이 활성화되면서 일반개인과 일반개인 사이의 거래가 많이 이루어지고 있으며, 이처럼 일반소비자들 사이의 거래를 연결시켜 주는 것입니다. 경매 사이트등이 대표적인 사이트입니다.

DBMS (DataBase Management System)
데이터베이스 관리 시스템을 뜻하는 것으로, 데이터베이스에 저장, 수정, 그리고 정보를 추출할 수 있도록 허용하는 프로그램의 집합을 말합니다.

DNS (Domain Name Service)
DNS는 도메인 이름을 IP 주소로 변환하는 인터넷 서비스를 말합니다. 일반 이용자들은 서버에 접속할 때 기억하기 쉬운 도메인 이름으로 접속을 하게 되는 데 실제의 인터넷은 IP 주소에 기반을 두고 있기 때문에 도메인 이름을 사용할 때마다 DNS 서비스가 그 이름을 관련된 IP 주소로 변환해 주는 기능을 하고 있습니다.

DTC (Direct-To-Consumer)
소비자를 대상으로 한 광고를 말합니다. TV, Radio, 소비자상대의 잡지, 신문등이 기존 DCT광고이며, 인터넷 또한 소비자를 상대로 하는 사이트에 광고하는 것을 DTC라고 말합니다.

ERP (Enterprise Resource Planning)
전사적 자원관리시스템이라고 불리는 ERP는 기업의 경영활동 수행을 위해 여러 개의 시스템 즉 생산, 판매, 인사, 회계, 자금, 원가, 고정자산 등의 운영시스템 전 부문에 걸쳐있는 경영자원을 하나의 체계로 통합하여 시스템을 전사적으로 재 구축함으로써 생산성을 극대화 하려는 대표적인 기업 리엔지니어링 기법입니다.

Fire Wall
방화벽이라 불리며, 컴퓨터의 정보보안을 위해 불법접근을 차단하는 보안시스템으로 기업이나 조직 내부의 네트워크와 인터넷간에 전송되는 정보를 선별하여 처리할 수 있는 보안 프로그램이나 장비를 말한다. 

Flash Action Script
움직이는 이미지나 영상을 제작하는 플래시에서 스크립트형 프로그램을 사용하여 더 다이나믹한 효과를 주는 것을 말합니다. 이를 이용하여 다른 웹프로그램과 연동하거나 플래시 게임등을 제작할 수 있습니다. 

Flow Chart
순서도라고도 하면, 프로그램이나 어떤 논리적인 흐름을 도식화하며 표현하는 기법을 말합니다. 

GUI (Graphic User Interface)
그래픽 사용자 인터페이스라는 뜻으로, GUI는 컴퓨터의 그래픽 기능을 이용하여 프로그램을 사용하기 쉽게 만들어 주는 것을 말합니다. 잘 디자인된 GUI은 사용자가 복잡한 명령어들을 배울 필요가 없도록 도와주며 다른 한편으로 많은 사용자는 명령어 기반의 인터페이스를 이용할 때 보다 효율적으로 작업할 수 있도록 해 주게 됩니다.

Hit
웹 서버에서 브라우저로 파일을 보낼 때마다 서버 로그 파일에는 그래픽, 텍스트, 인터액티브 항목을 모두 포함하여 기록이 이루어지며, 이 때 등록된 숫자를 말합니다. 이는 요청된 페이지에 들어있는 모든 파일수를 합한 숫자가 되기 때문에 실제의 클릭수와는 많은 차이를 보일 수 있어, 최근에는 광고효과를 산정하는 데 많이 사용하지 않는 방법입니다. 

HTML (HyperText Markup Language)
웹페이지를 만들기 위한 태그형 언어로, 현재 거의 모든 인터넷 페이지는 이 언어를 기반으로 사용하고 있습니다. 

Hypertext
링크를 통해 다른 문서를 검색 또는 표현하게 만드는 모든 텍스트

IDC (Internet Data Center)
대용량의 인터넷 전용선(주로 백본)을 설치하고, 많은 서버를 동시에 관리할 수 있는 곳을 말합니다. 인터넷 이용자는 빠르게 사이트에 접속할 수 있으며, 운영자의 입장에서는 회선에 대한 관리나, 보안, 정전등에 대해 자유로와 질 수 있습니다. 

Information Architecture 
산재되어있는 정보들을 새롭게 구성하여 가치있는 구조로 만들어 놓는 컨텐츠 구조설계를 말하며, 인터넷 사이트에서 제공하려는 컨텐츠를 구성하는 방법론으로도 많이 사용됩니다.

Interstitial
웹 페이지가 로딩되는 동안 다른 브라우저를 통해 나타나는 광고입니다. 페이지의 로딩속도가 느려지기 때문에 일반적인 배너광고에 비해 이용자들의 불만이 많은 광고기법이지만, 반면에 클릭 가능성이 더 높은 광고이기도 합니다. 

Intranet
사무실 내의 네트워크를 인트라넷이라 합니다. 최근에는 거의 모든 사무실에 TCP/IP를 사용하기 때문에 브라우저로 사내 업무를 전산화하는 경우가 많은데, 사무실내의 개인컴퓨터를 이용하거나 외부에서 마치 인터넷을 사용하듯 사내 업무를 볼 수 있습니다.

IRC (Internet Relay Chat)
전세계에서 실시간으로 네트워크 상으로 채팅하는 것을 의미합니다. 

IT (Information Technology)
정보 또는 지식을 전달하는 체계에 관련된 기술로 최근의 무선 통신 또는 인터넷 통신과 관련된 기술분야를 포괄합니다.

Jump Page
광고를 클릭하여 들어온 방문객을 위해 따로 마련한 광고 페이지를 말합니다. 다른 말로는 스플래시 페이지(Splash Page)라고도 불리고 있습니다. 현재 운영되고 있는 사이트의 특정페이지를 링크하지 않고, 이벤트나 광고를 위해 따로 마련된 페이지들의 묶음입니다.

KMS (Knowledge Management System)
지식관리시스템으로 불리고 있으며, 조직 내의 인력들 각자가 독자적으로 축적해 온 지식을 체계적으로 공유함으로써 기업 경쟁력을 향상시키기 위한 기업정보시스템을 말합니다.

Log file
컴퓨터나 네트웍 서비스 중에 실행된 내용을 기록해 두는 파일입니다. 대부분의 웹서버는 서버에 내려진 모든 요청사항을 기록한 로그 파일을 보유하게 되는 데, 이 로그 파일 분석 툴을 이용하여 방문객들이 어디에서 오는지, 얼마나 자주 반복 방문하는지, 사이트를 어떻게 네비게이션하는지 등을 파악할 수 있습니다. 

MIS (management information system)
경영정보시스템으로 불리며 기업 경영에서 의사결정의 유효성을 높이기 위하여, 경영에 관련된 정보를 필요에 따라 즉시 수집하고, 전달하고, 처리할 수 있도록 도와주는 시스템을 말합니다.

Multiuser
둘 이상의 사용자들이 동시에 프로그램을 실행시킬 있는 것을 말합니다. 동시 이용 가능한 이용자의 수에 따라 라이센스 비용을 받는 프로그램들도 있습니다.

Multiprocessing
두 개 이상의 CPU에서 공동으로 하나의 작업을 할 수 있는 시스템을 말합니다.

Multitasking
두 개 이상의 프로그램을 동시에 실행시켜 놓고 작업을 하는 것을 말합니다.

Multithreading
한 프로그램의 다른 부분이 동시에 실행되도록 허용되는 것을 말합니다. 

Navigation
웹사이트를 원할 하게 이용할 수 있도록 이용자의 클릭 흐름을 도와주는 체계를 말합니다. 주로 메뉴바 및 검색창등이 이에 속합니다.

Opt-in E-mail List
인터넷 사용자들이 자발적으로 자신의 관심 분야에 대해 광고 메일을 받기로 허락한 이메일 리스트를 말합니다.

Page Views?
어떤 특정 인터넷 페이지가 브라우저의 요청에 의해서 로딩되는 횟수를 말합니다. 광고적인 관점에서 보았을 때 이용자가 광고를 보았을 가능성이 있는 잠재적인 횟수입니다. 

PtoP (Peer to Peer)
정보를 공급하는 서버에 개인들이 접속하는 방식이 아닌 개인과 개인간의 대등한 관계로 구성된 네트웍에서 서로 파일 및 자료를 주고 받거나 공유하는 방식 또는 프로그램을 말합니다. 대표적인 프로그램으로는 소리바다, 당나귀등이 있습니다.

RFP (Request For Proposal)
프로젝트 입찰에 응찰하는 제안서를 요청하는 제안 요청서입니다. RFP에서는 주로 프로젝트 전체의 대략적이고 전체적인 내용과 입찰규정 및 낙찰자 선정기준등이 제공됩니다.

Rich Media
동화상 비디오, 사용자의 반응을 가능하게 하는 애플릿 및 특수효과 등과 같이 인터넷 광고에서 사용되는 첨단 기술입니다.

ROI (Return On Investment)
광고에 대한 투자대비 수익률을 말합니다. 광고의 목적이 여러 가지 임에 따라 매우 다양한 결과값이 나올 수 있지만, 광고대비 수익을 산정하는 것은 광고를 하는 사람 모두가 심사숙고해야 하는 문제입니다. 또한 이 것을 토대로 광고의 단가 계산하는 기준들이 바뀌기도 합니다.

- GNB ( Global navigation bar ) 

home, login 등 어느 페이지에 들어가든 공통적으로 사용할수 있는 메뉴들을 

보통 지칭. 최상위 메뉴로 보통 상단에 위치한다.

- LNB ( Local navigation bar )

GNB와 별도로 서브 페이지들 ( 2뎁스 이하 ) 에 대한 탐색 기능을 제공하는 

메뉴바 또는 GNB 내에 포함된 각각의 2뎁스 이하의 메뉴들.

LNB에 대한 통용적인 의미와 의견이 상당히 분분하나 일반적으로 이런 의미.

- SNB ( Side Navigation Bar )

하위 메뉴로 보통 레프트/라이트 메뉴를 지칭 함. 

- DEPTH 

메뉴의 단계를 이야기 하며 일반적으로 1depth,2depth 와 같은 형식으로 사용된다. 단계가 깊어질수록 세부적인 카테고리를 의미.

- IA ( information architecture )

컨텐츠나 서비스에 직관적으로 접근할 수 있도록 정보를 설계하고, 이것을 명확하게 전달할 수 있도록 레이블링(labeling)하는것을 말한다. 쉽게 말해 정보구조설계서.

- WBS (Work Breakdown Structure)

작업 명세 구조도. 프로젝트의 범위,전체 일정,최종 산출물을 세부요소로 분할한 

계층적 구조도.

- SB ( Story board )

화면설계서라고도 하며 웹 사이트를 구축하는데 있어 실질적으로 "개발/디자이너/퍼블리셔"가 참고하는 최종적인 산출 문서. UI 및 개발 이슈가 담겨 있으며 이 문서로 커뮤니케이션이 이루어진다.

- HEADER

일반적으로 웹 사이트 상단 영역 ( 로고, GNB )

- FOOTER 

페이지 하단에 위치한 공통 노출 영역. 일반적으로 회사정보,사업자 정보가 

들어간다.

이 밖에도 많은데 생각보다 양이 많아 조금씩 계속 업데이트 하도록 하겠다.

Secure Sockets Layer (SSL)
SSL은 인터넷을 통하여 은밀한 문서를 전송하기 위해 Netscape사가 개발한 프로토콜로, SSL 연결을 통하여 전송될 데이터를 암호화하기 위해 비밀키를 사용함으로써 동작하게 됩니다. 주로 신용카드번호 같은 보안이 필요한 사용자정보를 전송하는 데 사용하게 됩니다. 

Site Map
하나의 웹사이트의 서비스 구조를 한눈에 볼 수 있도록 표현한 그림을 말합니다. 

SLIP(Serial Line Internet Protocol)/ PPP(Point to Point Protocol)
모뎀이나 PC의 COM포트를 이용하여 인터넷에 접속하려는 이용자들에게 PCT/IP연결을 가능하도록 해주는 프로토콜입니다.

SMS (Short Message Service)
휴대폰에서 휴대폰으로, 혹은 인터넷에서 휴대폰으로 문자메시지를 전달하는 것을 말합니다.

Splash page
Jump Page와 같은 의미로 사용되는 말로, 광고를 클릭하여 들어온 방문객을 위해 따로 마련한 광고 페이지를 말합니다. 

Sponsorship
광고주가 웹서비스를 하는 데 필요한 컨텐츠, 이메일 뉴스레터등에 들어가는 비용을 지원하고 그에 대한 광고효과를 얻는 것을 말합니다. 

Sticky
방문객이 오랫동안 머물다가는 사이트를 말합니다. 주로 허브사이트나 검색사이트의 경우는 방문개의 목적이 바로 달성되고, 다른 사이트로 옮겨가게 되지만, 컨텐츠가 많거나, 방문객이 사이트내에서 무엇인가를 해야하는 사이트의 경우 다른 사이트에 비해 더 많은 시간을 머물게 됩니다.

Story Board
웹사이트 제작에 있어 아직 만들어지지 않은 페이지의 구성과 기능들을 화면의 흐름에 따라 표현한 그림을 말하는 것으로, 웹기획을 하는 하나의 양식으로 정착되어있습니다.

Streamming Service
스트리밍(Streamming) 전송 기술은 원격지의 멀티미디어 데이타를 작은 조각으로 분할하여 온라인으로 사용자에게 전송함으로써 클라이언트쪽에서 실시간으로 해당 영상 데이터가 재생되도록 하는 기술을 말합니다.

Unique User
특정 시간대에 각기 다른 많은 사람들이 사이트를 방문함. 고유 사용자를 식별하기 위하여 웹사이트는 일정한 형식의 사용자 등록 또는 식별 시스템을 사용함.

Valid Hits
방문자의 히트를 좀 더 세분화한 것으로 사용자에게 모든 정보를 전달했을 때만을 히트수로 계산하게 됩니다. 에러가 나거나, 재 설정이 된 부분은 히트 수에서 제외하는 방법을 사용합니다. 

Visits
어떤 사이트에 이용자가 방문한 횟수를 말합니다. 방문객이 일정 시간 동안 어떠한 새로운 정보도 요청하지 않는 경우에는 이를 타임아웃이라 하며 타임아웃이후의 요청에 대해서는 새로운 Visits으로 계산됩니다. 주로 세션을 이용한 방문자계산이 이에 해당됩니다.

Web Usability
Use와 Ability의 합성어로 이용자가 인터넷 사이트를 얼마나 편리하게 사용할 수 있는 가에 대한 방법론을 말하며 인터넷 사용성이라고 말하기도 합니다. 

XML
기존의 고정된 태그로 되어있는 html의 단점을 극복하고, 개발자가 임의로 자신만의 특정한 태그를 만들어 사용하여, 구조적인 문서를 만들 수 있도록 하는 언어를 말합니다. 

1. 증분 탐색 (Incremental Search) 

Incremental Search로 검색하면 '증분 탐색'이라고 번역이 되어 있는데 '순간 검색'이라고 용어가 통일되어 사용되는 추세입니다. 기본적인 의미는 '자동 완성'과 구별됩니다. 사용자가 특정 단어를 검색하기 위해 검색어를 입력할 때, 검색어를 예상해서 리스트로 제공하는 화면을 '자동 완성'이라고 한다면, 사용자가 목표 검색어를 입력하기 전에 검색어를 예상하고 제공하는 결과 화면은 '순간 검색'입니다. 주요 검색 엔진을 통해 해당 기능을 간단하게 비교해 보도록 하겠습니다. 

구글의 Instant Search/Instant Previews
구글의 '순간 검색(Instant Search)'은 검색어를 입력하는 동시에 결과 화면이 나타납니다. 그렇기 때문에 타사의 방식처럼 검색어를 입력한 후 '엔터키' 혹은 '검색' 버튼을 누를 필요가 없습니다. 또한 각 검색 결과 옆에 위치한 Cue를 선택할 시 해당 웹페이지의 미리 보기 화면이 나타나는데 이를 '순간 미리보기(Instant Previews)'라고 합니다. 그리고 이 미리보기 화면에서 링크와 관련된 정보라고 판단되는 부분에 Highlight 표시(붉은색 박스)와 간단한 캡션이 제공됩니다. 구글이 야심차게 내놓은 순간 검색 서비스는 메인 화면을 되도록 빨리 벗어나게 하기 위한 구글의 의도가 잘 반영된 결과물이며, 실제로 검색에 소요되는 시간을 획기적으로 단축하는 데 기여했다고 보여집니다. 

네이버의 정답형 자동 완성
반면 네이버는 '정답형 자동 완성'기능을 제공하고 있습니다. 검색어를 입력했을 때 자동 완성 영역에 추천 검색어 뿐만 아니라 관련 결과값이 함께 나타나도록 만든 것인데요. 자동 완성과 순간 검색의 장점(검색 결과가 실시간으로 제공됨)을 혼합한 하이드리드 형태라고 볼 수 있겠네요. 예를 들어 사용자가 검색 필드에 '부산광역시 지역번호'를 입력할 시 자동 완성 영역에 실제 지역번호인 '051'이 제공됩니다. '페이스북'을 입력하면 바로가기 URL이 리스트에 제공됩니다. 아래 화살표 키를 눌러 포커스를 맞춘 후 Enter 키를 누르니 페이스북 홈으로 바로 이동합니다. 마우스를 사용하지 않고 원하는 경로로 바로 이동할 수 있는 점이 편리하게 느껴졌습니다. 모든 검색어에 적용되는 것은 아니고 현재는 시험적으로 국가, 지역번호, 공공기관, 학교 등과 같은 공적인 기관 혹은 로또 당첨 번호에 우선 적용하고 있다고 합니다.

야후의 Search Direct 
야후 역시 '서치 다이렉트'라는 검색 서비스를 제공하고 있습니다. 입력하지 않고 커서만 올려놓은 상태에서는 인기 검색어 랭킹이 나오다가(네이버에서는 최근 검색어가 보여지는데 반해), 입력하는 동시에 좌측에는 추천 검색어 영역, 우측에 현재 포커스된 추천 검색어에 대한 추천 결과가 나타납니다. 이 추천 결과에 외부 링크를 나열하기보다는 자체 컨텐츠에서 꺼낸 해답을 직접 제공하는 것이 서비스의 기본 아이디어입니다. 기존 결과 화면에서 일일이 링크를 클릭하여 결과를 얻는 것과는 다르게, 이용자가 원하는 정답을 직관적으로 제공한다는 점에서 타 검색엔진과는 차별화된 시도가 엿보입니다.

그 외에 뮤직 검색의 경우 아티스트, 앨범, 곡 3가지의 카테고리에 따른 추천 검색어를 표시합니다. 아티스트를 입력했지만 기대하지 않았던 관련 앨범 정보와 대표곡명을 함께 알려주기 때문에, 이용자 입장에서 얻는 컨텐츠를 생각한다면 역시 일반적인 자동 완성에서 한 단계 더 나아갔다고 볼 수 있습니다. 
도서 검색의 경우 야후의 Search Direct와 유사한 형태로 제공합니다. 내가 찾는 책이 소설인지, 언제 출판되었는지, 가격이 얼마인지, 얼만큼 할인된 가격인지, 구입하면 얼만큼 적립되는지, 그리고 마지막으로 '장바구니 담기'버튼까지 제공되고 있네요. 
이렇게 조금씩 다른 형태로 존재하며 각 검색 엔진마다 지향하는 바는 분명 조금씩 다릅니다. 하지만 크게 보았을 때 '얼마나 이용자가 원하는 정보를 빠른 시간 내에 정확히 안내할 것인가'라는 큰 공통된 줄기를 읽을 수 있습니다. 

모바일에서의 순간 검색
사실 Incremental Search는 우리가 피처폰(Feature Phone)에서부터 사용했던 방식입니다. 주소록에서 이름을 입력하면 아래에 관련 결과가 리스트로 제공되고 선택하는 일련의 과정은 우리에게 매우 익숙합니다. 스마트폰에서도 웹 검색 뿐만 아니라 애플리케이션에 이런 순간 검색을 기본으로 탑재하고 있습니다. 

2. 컨텍스트 메뉴(Context Menu)
사용자가 현재 선택한 항목에 관한 메뉴를 팝업 형식으로 제공하는 것을 컨텍스트 메뉴라고 합니다.. '팝업 메뉴' 혹은 '바로 가기 메뉴'라고도 하며 보통 마우스 오른쪽 단추를 누를 시 메뉴가 호출됩니다. 단추가 하나 밖에 없는 마우스를 사용하는 경우 키보드 클릭 조합(Mac OS의 Ctrl+Click)을 사용할 수 있습니다. (피츠를 알려주는 퀴즈에서 이 컨텍스트 메뉴에 관해 Magic Pixel을 잘 활용한 예라고 소개한 바 있습니다.)

3.MRU(Most Recently Used) 리스트
사용자가 특정 종류의 행위를 했을 때 마지막 행위를 레지스트리에 기록해두는 것을 말합니다. 예를 들면, 인터넷 상에서 파일 다운로드 시 마지막으로 저장했던 폴더를 기본 폴더로 보여주거나 윈도우 시작 메뉴에서 특정 응용프로그램 리스트를 확장할 시 보여지는 최근 항목을 예로 들 수 있습니다. 

4.어뎁티브 메뉴(Adaptive Menu) 
MRU 리스트 개념을 메뉴에 도입한 방식으로, 사용자의 검색 히스토리나 빈도수가 높은 항목들을 메뉴에 우선적으로 나타나게 하는 것을 말합니다. 위 화면과 같이 자주 쓰는 메뉴만 보여지며 확장 버튼을 눌러 모든 메뉴를 확인할 수 있습니다. MS Office Tool 2000, 2003에서 기본 설정으로 제공되다가 리본 메뉴가 출현하면서 현재는 폐기되었습니다.

5.테어오프 메뉴(Tear-off Menu) 
'떼어내다, 벗기다'의 의미를 가진 테어오프 메뉴는 메뉴 바를 드래그하여 임의의 장소에 배치할 수 있는 메뉴입니다. 혹은 아래의 그림처럼 도구 툴의 가장자리에 있는 Cue를 선택할 시 해당 도구가 Window형식으로 분리됩니다.

6.메가메뉴(Mega Drop-down Menu) 
얼마 전 pxd에서 포스팅한 Global Navigation Bar 디자인에서도 메가 메뉴에 대한 소개한 바가 있듯이, 메가 메뉴란 글로벌 내비게이션 바(GNB)에 위치한 특정 메뉴에 마우스 롤오버 했을 시 나타나는 대형 메뉴를 말합니다. 일반적인 드롭다운 메뉴보다 훨씬 많은 메뉴를 표시할 수 있으며 메가 메뉴 안에서도 상세 분류를 할 수 있습니다. 카테고리를 명확하게 분류하여 메뉴를 찾기 쉽도록 기획해야 하며 주로 쇼핑몰 같은 대형 웹사이트에 적용됩니다.

요즘은 메가 메뉴에 텍스트와 이미지를 혼합하는 방식이 많이 사용되고 있습니다. 확실히 이미지를 적절한 상황에 잘 사용했을 때 메뉴를 인지하기가 한결 수월하게 느껴집니다. 또한 단순히 메뉴를 나열하는 데그치지 않고 표시하는 정보도 유연해지고 있습니다. 위의 그림처럼 BMW는 자사의 모델명을 글로벌 내비게이션에 배치하고 메가 메뉴에 해당 모델 시리즈를 소개하고 있습니다. 기존 메뉴와 차별화된 점이 매우신선했습니다. 그렇다면 메가 메뉴의 몸집이 이렇게 커지는 것이 좋은 일일까요? 메뉴에 마우스를 드래그하는 동작으로 사용자가 기대하는 것은 그렇게 큰 역할은 아닐 것이라는 생각이 듭니다. 화면을 반 이상가린다거나 너무 많은 정보를 표시하려고 한다면 답답하거나 거부감마저 들 수 있을 것입니다. 언제까지나 '사용자가 목표 메뉴를 찾아가기 쉽게 구성해야 한다'는 기본 목적에 충실해야 한다는 점을 염두해두어야 합니다. 


7.컨텍스트-센서티브 내비게이션(Context-sensitive Navigation) 
특정 상황에서만 제공되는 컨트롤입니다. 위에서 정의한 컨텍스트 메뉴와도 맥락이 유사한데, 팝업 형태가 아닌 다양한 방식으로 사용될 수 있다는 점이 다릅니다. 위의 화면처럼 사진 상단에 있는 메뉴 버튼은 평소에는 나타나지 않다가 마우스 포인터를 해당 사진 영역 안에 옮기는 순간 나타납니다. 리치 인터페이스 디자인 서적에서는 '마우스오버 노출도구' 라고도 정의하였는데 포함되는 개념입니다. 혹은 Gmail에서 삭제, 스팸처리 등의 메뉴는 메일 리스트를 선택(Check)하였을 시에만 제공되는데요, 이렇게 상황에 맞게 그때 그때 나타나는 메뉴를 부르는 용어입니다.

---

여기까지 주요 패턴을 알아보았는데요, 이어지는 포스팅에서도 몇 가지 패턴을 더 소개할 예정입니다. 

 [참고]
 About Face http://books.google.co.kr/books/about/About_Face_3.html?id=9F7gaZKd2rYC&redir_esc=y
 Designing Interface http://designinginterfaces.com/patterns/
 안드로이드 디자인 가이드 http://klutzy.github.com/android-design-ko/
 99 Designs http://wsblog.99designs.com/designer-blog/2012/06/20/7-user-interface-design-trends-you-need-to-know-about/

1탄 기본적인 전통 UI 용어와 2탄 최근 웹에서 많이 사용되는 UI 용어에 이어, 이번에도 웹과 앱에서 많이 사용하는 UI 용어를 좀 더 알아보도록 하겠습니다.

1. 라이트 박스(Light Box) 
팝업이 뜨는 동시에 백그라운드 화면이 어두워지거나 밝아지는데, 이를 '라이트 박스'라고 부릅니다. 라이트 박스 처리된 영역은 컨트롤 할 수 없으며 사용자가 대화 상자에 집중해야 한다는 시각적인 알림을 제공합니다. 일종의 Modal Dialog(혹은 Modal Window)라고 할 수 있습니다. 일반적인 팝업과 다른 점은, 박스를 해제하지 않고는 배경의 요소와 인터랙션 할 수 없다는 점입니다.

 

2. 토스트 팝업(Toast Pop-up)
마치 토스터기에서 토스트가 나오는 모양과 같다고 붙여진 이름입니다. 알림을 위한 팝업의 일종으로, PC에서는 주로 모니터의 우측 하단에서 몇 초간 나타났다가 사라지는 형태를 취하며 모바일의 경우 화면의 중앙에 주로 위치하거나, 최상단에 나오는 경우는 '토스트 노티피케이션(Toast Notification)'이라고 불립니다. 화면 중앙에서 무언가를 알려줄 경우, 작업자의 현재 작업을 너무 많이 방해하게 되고, 그렇다고 PC 하단의 태스크 바나 핸드폰 상단의 노티피케이션 바에서만 표시될 경우 너무 눈에 띄지 않는 단점을 극복하기 위하여 중간적인 형태를 띠고 있는 알림이라 많이 선호되고 있습니다. 

3. 프로그래스 인디케이터(Progress Indicator)
컨텐츠가 로딩되고 있음을 시각적으로 알리는 컨트롤입니다. 크게 로딩이 완료되는 시기를 예측하기 어려운(Indeterminate), 예측이 가능한(Determinate) 두 타입으로 나눌 수 있습니다. 

트로버(Throbber)
로딩이 완료되는 시기를 예측하기 어려운 경우 제공되는 컨트롤입니다. 개별 애플리케이션이 로딩되는 경우, 주로 해당 소프트웨어나 웹브라우저의 메뉴바 혹은 툴바에 위치하는데 '트로버(Throbber, 고동치는 것)' 또는 '스피닝 휠(Spinning Wheel, 돌아가는 바퀴)'라고 부릅니다. 

아워글래스(Hourglass)
시스템 전체가 로딩 중일 경우 마우스 포인터가 바뀌는 것을 흔히 경험할 수 있습니다. 프로세스가 끝날 때까지 어떤 것도 클릭할 수 없다는 상황을 알립니다. '아워글래스(Hourglass, 1 시간짜리 모래시계)'라고 하며 Mac에서 사용되는 무지개 빛깔의 로딩 컨트롤의 경우 '스피닝 핀휠(Spinning Pinwheel)'이라고도 부릅니다.

프로그래스바(Progress Bar)
반면, 로딩이 완료되는 시기를 예상할 수 있을 때는 아래와 같은 타입의 인디케이터를 제공합니다. 현재까지 진행된 정도와 남은 양을 모두 확인할 수 있습니다.

 
프로그래스 바는 아래와 같이 로딩이 완료됨을 예측할 수 없을 때도 사용됩니다. 패턴이 애니메이팅되면서 Throbber와 마찬가지로 무엇이 진행되고 있음을 사용자에게 알립니다.

 
아래 그림처럼 상황에 따라 전환될 수 있으며 로딩이 완료된 후에는 반드시 완료되었음을 시각적으로 표시해야 합니다.

 
그 외 크롬의 경우 하단 패널에 파이 형태로 다운로드 상태를 표시하거나 Task Bar에 직접 다운로드 상태를 표시하기도 합니다.

 


4. 레이블(Label) / 플레이스홀더(Placeholder) 
두 컨트롤은 아래 그림에서 보면 알 수 있듯이 사용자에게 무엇을 입력해야 하는 지를 알려주는 역할을 합니다. '레이블(Label)'은 보통 텍스트 필드 좌측에 단어(주로 간략한 명사)로 제공됩니다. '플레이스홀더(Placeholder)'는 텍스트 필드 안에 새겨져 있는 입력 도우미로서 짧은 구문 형식으로 제공되며 '인풋 프롬프트(Input Prompt)'라고도 불립니다. 플레이스홀더는 진입 시에 제공되지만 문자를 입력하는 순간 사라집니다. 하지만 꽤 많은 경우는 첫 글자를 입력하는 순간이 아니라, 마우스로 클릭만 해도 (즉 포커스가 간 순간) 사라지는 형태를 취하고 있는데, 이 경우 사용자가 레이블을 읽지 않고 무심코 클릭하는 경우 무엇을 입력해야 할 지 난감한 상황이 올 수 있으므로 설계 시 고려해야 합니다. 또한 입력했을 때만 지워지고 입력을 지우면 다시 나타나도록 하여 길을 잃지 않도록 끝까지 안내하는 것이 중요합니다. 

HTML5 표준 가이드에 따르면 플레이스홀더 영역에 들어가야 할 문구는 레이블과는 성격이 달라야 한다고 규정하고 있습니다. 위의 그림처럼 레이블이 '무엇'을 입력해야 할 지를 알려준다면 플레이스홀더 자리에는 '어떻게' 입력해야 하는 지를 예시로 보여주는 것과 같습니다. 하지만 요즘에는 플레이스홀더 자리에 힌트 대신 레이블이 대신 들어가는 방식으로 많이 쓰이고 있는데요(아래 화면 참고), 레이블을 위한 공간이 별도로 필요하지 않으므로 효율적인 공간 활용을 위해 널리 사용되고 있습니다.
Input Box 내의 레이블과 HTML5의 플레이스홀더 사용에 관해 명쾌하게 잘 정리한 블로그(Labels in input fields aren't such a good idea by Laura Kalbag)를 참고하세요. 

5. 인트리깅 브랜치 (Intriguing Branches)
기대하지 않은 곳에 이용자가 관심 있어할 만한 키워드를 하이퍼링크 형태로 제공하는 것을 뜻합니다. 대표적인 예로 글의 본문에 특정 단어 혹은 구절에 링크가 있는 경우가 있으며, 좀 더 구조화된 방법으로 글 작성시 첨부하는 태그나 관련 제품 리스트 등을 나열하는 형태로 제공할 수 있는데요. 때론 글에 관련된 정보를 제공하기 위한 목적으로 사용되고, 사실 그보다 더 자주 상업적인 목적으로 사용됩니다. 기본적으로 인트리깅 브랜치는 이용자의 주의를 끌기 위해 존재하며 잘 사용되었을 때는 사이트에 오래 지속하는 효과를 가져다줍니다.적극적으로 링크를 눌러보는 호기심 많은 이용자 외에도 목적을 달성하고 빨리 완료하고자 하는 사람에게는 스쳐 지나갈 수 있게 설계하는 것이 무엇보다 중요합니다. 또한 인트리깅 브랜치로 관심을 끌려면 무엇을 링크할 것인지, 어떻게 관심을 끌 것인지를 전략적으로 생각해야 합니다. 이를 위해서 Target Audience가 무엇을 관심있어하고 그렇지 않은 지 파악하는 것이 중요하다고 할 수 있습니다. 네이밍도 인트리깅 브랜치에서 매우 중요한 역할을 합니다. Designing Interface 서적에서는 'Help'보다는 'Learn More'같은, 보다 친근하고 본능적인 호기심을 자극하는 언어를 사용하기를 권장하고 있습니다. 마지막으로 이용자는 링크를 클릭했다가도 언제든 처음에 보고 있던 페이지로 쉽게 돌아갈 수 있는 것을 원합니다. 브라우저에서는 '뒤로가기 '버튼을 통해 제공하거나 팝업의 경우 '닫기' 버튼을 제공하며 새로운 브라우저 창을 띄워주는 것도 좋은 방법입니다.

 

---

여기까지 주요 패턴을 알아보았는데요, 다음 포스팅에서는 모바일에서 쓰이는 컨트롤에 대해 정리해보려고 합니다. Apple, Android, MS 등 각 제조사에서 제공하는 가이드라인을 비교하면 분류하는 기준도 조금씩 다른데요, 이러한 점을 짚어보고 정의해보도록 하겠습니다. 

 [참고]
 About Face http://books.google.co.kr/books/about/About_Face_3.html?id=9F7gaZKd2rYC&redir_esc=y
 Designing Interface http://designinginterfaces.com/patterns/
 안드로이드 디자인 가이드 http://klutzy.github.com/android-design-ko/
 클리어보스 http://www.clearboth.org/how_to_use_placeholer/
 위키피디아 http://en.wikipedia.org/wiki/Progress_indicator
 99 Designs http://wsblog.99designs.com/designer-blog/2012/06/20/7-user-interface-design-trends-you-need-to-know-about/