https://yozm.wishket.com/magazine/detail/1302/
https://yozm.wishket.com/magazine/detail/623/
https://yozm.wishket.com/magazine/detail/645/
-UI : 정보기기나 소프트웨어의 화면 등 사람과 접하는 면을 설계
-UX : 특정 정황과 목표를 갖는, 정보기기 / 서비스 사용자의 “느낌, 태도, 행동”
-Enabled : 상호작용이 가능한 상태일 때
-Disabled : 동작할 수 없는 비활성 상태일때 (어떤이유든)
-Hover : 마우스 또는 포인터가 올려진 상태일 때
-Focused : 키보드 또는 음성 등의 입력을 통해 강조된 때
-Pressed : 마우스 또는 포인터로 클릭/터치했을 때
-GNB : 일반적으로 웹사이트 최상단에 위치한 최상위 메뉴 ( Global Navigation Bar )
웹 전체에서 공통적으로 사용되는 메뉴
주요 메뉴로 빠르게 이동할 수 있는 링크를 포함함
웹의 이탈률과 전환율에 큰 영향을 미치는 메뉴
-LNB : GNB 메뉴를 누르거나 Hover 상태일 때 발생되는 소메뉴(Sub Menu)를 말함
사용자는 이 메뉴를 최상위 카테고리의 하위에 위치한 특정한 메뉴(페이지)로 이동
( Local Navigation Bar )
-Hero Banner : 웹사이트 메인 상단에 있는 대형 배너 이미지
헤더 영역에 눈에 띄게 배치되기 때문에 사용자의 주목을 끄는데 효과적
고객에게 전달하고 싶은 가장 중요한 컨텐츠를 등록하는 세션으로 쓰임
단순 이미지형, 슬라이드형 등 다양한 형태로 실험되는 영역
( Main Banner 라고도 불림)
-Drop Down List : 버튼을 클릭했을 때 세부항목들이 펼쳐지고, 그 중 하나의 항목을 선 택할 수 있는 요소. 주로 많은 값 중에서 하나(특정 값)를 선택할 때 사용됨
여러 항목들을 항상 나열된 상태로 두지 않고도 간결하게 표현할 수 있다는 장점
-모달, 팝업 : 모달은 기존에 열려있던 페이지 위에 새로운 레이어를 덮는 기능을 말한다.
팝업은 페이지 위에 또 하나의 브라우저 페이지를 띄우는 개념
모두 주의사항이나 공지 등 유저의 이목을 끌고 중요한 정보를 전달할 때 사용
단 팝업은 차단되는 경우도 있어서 필수적인 사항은 모달을 이용하는게 좋다.
-스낵바, 토글, 툴팁
-스낵바 : 유저가 수행한 작업에 대한 결과(피드백)을 간단히 텍스트 레이블 형태 로 보여줌. 대략 4초 뒤 화면에서 자동으로 사라지며, 액션버튼이 함께 표시 된다는 점에서 토스트팝업과 차이가 있다.
-토스트 팝업 : 알림을 위한 팝업의 일종으로, PC에서는 주로 모니터의 우측 하단 에서 몇 초간 나타났다가 사라지는 형태 모바일은 화면 중앙에 위치
-토글 : 스위치(Switch)와도 많이 통용됨 설정 켜기/끄기와 같은 항목에 적용가능
-툴팁 : 특정 화면 요소에 마우스를 가져가면(Hovering) 나타나는 설명
Hover유지 시 계속 유지되며 부연설명할 때 유용함
-Input Field와 유효성 검사
사용자가 텍스트를 입력하고 편집할 수 있는 입력란을 의미한다. 해당 컴포넌트와 자주 활용되는 ‘유효성 검사’는 유저가 입력필수 요소를 생략했거나 정해진 양식에 맞춰 입력하지 않을 경우 오류상태를 표시하여 양식에 맞는 데이터 입력을 유도
-Checkbox : 체크박스는 여러개의 목록에서 값을 다중 선택해야 할 경우 자주 사용되는 컴포넌트이다. 하나 이상의 값(Value)을 다중 선택할 수 있다는 점에서
‘라디오버튼’과 차이를 보인다. 유저가 취할 액션을 사전에 고려하여 행동 여정에 더 적합한 요소를 적용하는 것이 좋다.
-Accordion : 내용을 펼쳤다가 접을 수 있는 컴포넌트, 리스트를 접기/펼치기 형태로 표현
메뉴를 쉽게 펼쳤다 접을 수 있기 때문에 효과적인 레이아웃 구축이 가능
-Bread Crumb : 사용자가 현재 위치를 시각적인 계층 구조로 나타내는 네비게이션
사용자가 지나온 위치를 포함하여, 현재 위치를 시각적 계층 구조로 나타냄
이를 통해 상위 또는 하위 페이지로 이동 가능
-튜토리얼 : 서비스앱 초기 실행시, 인터렉션 가이드나 해당 서비스를 안내하는 화면
그밖에 특정 기능 혹은 컨텐츠에 대한 추가 안내 혹은 설명할 경우 제공되는 기능
-도움말 : 특정 기능에 대한 사용자의 학습성, 인지성을 고려하여 위치와 세부 UI를 결정
-온보딩 : 사용자가 처음 접하는 시스템에 적응하도록 돕는 과정
점차적으로 익숙하게 하나씩 알게 만든다.
-로딩 : 프로그램 동작에 필요한 프로그램 그 자체와 리소스를 보조 기억장치(가령 하드디스크)에서 주기억장치(메모리)로 불러들이는 과정이다 //머리에 안남음
-앱 푸시 : 이벤트성 컨텐츠, 혹은 사용, 적립, 그 밖의 이슈 발생 시, 노출됨
안내 정책을 상세 기획 해당 UI를 tap하여 선택 시 상세화면으로 진입되는 구조
-서브화면 & 레이어 : 안내성 성격이나 간단한 UI스텝인 경우 레이어 팝업 사용
각 서비스의 정책을 보면 준수하고 있는 룰이 있으므로 해당 규칙에 따라 설계
서브화면 : 뒤로가기 버튼 소유 레이어팝업 : 닫기 버튼 소유
(레이어팝업 : 페이지 위에 하나의 layer를 쌓아서 보여주는 창 오늘 하루동안 안보기 체크)
-GUI & UI : 사용자가 직접적으로 접촉하게 되는 매개체이며, 대중에게 가장 익숙한 UI가 GUI. 시각적으로 보여지는 UI로 비주얼적으로 그래픽 요소를 디자인하여 넣는 과정에서 사용 (GUI : 그래픽 유저 인터페이스)
-시스템 팝업 : OS(ios/Aos)에서 제공하는 팝업
알럿 (Alert), 또는 컨펌창 (Confirm)이라고도 불리며 말 그대로 기기 또는 브라우저의 시스템에서 규격이 정해진, 별도의 디자인이 필요하지 않은 팝업창
(OS : 사용자에게 편리한 인터페이스 환경을 제공하고 컴퓨터 시스템의 자원을
효율적으로 관리하는 소프트웨어)
-레이어 팝업 : 보통 안내성 컨텐츠를 담고 있거나 풀팝업 형태로 제공하는 레이어
DIV 태그를 이용한 방법으로 사용자가 팝업 수행을 요청하면 DIV 영역을 제외한 부분의 명암이 어두워지면서 팝업이 띄워지는 형태
-Alert창 : “확인” 버튼만 제공하여 사용자에게 확인을 요하는 경우
-confirm창 : 취소와 확인 버튼만으로 사용자가 해당기능을 수행하기 전 의견을 묻는 용도
-Native : 네이티브 앱설계는 OS별로 특화된, 최적화된 UI를 설계하는 경우 OS별로 각각
-Hybrid : 네이티브만큼 OS에 최적화된 상태는 아니지만 수정 보완작업 측면에서 생산성 과 효율성을 높이는 방식
-라벨링 : 사전의미 그대로 용어를 의미하며 기획 설계 시, 해당 용어를 영문으로 표기할 것인지, 한글로 표기할 것인지 명칭을 정하는 것
해당 문서에서 어떻게 제공할 것 인지 약속하는 의미
-UI템플릿 : 패턴의 규격이 반복되는 경우 개별로 작업하지 않고, UI와 레이아웃을 유형화 하여 기획 및 설계하는 케이스
-백오피스 : 상품등록, 마케팅설정, 결제와 매출, 수익 등
앱 서비스 기능을 관리하는 페이지 / 페이지 전산운영지원 시스템
-하드 키 & 소프트 키
-하드 키 : 물리적으로 만져지는 리모컨, 또는 버튼을 의미
-소프트 키 : 인터페이스에서 보이는 버튼
(인터렉션 : 둘 이상의 물체나 대상이 서로 영향을 주고받는 일종의 행동)
-글로벌 키 : 사용 빈도수 가장 높은 키(버튼) Ex)메뉴 호출 버튼, Home버튼같은 주요기능
-아코디언 UI : 고정 초기영역에 많은 정보를 보여주고 사용자가 페이지 전환 없이
상세정보를 확인하도록 돕는 UI 접힘/펼침 형식이 있다.
-시뮬레이션UI : 사용자가 직접 UI를 조정하여 가상의 상태를 만들어보는 케이스
멤버십 화면에서 등급이나 혜택을 예상해볼 때 가상으로 시뮬레이션하여
자신이 받을 혜택을 가늠해보는 경우
-Disabled & activated : UI가 활성화되어 있는지 아니면 비활성화되어 있는지 확인
비활성화 상태일 때 선택하면 검색바가 활성화되며 검색바에 포커스가 되어있고
키패드가 호출됨 또한 커서가 깜빡거리며 검색이 가능함을 사용자에게 알려줌
-Read - only & Disabled : 데이터가 출력되어 다른 기능 수행이 없는 경우를 일컫는다.
데이터가 정상적으로 출력되는지 확인만 해주며 Disabled(비활성화)와 다르게
인풋 필드도 제공하지 않는 케이스
-Focus move : 메뉴나 아이템을 이동시키는 과정. 즉 리스트 항목을 탐색하는 과정에서 나타나는 UI 아웃라인 //자세히 모르겠음
-Indicator & Dot Indicator : 시각적인 지침, 즉 사용자에게 안내하는 UI를 의미
Dot을 사용하는 빈도가 가장 높다.
Dot Indicator란 흔히 다수의 광고 배너나 컨텐츠를 한 영역안에 보여질 때 현재 몇 번째 컨텐츠인지 보여질 때 노출되는 UI (틱톡 사진 여러장 넘길때 점들)
-Sorting & Filter UI : 아이콘 형태의 버튼을 선택 시, 아래 하단 영역에 옵션 조절하는 영역이 열리거나, 슬라이드(레이어)가 좌에서 혹은 우 방향으로 노출되거나 혹은 바텀 시트가 위로 호출되는 방식.
원하는 정렬에 맞춰 맞춤형으로 상품을 정렬하여 결과를 확인 가능
-디바이스 연결 - 윈도우? 로컬기기?
특정 서비스 사용 중 다른 디바이스를 연결하는 경우, UI Flow를 설계해야 한다.
“윈도우에서” 또는 “로컬에서”로 명시하면 된다.
(UI Flow : UI 흐름
UI 흐름은 시각 자료 (예 : 모양, 와이어 프레임) 대신 단어를 사용한다. 이것이 유용한 이유는 일을 쉽고 빠르게 화면을 전달하고 피드백을 받을 수 있다.
-디바이스 연동 - E.G.LBS (위치 사용하려고하는거 Ex : 네이버지도)
: 현재 위치를 탐색하여 날씨를 알려주거나 가까운 매장을 안내하는 케이스
주로 위치 탐색을 허용해주시는 컨펌 창이 노출되고 확인 후 해당 서비스 안내로 이어지는 형식. LBS, BT기능을 사용할 때 컨펌 또는 알럿 창 기획 잊지말것
(LBS : 위치 기반 서비스(Location-based service, LBS)는 무선 인터넷 사용자에게, 사용자의 변경되는 위치에 따르는 특정 정보를 제공하는 무선 콘텐츠 서비스)
(BT : 블루투스 기능)
-History Back (뒤로가기 버튼누르면 이전화면 불러오는 것의 기억)
: 서브화면 위 상단 타이틀바에 “Back"버튼을 누르거나 OS에서 제공되는 "Back Key"를 호출하셨을 때 이전 화면을 기억하는 경우
유사 경쟁 서비스 업체가 이전화면을 몇 개정도 기억하는지 리서칭 후 개발자에게 제안하는걸 추천
클라이언트와 서버
-요청하는 쪽을 클라이언트, 요청에 대한 답을 해줘야하는 쪽을 서버라고 부름
쿠키(브라우저에저장) : 유저들의 효율적이고 안전한 웹 사용을 보장하기 위해 사용
웹사이트 접속 시 접속자의 개인장치에 다운로드 되고 브라우저에 저장되는 텍스트 파일
웹사이트는 쿠키를 통해 접속자의 장치를 인식하고 접속자의 설정과 과거 이용내역에 대한 일부 데이터를 저장
사용자에 의해 조작되어도 크게 상관없는 정보를 브라우저에 저장
세션 쿠키 : 브라우저를 닫는 경우 자동으로 삭제되는 쿠키
지속적 쿠키 : 수동으로 삭제되기 전까지 남아있는 오랜기간 동안 저장되는 쿠키
캐시 : 웹의 빠른 구동을 위해 자주 사용하는 데이터나 값을 미리 저장해 놓는 임시 장소
저장 공간이 작고 비용이 비싼 대신 빠른 성능을 제공
이미지 등을 리소스 파일을 미리 저장해 트래픽을 줄이고 로딩을 빠르게 하는데 쓰임
Cache는 아래와 같은 경우에 사용을 고려하면 좋다.
접근 시간에 비해 원래 데이터를 접근하는 시간이 오래 걸리는 경우
(서버의 균일한 API 데이터)
반복적으로 동일한 결과를 돌려주는 경우(이미지나 썸네일 등)
세션(서버에서저장) : 사용자나 다른 누군가에게 노출되어서는 안 되는 서비스 제공자가
직접 관리해야하는 정보들은 서버 안 세션에 저장 (세션남발하면 서버에 부하가 걸림)
인증에 대한 정보를 서버가 저장
Local Cache
Local 장비 내에서만 사용되는 캐시로, Local 장비의 Resource를 이용한다.
Local에서만 작동하기 때문에 속도가 빠르다.
Local에서만 작동하기 때문에 다른 서버와 데이터 공유가 어렵다.
Global Cache
여러 서버에서 Cache Server에 접근하여 사용하는 캐시로 분산된 서버에서 데이터를 저장하고 조회할 수 있다.
네트워크를 통해 데이터를 가져오므로, Local Cache에 비해 상대적으로 느리다.
별도의 Cache서버를 이용하기 때문에 서버 간의 데이터 공유가 쉽다.
클라우딩 컴퓨팅 : 클라우드 컴퓨팅은 컴퓨팅 리소스를 인터넷을 통해 서비스로 사용할 수 있는 주문형 서비스입니다. 기업에서 직접 리소스를 조달하거나 구성, 관리할 필요가 없으며 사용한 만큼만 비용을 지불하면 됩니다.
! 마케팅 관련 용어
PV : Page View 페이지 방문 수를 의미
UV : Unique view : 사람당 중복을 제외한 페이지 방문 수, 순수 방문 수
인프라 : 기본적으로 개발이나 서비스를 하기 위에 물리적으로 구성된
Network, DB, Server, Cloud 등을 의미 즉, 데이터를 주고받기 위한 물리적 장비를 의미
크게 하드웨어, 소프트웨어, 네트워킹으로 구분되며 요즘 시대의 인프라는 온프레미스 형태가 아닌 클라우드 형태로 IaaS 서비스를 많이 이용한다. 이는 인프라를 서비스 형태로 제공받는 형식으로서, 비용절감과 유지보수에 용이하기 때문
(온프레미스(on-premise)는 IT 서비스를 운영하는 회사가 자체적으로 보유한 공간에 물리적으로 하드웨어 장비를 가지고 직접 운영하는 방식)
(IaaS : 클라우드 인프라 서비스라고도 하는 IaaS(Infrastructure-as-a-service)는 인터넷을 통해 최종 사용자에게 IT 인프라를 제공하는 형태의 클라우드 컴퓨팅)
CPM(Cost Per Mile) : 광고가 1000번 노출됐을 때 책정되는 금액 과금 방식
브랜드의 인지도와 참여도를 높이는데 가장 효과적
브랜드 가시성을 향상하려면 CPM을 선택
CPC : Click 광고 노출과 상관없이 한번 클릭시마다 과금되는 방식
웹사이트 방문이든 매출이든, 구매 전환을 향상하는데 가장 효과적
CPI : install 앱 설치 건당 과금 방식 많은 사용자/가입자 수를 위한 앱 다운로드에 효과적
CPA : Action 참여당 비용으로 앱 실행 시 앱안에서 특정 활동을 했을 때 광고비가 소진되 며 참여 1회당 비용으로 책정 앱사용을 위한 리텐션관리, 앱 내 구매, 이벤트참여 에 효과적
CPV : view 광고 시청당 비용 유튜브라고 생각하면 편함
CPP : period 기간을 고정하고 고정 광고비를 지불하는 방식
네이버 메인 1개월 노출 / 얼마 이런식
CTR(Click Through rate) : 클릭률, 광고 노출 횟수 대비 클릭이 일어난 횟수
DAU(Daily Active Users) : 하루동안 방문한 순수 사용자 수를 집계
WAU : Weekly 일주일 동안 방문한 순수 사용자 수를 집계
MAU : Monthly 한달(30)간 방문한 순수 사용자 수를 집계
PU(Paying Users) : 구매자(결제자) 수
! UI관련 용어
팝업창 : 새창을 여는 것을 의미
모달 / 바텀시트 : 화면을 전환한다기 보다는 이목을 집중해야 하는 화면을 다른 화면 위 로 띄워(Presenting) 표현하는 방식
얼럿(alert) : 사용자의 올바른 판단과 사용을 유도하기 위해 확인/취소 등의 버튼이 있는 경고창
토스트 : 사용자에게 짧은 메시지 형식으로 정보를 전달하는 팝업
워터폴 방식 : 단계로 나뉘어진 순차적 프로젝트 관리 방법론
-프로젝트의 최종목적이 명확하게 정의되어 있는 경우
-필요 기술이 파악되어 있는 경우
-모호한 요구사항들이 없는 경우
장점
-각 단계의 문서와 구조적 설계로 새로운 협업자가 팀에 합류하더라도 쉽게 적응 가능
-각 단계의 결과를 예측하기 쉽고, 평가 프로세스가 분명
-시간을 효율적으로 관리 가능
단점
-특정 단계의 문제가 발생할 경우 전체 타임라인에 영향을 줄 수 있음
-한 단계가 끝나면 전 단계로 역추적하기 어려움
-QA가 프로세스 후반에 진행됨
애자일 방식 : 날렵한 이라는 뜻으로 좋은것을 빠르게 취하고 낭비없게 만드는 방법론
-신속한 반복 작업을 통해 실제 작동 가능한 제품 / 서비스를 개발하여 지속적으로 제공하기 위한 방식
-문서를 통한 개발방법이 아닌 실질적인 코딩을 통한 방법론
애자일 선언문의 주요가치
-개인과 개인 간의 상호작용이 프로세스 및 툴보다 우선
-작동하는 소프트웨어가 포괄적인 문서보다 우선
-고객과의 협업이 계약 협상보다 우선
-변화에 대응하는 것이 계획을 따르는 것보다 우선
장점
-변화하는 요구사항을 수용하기 쉬움
-최종목표가 확실하지 않은 프로젝트에 용이
-사용자의 의견을 수용하기 쉬움
단점
-계획의 불확실성
-팀을 구성하기 어려움
-최종제품이 요구사항과 다를 수 있음
네이티브 앱 : 모바일 기기(디바이스)에 최적화된 네이티브 언어(개발언어)로 개발된 앱
(전화 측정 나침반 계산기 카카오뱅크)
장점
-빠르고 안정적이며 원하는 UI UX구현가능
-플랫폼(IOS,Android) API(카메라,GPS,주소록,생체인증 등)의 기능을 활용할 수 있음
단점
-플랫폼(IOS, Android) 간 호환이 되지 않기 때문에 별도로 개발이 필요함
-비용이 많이 들고, 개발시간이 많이 소요됨
웹앱 : 모바일 화면에 맞게 구성한 웹 (반응형 웹페이지)
(네이버앱 네이버웹 일부기능 앱으로 연결)
장점
-웹 개발 방식과 동일하여 빠르게 개발 가능
-다양한 플랫폼에서 실행 가능
-앱 배포 없이 기능을 자유롭게 수정 가능하여 유지보수가 용이
단점
-플랫폼 API를 활용할 수 없음
-네이티브 앱 보다 유려한 UI UX 구현이 어려움
하이브리드 앱 : 네이티브 앱과 웹 앱의 장점이 결합된 형태로
웹앱에 네이티브앱 프레임을 씌운형태
(토스 네이버 11번가 무신사 무신사스냅)
장점
-네이티브 API활용이 가능함
-웹개발 기술을 활용해서 앱을 개발 할 수 있음
단점
-앱 네이티브 기능에 접근하기 위해서는 플랫폼별 개발자가 필요함
API란? (Application Programming InterFace의 줄임말)
-응용 프로그램에서 사용할 수 있도록, 운영체제나 프로그래밍 언어가 제공하는 기능을
제어할 수 있게 만든 인터페이스
-프로그램간 데이터를 주고 받는 방법, 프로그램간에 소통하는 방법
프로그램(요청)-API(요청)-프로그램(응답-데이터전달)-API(응답-데이터전달)
코드들끼리 소통하기 위한게 API
API의 종류
1.Private API
-내부에서 사용되는 API로 회사 내부 자체 제품과 서비스 운영, 개선하기 위해서 사용되는 API
-외부 및 제 3자에게 노출되지 않음
2.Public API
-개방형 API로 오픈API라고 불림
-누구나 제한없이 API를 사용할 수 있는것이 특징
인터페이스란?(interface)
-컴퓨터 시스템끼리 정보를 교환하는 공유 경계
-터치스크린과 같은 일부 하드웨어 장치들은 인터페이스를 통해 데이터를 송수신할 수 있으며, 마우스 같은 장치들은 오직 시스템에 데이터를 전송만 하는 인터페이스를 제공함
JSON (JavaScript Object Notation)
-데이터를 저장하거나 전송할 때 많이 사용되는 DATA방식
-어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현방법
-용량이 작아서 XML을 대체해서 데이터 전송등에 많이 사용됨
서비스에서 API가 사용되는 방식
[앱 화면 - API - 앱 서버 - API - 외부시스템]
컴포넌트(Component) :
유저가 사용하는 시스템에 대한 조작장치를 말한다.
프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈
