IT 기획
웹기획시 알아두면 유용한 기능명
플랜데버
2024. 4. 14. 11:19
StoryBoard 나 WireFrame 을 작성하다 보면 기능명을 써야 할 때가 있습니다.
난감해 하지 말고 참고 해서 작성하세요~
CTA | CALL TO ACTION - 목표달성버튼 |
BreadCrumb | 사이트나 웹앱에서 유저의 위치를 보여주는 부차적인 내비게이션 시스템 |
Disclaimer | 부인설명 |
USP Contents | Unique Selling Proposition |
Notification | 사용자가 확인 하지 않은 정보가 있을때 아이콘 형식으로 알려주는 알림 |
Instant Search | 순간 검색 , 검색어를 입력하는 동시에 결과 화면이 나타남 Instant Previews - 각 검색 결과 옆에 위치한 Cue를 선택할 시 해당 웹페이지의 미리 보기 화면이 나타나는데 이를 '순간 미리보기 (Instant Previews)'라고 한다. |
Search Direct | 입력하지 않고 커서만 올려놓은 상태에서는 인기 검색어 랭킹이 나오다가 입력하는 동시에 좌측에는 추천 검색어 영역, 우측에 현재 포커스된 추천 검색어에 대한 추천 결과가 나타납니다. (야후) |
Context Menu | 사용자가 현재 선택한 항목에 관한 메뉴를 팝업 형식으로 제공하는 것'팝업 메뉴' 혹은 '바로 가기 메뉴' 라고도 하며 보통 마우스 오른쪽 단추를 누를 시 메뉴가 호출된다. |
MRU 리스트 (Most Recently Used LIst) |
사용자가 특정 종류의 행위를 했을 때 마지막 행위를 레지스트리에 기록해두는 것. 예를 들면, 인터넷 상에서 파일 다운로드 시 마지막으로 저장했던 폴더를 기본 폴더로 보여주거나 윈도우 시작 메뉴에서 특정 응용프로그램 리스트를 확장할 시 보여지는 최근 항목 |
Tear-off Menu | 떼어내다, 벗기다'의 의미를 가진 테어오프 메뉴는 메뉴 바를 드래그하여 임의의 장소에 배치할 수 있는 메뉴이다. |
Mega Drop-down Menu (메가메뉴) | 글로벌 내비게이션 바(GNB)에 위치한 특정 메뉴에 마우스 롤오버 했을 시 나타나는 대형 메뉴. 일반적인 드롭다운 메뉴보다 훨씬 많은 메뉴를 표시할 수 있으며 메가 메뉴 안에서도 상세 분류를 할 수 있다. 카테고리를 명확하게 분류하여 메뉴를 찾기 쉽도록 기획해야 하며 주로 쇼핑몰 같은 대형 웹사이트에 적용된다. |
Context-sensitive Navigation | 사진 상단에 있는 메뉴 버튼은 평소에는 나타나지 않다가 마우스 포인터를 해당 사진 영역 안에 옮기는 순간 나타난다.(쇼핑몰에서 장바구니, 좋아요 등의 버튼) |
Light Box | 팝업이 뜨는 동시에 백그라운드 화면이 어두워지거나 밝아지는데, 이를 '라이트 박스'라고 부른다. 모달창 |
Toast Pop-up | PC에서는 주로 모니터의 우측 하단에서 몇 초간 나타났다가 사라지는 형태를 취하며 모바일의 경우 화면의 중앙에 주로 위치하거나, 최상단에 나오는 경우는 '토스트 노티피케이션(Toast Notification)'이라고 불린다. 화면 중앙에서 무언가를 알려줄 경우, 작업자의 현재 작업을 너무 많이 방해하게 되고, 그렇다고 PC 하단의 태스크 바나 핸드폰 상단의 노티피케이션 바에서만 표시될 경우 너무 눈에 띄지 않는 단점을 극복하기 위하여 중간적인 형태를 띠고 있는 알림이라 많이 선호된다. |
Progress Indicator | 컨텐츠가 로딩되고 있음을 시각적으로 알리는 컨트롤. 로딩이 완료되는 시기를 예측하기 어려운(Indeterminate), 예측이 가능한(Determinate) 두 타입으로 나눌 수 있다. |
Throbber (트로버) |
로딩이 완료되는 시기를 예측하기 어려운 경우 제공되는 컨트롤. 개별 애플리케이션이 로딩되는 경우, 주로 해당 소프트웨어나 웹브라우저의 메뉴바 혹은 툴바에 위치하는데 '트로버(Throbber, 고동치는 것)' 또는 '스피닝 휠(Spinning Wheel, 돌아가는 바퀴)'라고 부릅니다. |
Hourglass (아워글래스) |
시스템 전체가 로딩 중일 경우 마우스 포인터가 바뀌는 것. 프로세스가 끝날 때까지 어떤 것도 클릭할 수 없다는 상황을 알린다. '아워글래스(Hourglass, 1 시간짜리 모래시계)'라고 하며 Mac에서 사용 되는 무지개 빛깔의 로딩 컨트롤의 경우 '스피닝 핀휠(Spinning Pinwheel)'이라고도 부른다 |
Intriguing Branches (인트리깅 브랜치) |
기대하지 않은 곳에 이용자가 관심 있어할 만한 키워드를 하이퍼링크 형태로 제공하는 것. 대표적인 예로 글의 본문에 특정 단어 혹은 구절에 링크가 있는 경우가 있으며, 좀 더 구조화된 방법으로 글 작성시 첨부하는 태그나 관련 제품 리스트 등을 나열하는 형태로 제공할 수 있는데. 때론 글에 관련된 정보를 제공하기 위한 목적으로 사용되고, 사실 그보다 더 자주 상업적인 목적으로 사용됨. 기본적으로 인트리깅 브랜치는 이용자의 주의를 끌기 위해 존재하며 잘 사용되었을 때는 사이트에 오래 지속하는 효과를 가져다줍니다.적극적으로 링크를 눌러보는 호기심 많은 이용자 외에도 목적을 달성하고 빨리 완료하고자 하는 사람에게는 스쳐 지나갈 수 있게 설계하는 것이 중요함 또한 인트리깅 브랜치로 관심을 끌려면 무엇을 링크할 것인지, 어떻게 관심을 끌 것인지를 전략적으로 생각해야 하며. 이를 위해서 Target Audience가 무엇을 관심있어하고 그렇지 않은 지 파악하는 것이 중요. 네이밍도 인트리깅 브랜치에서 매우 중요한 역할을 하는데, 'Help'보다는 'Learn More'같은, 보다 친근하고 본능적인 호기심을 자극하는 언어를 사용하기를 권장한다. 마지막으로 이용자는 링크를 클릭했다가도 언제든 처음에 보고 있던 페이지로 쉽게 돌아갈 수 있는 것을 원하므로 브라우저에서는 '뒤로가기 '버튼을 통해 제공하거나 팝업의 경우 '닫기' 버튼을 제공하며 새로 브라우저 창을 띄워준다. |
Splash Screen - | 프로그램을 로드하는 동안 표시되는 이미지. 평균 2~3초간 지속되는 시간동안 애플리케이션의 로고와 함께 앱에 대해 간략한 소개를 하거나, 로딩 진행률을 애니메이션으로 표시하기도 한다. Splash Screen에 사용되는 로고나 텍스처를 통해 애플리케이션의 아이덴티티를 표현할 수 있어야 한다. |
Coach Marks / Empty Data / Walkthroughs | 도움말을 제공할 수 있는 패턴. '이 앱이 얼마나 친절한가?'를 판단할 수 있는 하나의 요소가 될 수 있는데, 초기 진입 시에만 볼 수 있도록 설계하고 다음 진입 부터는 '설정'같은 메뉴 안에 두어 언제든 도움말을 호출할 수 있도록 한다. 🔻 Coach Marks : 앱을 처음 진입하는 사용자를 위해 간단한 도움말을 제공하는 패턴. 홈 화면 위에 반투명한 화면을 덮어 그 위에 각 메뉴에 대한 도움말을 표시하는 형태(ex은행 앱 처음 시작시 보이는 화면) Empty Data : 데이터가 없는 초기 상태를 표현하는 패턴. 빈 화면에 대한 처리는 중요한 요소. 아무것도 없는 빈 화면보다는 "데이터가 없습니다"라고 표시해주거나 그보다는 "이 공간은 어떤 역할을 하는 화면이고 제대로 쓰려면 어떻게 해야 합니다"라고 친절히 말해주는 것이 더 유용하다. Walkthroughs : Coach Mark보다 상세한 도움말을 뜻한다. Wizard와 같이 앱 초기 진입 시 몇 단계로 걸쳐 상세한 도움말을 제공한다. 긴 프로세스를 거치고 싶지 않는 사용자를 위해 본 단계를 건너뛰고 바로 홈 화면으로 진입 할 수 있는 경로를 주는 것이 중요하다. |
Launcher | (=Dashboard, Springboards) - 응용 프로그램 혹은 앱의 경우 메뉴의 진입점을 아이콘 등으로 표시하는 방식. 기능 혹은 카테고리로 메뉴를 분류하며 새로운 컨텐츠를 강조한다. 스마트폰 초창기 시절 모바일 앱의 메인 화면에서 많이 쓰다가 현재는 Drawer와 같은 패턴을 많이 쓰는 추세임. Hub와 같은 역할을 하여 메뉴를 한 눈에 볼 수 있고 쉽게 제어할 수 있다. 하지만 모든 메뉴가 동일한 우선 순위를 가진 것처럼 느껴질 수 있으며 메뉴의 개수가 많을 경우 한 화면 안에 표시할 수 없는 단점이 있다. |
Drawer(=Sliding Menu, Side Bar) - | 평상시에는 닫혔다가 당길 때 열리는 서랍과 같다고 'Drawer'라고 부르기도 하며 슬라이딩되면서 나오는 모션에서 착안하여 'Sliding Menu'라고도 불린다. 일반적으로 앱의 최상위 메뉴를 표시 하며, 최근 활동이나 알림 등 각 앱의 부가적인 기능을 모아볼 수 있는 공간으로 쓰인다. Drawer 패턴의 가장 큰 장점은 리스트 기반의 다양한 메뉴를 표시할 수 있다. (Tab Bar의 경우 일반적으로 메뉴가 5개가 넘어가는 경우 More메뉴 안에 숨겨야 하는 한계가 있다. Launcher 역시 터치 영역을 확보하기 위해서 가급적 9개 이상의 메뉴를 표시하지 않는다. ) |
Swipe Paging / SwipeView (Android) / Flip View (Windows8) |
최상위 메뉴 혹은 상세 화면을 좌우로 Swipe하여 항목을 이동한다는 큰 개념은 같지만 이 패턴에 관한 정의가 각 OS에 따라 조금씩 다름. 🔻 Swipe Paging (=Filmstrip) : 최상위 레벨의 페이지를 나란히 정렬하는 방식을 말합니다. 한 번에 한 페이지씩 볼 수 있으며 사용자는 Swipe동작으로 페이지를 이동한다. 이 패턴을 사용할 시 중요한 점은 현재 페이지의 위치 정보를 주어야 한다. 대표적으로 Dot Indicator가 쓰임. 하지만 페이지 확장성이 제한적이라는 단점이 있다. 페이지가 많아질수록 사용성은 떨어지게 된다. Swipe View : 상세 화면간 이동을 위해 사용할 것을 제안하고 있으며 또 한가지는 Tab 간 이동 시에 사용된다. 이는 요즘 모바일 웹에서 사용되는 패턴과 동일한데. Tab을 터치하여 이동하는 방법 외에 Swipe 동작을 통해 이동할 수 있도록 한다. Flip View : 상세 화면에서 사용하며 항목을 전환하는 반복적인 동작이 사용자에게 짜증을 일으킬 수 있기 때문에 최상위 화면에서는 지양할 것을 권한다. |
Split View (iOS) / Multi-pane Layout (Android) |
효율적인 공간 활용을 위해 태블릿에 탑재된 기본 패턴.폰에서는 목록(List View)과 그에 따른 상세 화면(Detail View)을 각각 따로 제공하는데, 넓은 공간의 특성 상, 태블릿에서는 두 화면을 결합하여 나란히 표시한다. 기본적인 원칙은 왼쪽 창에는 목록을 제공하며 오른쪽 창에는 현재 선택된 항목에 대한 상세 화면을 표시하는 것이다. 이 때, 현재 선택된 항목에 Highlight 표시를 하여 오른쪽 창과의 관계를 인지할 수 있도록 해야 한다. |
DCB - Direct Carrier Billing | 통신사와 직접 연동하는 휴대폰 결제 |