0314 WIL

wndnjs__·2024년 3월 13일

일간 회고

딤

화면의 특정 부분을 어둡게 하거나 불투명도를 주어서 다른 내용이나 요소를 강조하는데 사용한다
딤 처리된 영역은 활성화되지 않았거나 중요하지 않는 내용으로 간주된다.

토스트팝업

사용자에게 잠시 나타나지는 정보
예를 들어 오류나 확인의 알림. 단순히 피드백만으르 주는 요소

스낵바

토스트 팝업과 동일하지만 닫기 등 액션이 가능하다
팝업의 시간은 내용마다 달라진다.사용자의 작업을 방해하지 않도록 하단부분에 위치시키는게 좋다.

바텀시트

하단에서 올라오는 모달창,핸들바를 드래그 하거나 확장해서 축소하기도 한다(내가 좋아하지 않은 모달)

그리드 메뉴

모바일에서 네비게이션이나 주요 설정메뉴에서 사용된다.
밴토,타일, 모자이크 등 여러가지로 불린다.

케밥 메뉴

추가옵션, 숨겨진 옵션에 사용된다.

미트볼 메뉴

케밥과 유사한 옵션

햄버거 메뉴

상단 왼쪽에 위치하며 세개의 수평선
메뉴항목이 드롭다운 항목으로 나타난다. 화면 공간을 절약하고 사용자 경험을 간소화 할 수 있다.

되네르 메뉴(도너 메뉴)

필터모양을 숨길 떄 사용. 아래로 갈수록 수평선이 짧아진다.

엠프티 화면

아무런 컨텐츠가 없는 화면, 초기회 되거나 아직 로드하지 않았을 때 화면
현재 상태에서 명확히 설명하고 추가적인 행동도 요구 할 수 있다.

코치마크

사용자에게 가이던스를 제공하는 역할을 한다.
특정 기능을 강조하거나 사용법을 안내해준다.아이콘, 또는 색상으로 표현
사용자가 해당 페이지를 처음 사용할 때 자주 나온다.간결하고 가독성 좋아야한다.

시스템컬러

모바일 운영체제에서 지정된 색 시각적 일관성을 유지해준다.
사용자 경험을 향상시킨다.

브레이크 포인트

반응형 웹 디자인에서 사용되는 개념.웹 페이지나 앱의 레이아웃이 화면 크기나 종류에 따라 바뀌는 지점.
코드조건에 따라 레이아웃이 바뀌는 지점.
모바일,태블릿, PC를 중점으로 둔다.

로더와 스피너

로딩이나 처리과정을 시각적으로 나타내는 요소.
시스템이 작동중이라는 걸 알려준다.

테이블

데이터를 구조화해서 표현할 때 사용하는 요소.
레이아웃에서 사용되는 구성요소. 행과 열의 형태로 구성되어 있다.
주로 게시판이나 주문내역등의 데이터를 나타낼 때 사용한다.

카드 디자인

정보를 시각적으로 구서하고 표현하는 방법 중 하나로 작고 독립적인 컨텐츠 요소이다.
각각의 카드에는 이미지, 제목, 버튼 등의 내용이 들어갈 수 있다. 가독성이 높고 플랫하게 디자인된다.
(캐러셀은 여러 개의 콘텐츠를 순환적으로 보여주는 슬라이더, 카드 디자인은 작고 독립적인 컨텐츠 요소를 시각적으로 구성하는 방법)

텍스트필드/텍스트 박스

문자를 입력할 수 있는 입력 필드
짧은 내용으로 대부분 한줄만 입력 가능한데 그 이상이면 텍스트 에이리어를 사용한다.
실무에서는 둘 다 혼용해서 사용한다.

검색필드

키워드나 내용을 입력해서 원하는 정보를 도출시키는 요소
쉽게 찾을 수 있는 위치에 배치해야 한다.주로 사이트 해더나 탭바에 둔다.

플레이스 홀더

텍스트 박스에 일시적으 표시되는 가이드
이메일, 비밀번호 박스에 나타난다. 사용자에게 양식을 쉽게 이해시킬 수 있도록 돕는다.

플로팅 버튼

화면의 일정한 위치에 다른 요소 위에 떠 있는 상태로 보이는 고정된 버튼

보통은 화면 하단에 배치하는게 사용자의 사용 흐름을 방해하지 않는다.

CTA(행동유도버튼)

사용자가 구체적인 행동을 취하도록 유도하는 버튼
목적에 따라 사용되는 형태, 종류가 달라진다.
구매버튼, 가입양식 등에 사용함.전환률을 높여준다. 배너디자인으로도 사용된다(이미지, 텍스트)

A/B테스트를 이용하여 최적의 위치와 디자인을 선택하여 노출시키는게 좋다.
A/B 테스트는 마케팅과 웹사이트 최적화에서 사용되는 실험적인 방법론 중 하나입니다. 이 방법은 두 가지 이상의 버전을 비교하여 어떤 것이 더 효과적인지를 확인하는 데 사용됩니다. 일반적으로 A/B 테스트는 웹사이트 디자인, 콘텐츠, 레이아웃, 제목, 버튼 디자인 등과 같은 다양한 요소를 비교하는 데 사용됩니다.

A/B 테스트
1. 목표 설정: 실험의 목적을 명확히 설정하고 원하는 결과를 정의합니다.
2. 가설 설정: 특정 요소를 변경하여 어떤 결과를 기대하는지에 대한 가설을 수립합니다.
3. 버전 생성: 원본(컨트롤) 버전과 변형(테스트) 버전을 생성합니다.
4. 테스트 실행: 웹사이트의 일부 사용자에게 각 버전을 무작위로 표시하고 데이터를 수집합니다.
5. 결과 분석: 수집된 데이터를 분석하여 각 버전의 성과를 비교하고 결론을 도출합니다.
6. 최적화: 테스트 결과를 바탕으로 웹사이트를 최적화하고 성과를 향상시킵니다.

A/B 테스트는 데이터 기반의 의사결정을 가능하게 하며, 사용자 경험을 개선하고 전환율을 향상시키는 데 효과적입니다.

스플래쉬

초기 로딩 화면. 주로 앱이나 웹사이트를 시작할 때 나타남.로고 및 이름을 나타냄
(스플래쉬는 앱이나 웹사이트를 시작할 때 나타나는 초기회면
로더는 데이터가 로딩되는 동안에만 나타나는 인디케이터(존재나 상태를 나타내는 신호,표지))
단순히 멈춰있는 디자인 보다는 그래픽적인 요소가 들어가는 동적인 이미지로 들어가는게 사용자에게 흥미로운 경험을 제공한다.
너무 길면 사용자에게 인내심을 시험할 수 있으므로 길어도 3초가 좋다.
인디케이터는 특정 상태나 작업의 진행 상황을 시각적으로 나타내는 요소를 말합니다. 주로 웹사이트, 애플리케이션 등에서 사용되며, 사용자에게 현재 상태를 알려주거나 특정 작업이 진행 중임을 나타내는 데 사용됩니다.

인디케이터는 다양한 형태와 디자인으로 나타날 수 있습니다. 예를 들어, 프로그레스 바, 스피닝 원형 아이콘, 숫자로 표시된 진행 상황 등이 있습니다. 이러한 인디케이터는 사용자에게 로딩, 처리, 진행 중인 작업 등의 정보를 제공하여 사용자 경험을 향상시키고, 사용자가 대기하는 동안에도 시각적으로 반응을 제공합니다.

디폴트

기본상태. 시스템이 적용하는 기본 초기상태.

스켈레톤

로딩 상태를 나타내기 위해 사용되는 패턴으로 로더와 같은 기능을 한다.
사용자에게 임시로 표현되는 레이아웃. 로딩이나 스핀으로 화면을 대처하는게 아니라 나타낼 레이아웃을 미리 보여주는 인디케이터.
사용자에게 시각적 힌트를 준다. 요즘은 로딩시간이 대부분 길지 않기때문에 그닥 쓰이지 않는 추세..
스켈레톤은 로딩중인 컨텐츠의 예상 배치와 구조를 보여주는 시각적인 패턴
로더는 로링상태를 나타내는 인디케이터

온보딩

사용자에게 서비스 기능이나 가치를 알리기 위해 돕는 안내화면. 스플래쉬화면 바로 다음에 나오는 화면
처음 서비스를 이용할 때 사용된다.튜토리얼, 사용안내 등으로 사용된다.간결하고 명확해야 한다.
온보딩은 새로운 사용자를 제품에 익숙하게 하는 프로세스를 나타내며, 코치마크는 사용자에게 특정 기능이나
요소를 안내하는 시각적인 표시를 의미한다. 따라서 온보딩은 초기 사용자 경험에 관련되어 있지만 코치마크는 사용중인 상황에서 특정 기능을 강조하거나 설명할 때 사용한다.

뱃지

미확인 수, 새로운 메세지 알람 수 등 간단한 정보를 시각적으로 나타내어 강조함

스토리보드(SB)

디자이너와 클라이언트 간의 커뮤니케이션을 원활히 하고, 웹사이트의 디자인 방향을 결정하는데 사용
보통은 PDF,PPT로 배포된다.

플로우차트

웹사이트의 구조와 사용자 경로를 시각적으로 보여주는 도구.

스토리보드-웹페이지의 시각적 디자인을 나타내는데 사용. 디자인과 개발 상황들을 상세히 기입한 내용.
플로우차트-웹사이트의 구조와 사용자 경로를 시각화하는데 사용.

목업

디자인을 이미지로 시뮬레이션 한 것, 멈춰져있다.

프로토타입

실제 서비스 화면처럼 간단하게 갖춰놓은 시뮬레이션
이를 통해 디자이너는 디자인의 흐름을 파악할 수 있다.
개발자는 개발 여부와 함께 기술적인 제약을 미리 고려할 수 있다.

유저빌리티(사용성)

사용자가 원하는 것을 얼마나 쉽게 사용할 수 있는가, 접근성, 효율성 등을 고려한 것
유저빌리티가 잘못 적용된 예시들을 끊임없이 찾아보고 이해해야한다.

어포던스

사용자에게 어떤 행동을 유도하거나 특정한 동작을 촉발시키는 디자인 특성

플레이스홀더(Placeholder):
입력 필드에 나타나는 임시 텍스트나 이미지를 말합니다. 이는 사용자에게 해당 필드에 어떤 정보를 입력해야 하는지 알려주는 역할을 합니다. 예를 들어, 이름을 입력하는 필드에 “이름”이나 이메일을 입력하는 필드에 “이메일 주소”라는 플레이스홀더가 표시될 수 있습니다. 이는 사용자가 필드의 목적을 이해하고 적절한 정보를 입력할 수 있도록 도와줍니다.
어포던스(Affordance):
디자인 요소가 제공하는 가능성이나 기능을 나타내는 것을 의미합니다. 예를 들어, 클릭 가능한 버튼은 그 형태나 색상 등으로 클릭이 가능하다는 것을 시각적으로 나타내어 사용자에게 클릭할 수 있음을 알려줍니다. 어포던스는 사용자에게 특정 행동을 유도하거나 가능한 행동을 시각적으로 나타내어 사용자 경험을 향상시키는 데 사용됩니다.

플레이스 홀더는 입력 필드에 나타나는 임시 텍스트나 이미지
어포던스는 디자인 요소가 제공하는 가능성이나 기능

반응형/적응형

제작된 화면이 크기에 따라 레이아웃이 바뀌는 것
적응형은 웹과 모바일 화면은 구별해서 별도 제작한 것

네이티브앱, 하이브리드앱, 모바일앱

구현과 실행방식의 차이가 있다
네이티브 앱은 IOS와 안드로이드 따로 제작해야한다. 유지보수도 크다.
각 플랫폼별로 별도로 개발되며, 모바일 운영체제에서 직접 실행된다. 빠르고 성능이 우수하다.아직까지 제일 많이 사용함.
하이브리드앱은 HTML방식으로 개발되어있다.우지보수가 간편하지만 성능이 네이티브보다 떨어진다.
모바일 앱은 인터넷 브라우저로 따로 앱을 다운하지 않고 인터넷을 통해 접속한다.
유지보수와 업데이트를 즉시 보안할 수 있다. 오프라인에서는 접속 불가능

A/B테스트는 디자인 구성을 많이 수정하는것은 좋지않고 버튼의 색감이나 위치,등을 간단하게 수정하여
사용자의 반응을 먼저 확인하는 것이 좋다.

뎁스

깊이. 사이트의 계층 구조를 표현하는 단위

페이지로 이동할 떄 뎁스가 3뎁스 이상이 되면 유저가 길을 잃게될 수 있다.

킥오프미팅

프로젝트 초기에 시작되는 미팅.
프로젝트의 전체적인 방향성을 잡는 회의

래퍼런스

참고자료, 사례들
대표적으로 핀터레스트

디자인QA

화면 구현과 작동에 대해 확인하는 시간
디자인이 완성되었을 떄(개발 전),
개발이 완료되었을 때 한 번 총2번이 좋다.

헤더는 페이지 상단 영역에 위치하여 브랜드나 제목등을 표시한다.
네이벡이션은 사용자가 다른 페이지로 이동을 중점으로 기능을 실행할수 있도록 도와주는 인터페이스(상호작용 방법) 요소
해더안에 네비게이션을 넣어서 진행한다.

•	“헤더(Header)“는 일반적으로 페이지나 앱의 상단에 위치하며, 로고, 제목, 검색 창 등을 포함합니다. 헤더는 해당 페이지의 식별 및 브랜딩을 위해 사용되며, 전반적인 네비게이션의 시작점 역할을 합니다.
•	“GNB(Global Navigation Bar)“는 전체적인 사이트 내비게이션을 나타내는 바 형태의 요소를 말합니다. GNB는 보통 헤더의 일부로 표시되며, 사이트 전체의 주요 섹션이나 페이지로 바로 이동할 수 있는 링크를 포함합니다. GNB는 사이트 전반적인 구조를 표시하고 사용자가 쉽게 다른 섹션으로 이동할 수 있도록 도와줍니다.

탭메뉴

체크박스

동의여부나 다양한 관심사를 선택할 때 사용된다. 반드시 선택을 하지 않을때도 존재한다.

라디오버튼

성별선택, 결제방식등 반드시 한가지를 선택해야 한다.

토글버튼(스위치)

두 가지 중 한 가지를 선택할 때 사용한다. 온오프형식

드롭다운,셀렉트 박스

셀렉트 박스는 이미지 커스텀시 제약이 있지만 드롭 다운은 토글버튼이나 버튼기능을 넣을 수 있기 때문에
초기 기획시에 셀렉트박스와 드롭다운의 차이점을 생각하면서 명확하게 정의해야 한다.

아코디언

드롭다운은 팝업처럼 오버레이 되면서 뜨는 요소이지만
아코디언은 아래의 요소를 밀어내면서 뜨는 요소이다.

타임피커

브레드크럼

현재 위치를 파악하고 이전단계로 쉽게 돌아갈 수 있도록 도와주는 요소
브레드크럼은 웹이나 어플리케이션 내에서 현재 위치를 파악하고 이전단계로 쉽게 돌아갈 수 있도록 도와주는 UI 요소
단순한 구조에서는 브레드크럼을 생략하는 경우가 많다 뎁스가 깊징 않은 사이트의 경우(깊지않은 웹사이트, 소규모 비지니스 페이지, 페이지나 색션이 적은 사이트) 현재 페이지의 위치의 경로 홈>카테고리>현재 페이지
브레드크럼은 현재 위치를 파악하고 이전 페이지로 경로를 제공하는데 중점을 두지만 네비게이션은 웹사이트의 다양한 섹션, 직접적 이동을 가능하게 한다.

페이징(페이지 네이션)

데이터의 로딩 시간을 단축하고 과부화를 줄이게 한다.

슬라이더(레인지 슬라이더)

더 사용자가 원하는 값을 조정할 수 있도록 핸들이나 노브를 드래그하여 값을 조절한다. 슬라이더는 대략적인 값을 입력할때 사용한다.
확대나 축소, 볼륲 조절에서 많이 사용
노브는 주로 회전하여 값을 조절하는 조절 요소
핸들은 드래그하여 이동시키거나 조절하는 요소

캐러셀(슬라이드 쇼)

스와이프

배너

웹사이트의 상단 부분이나 특정 섹션에 배치되어 있는 광고나 홍보용 이미지를 말합니다. 배너는 주로 사용자의 주목을 끌거나 특정 이벤트, 할인 혜택, 새로운 제품 소개 등을 알리기 위해 사용된다.
정해진 크기와 형식에 따라 디자인되며, 텍스트, 이미지, 그래픽 요소, 버튼 등을 포함할 수 있다.
슬라이드 되는 배너(웹사이트에 뜨는 광고)
슬라이드 되는 캐러셀은 캐러셀 배너, 슬라이드 스와이프 배너 등 이름이 많다.