[내일배움캠프] Day 15 - UI 디자인 심화

728x90

[수업 목표]

복잡한 UI 컴포넌트 구조를 파악하고 체계적으로 설계하는 법을 배워요
다양한 UI 심화 개념을 배우고 피그마 기능으로 표현하는 법을 배워요

배리언츠(Variants)와 프로퍼티(Properties)란?

Variants: 컴포넌트에 여러 변형(Variation)을 추가해 다양한 상태를 한 번에 관리할 수 있습니다. 예를 들어 버튼의 기본/호버/비활성화 상태를 각각 하나의 배리언트로 구성할 수 있습니다.
Properties: 프로퍼티를 사용하면 컴포넌트 내부 요소를 더 유연하게 조작할 수 있습니다. 대표적인 프로퍼티로는 Instance Swap(인스턴스 교체)과 Nested Instance(네스티드 인스턴스)가 있습니다.

버튼 컴포넌트 스택(Stack)

Stack(스택)은 두 개 이상의 버튼을 좌우 또는 상하로 배치하는 방법

2개의 버튼을 동시에 배치하기 위해 사용하는 피그마 스킬

실무에서 자주 사용하는 버튼 조합을 미리 스택 형태로 만들어두면 디자인 작업이 훨씬 효율적

버튼 컴포넌트 독(Dock)

Dock(독)은 버튼이 화면 하단에 고정된 형태로 배치되는 UI 컴포넌트

팝업 화면이나 메인 CTA 버튼 같은 요소에서 자주 사용

Dock 컴포넌트 안의 버튼을 단일 버튼과 스택 버튼으로 빠르게 교체할 수 있음

네스티드 인스턴스까지 적용해 버튼 내부 속성도 쉽게 변경할 수 있음

실무에서의 활용 팁

자주 사용하는 버튼 조합은 미리 컴포넌트로 만들어 두세요.
배리언츠와 프로퍼티를 적절히 활용하면 유지보수와 변경이 매우 쉬워집니다.
Dock 컴포넌트에 다양한 버튼 조합을 추가하면 더 많은 상황에 빠르게 대응할 수 있습니다.

포지션이란?

화면에서 요소가 위치하는 방식

디자인과 코드 구현 모두에서 매우 중요하며, 포지션을 이해하면 더 정확하고 완성도 높은 UI를 만들 수 있음

포지션 속성 종류

1️⃣ Static (스태틱)

기본 포지션으로, 요소가 특별한 속성값 없이 배치된 상태
일반 프레임 내에서 요소를 자유롭게 이동할 수 있음
피그마에서 기본값으로 적용

2️⃣ Fixed(픽스드)

요소가 화면 전체를 기준으로 고정됨
스크롤과 관계없이 항상 같은 위치에 유지
프로토타입 설정에서 Fixed 설정

3️⃣ Absolute (앱솔루트)

요소가 상위 컨테이너(프레임)를 기준으로 고정됨
상위 컨테이너가 반드시 오토레이아웃일 때만 적용할 수 있음
앱솔루트 속성은 오토레이아웃 프레임 내에서 요소의 위치를 자유롭게 조정할 수 있게 함

4️⃣ Sticky (스티키)

Static과 Fixed의 혼합 속성
스크롤에 따라 요소가 움직이다가 특정 위치에서 고정됨
스크롤 동작과 관련이 있기 때문에 프로토타입 패널에서 설정할 수 있음

포지션 속성이 중요한 이유

포지션 속성은 UI 디자인의 정밀도를 높이고 사용자 경험(UX)을 개선하는 데 핵심적인 역할을 함

Static은 기본 배치
Fixed는 항상 보이는 요소에 적합
Absolute는 레이아웃 내 고정 요소에 적합
Sticky는 스크롤을 고려한 고정 위치에 적합

팝업(Popup)의 개념과 유형

📌 팝업이란?

팝업(Pop-up)은 말 그대로 화면 위에 툭 튀어나오는 창을 뜻함
광고, 로그인 유도, 알림 등 다양한 정보를 사용자에게 전달할 때 사용

📍 팝업의 유형

윈도우 팝업(Window Popup)
- 새로운 브라우저 창을 띄우는 방식
- 예전에는 자주 사용됐지만, 보안 문제와 사용자 불편 때문에 점차 사라지고 있음
- 브라우저 기본 설정으로 팝업이 차단될 수 있기 때문에 실무에서는 권장하지 않음
단점:
- 사용자 경험 저하: 새 창이 열리면 흐름이 끊김
- 보안 이슈: 악성코드 위험이 있음
레이어 팝업(Layer Popup)
- 현재 화면에 겹쳐서 새로운 정보를 보여줌
- 대부분의 최신 웹사이트와 앱에서 사용하는 방식
장점:
- 사용자 흐름을 유지하면서 추가 정보를 제공할 수 있음
- 디자인과 개발이 용이

모달(Modal)이란?

모달(Modal)은 사용자의 행동을 제한하고, 특정 작업에 집중하도록 돕는 UI 요소
레이어 팝업의 한 유형으로, 뒤에 있는 화면과의 상호작용을 일시적으로 차단

모달의 주요 특징

뒤에 있는 화면은 조작할 수 없음
반투명한 어두운 배경(라이트박스)이 사용되어 현재 작업에 시선을 집중시킴

오버레이(Overlay)란?

오버레이는 UI 요소가 화면 위에 겹쳐지는 현상
모달도 오버레이의 일종이지만, 오버레이가 곧 모달은 아님

오버레이의 예시

바텀시트
플로팅 메뉴
드롭다운 메뉴

라이트박스(Lightbox)의 개념

모달 UI를 사용할 때 뒤에 있는 화면을 흐리게 처리해주는 반투명한 층

스크림(Scrim), 딤드 레이어(Dim Layer) 등 다양한 이름으로 불림

라이트박스의 역할

사용자 시선을 집중시킴
뒤에 있는 화면과 분리시켜 현재 작업에만 집중하게 함

모달 사용 시 주의사항

📍 올바른 모달 사용 기준

중요한 행동을 유도할 때만 사용
- 사용자의 흐름을 방해하기 때문에 불필요한 모달은 피해야 함
라이트박스를 활용해 시각적 집중을 유도
- 배경을 흐리게 처리하면 사용자가 현재 해야 할 작업에 더 집중할 수 있음
라이트박스를 누르면 모달을 닫도록 설정
- 사용자가 자연스럽게 뒤로 돌아갈 수 있도록 라이트박스를 클릭했을 때 모달이 닫히게 만들기

오버레이와 모달, 라이트박스의 관계

오버레이는 화면에 겹쳐지는 모든 UI 요소를 포함
모달은 오버레이의 하위 개념으로, 사용자의 상호작용을 제한
라이트박스는 모달에 자주 사용되는 시각적 보조 요소

모달은 중요한 작업을 사용자에게 명확하게 전달할 때 유용
하지만 불필요한 모달은 사용자 흐름을 방해하고, 사용자 경험(UX)을 떨어뜨릴 수 있음

오버레이, 모달, 라이트박스의 개념을 정확히 이해하고, 적절한 상황에서 사용해야함

다이얼로그란?

오버레이-모달 속성을 가진 컴포넌트

사용자의 의사를 묻거나 중요한 선택을 할 때 사용

📍 다이얼로그의 특징

사용자의 행동을 유도: 선택지(버튼)를 제공하여 사용자가 답변할 수 있게 함
뒤에 있는 화면을 잠시 정지시키고 사용자가 현재 다이얼로그에 집중하도록 유도
오버레이와 라이트박스를 함께 사용해 사용자 경험을 높일 수 있음

예시:

네이버 메일에서 휴지통을 비울 때 확인 메시지가 뜨는 다이얼로그
온라인 쇼핑몰에서 결제 전 최종 확인 창

다이얼로그의 구조

📍 다이얼로그의 주요 구성 요소

컨테이너 (Container)
다이얼로그 내부의 모든 요소를 감싸는 프레임 역할
헤더 (Header)
- 제목(Title): 다이얼로그의 주요 메시지를 전달
- 부제목(Subtitle): 제목을 보조하거나 내용을 추가 설명
- 닫기 버튼, 아이콘, 이미지 등이 들어갈 수 있음
액션 (Action)
- 버튼 영역으로 사용자의 선택을 유도
- 버튼은 한 개 또는 여러 개가 들어갈 수 있으며, 확인/취소와 같은 선택지를 제공

다이얼로그 설계 시 주의사항

1️⃣ 선택지 유형에 따른 구분

다이얼로그: 사용자가 A 또는 B를 선택할 수 있는 상황에 사용
- 예: "파일을 저장하시겠습니까?"
- 라이트박스를 클릭하면 다이얼로그가 닫힘
얼럿(Alert): 사용자가 중요한 서비스 상태를 확인해야 할 때 사용
- 예: "인터넷 연결이 끊어졌습니다."
- 라이트박스를 클릭해도 닫히지 않음

2️⃣ 사용자 흐름을 방해하지 말기

다이얼로그는 사용자의 흐름을 잠시 멈추게 하므로 반드시 필요한 경우에만 사용
간단한 안내 메시지는 토스트(스낵바)를 사용해 흐름을 방해하지 않도록 함

다이얼로그 설계의 핵심

다이얼로그는 사용자와의 대화 수단
필요할 때만 사용해 사용자의 흐름을 방해하지 않도록 해야 함
헤더와 액션을 컴포넌트로 만들어 재사용성을 높이고, 콘텐츠는 상황에 따라 자유롭게 추가

[과제] (진행중)

📝 숙제 : 네이버 지도 앱 클론 디자인

네이버 지도 앱의 홈 화면을 클론해주세요
홈 화면 뒤의 지도, 하단 네비 바 등은 구현하지 마세요! 캡처 이미지나 일반 이미지로 대체해도 괜찮아요.
홈 화면 기본 1장, 드래그했을 때 올라오는 바텀 시트가 담긴 홈 화면 프레임 1장 등 총 2장의 디자인이 필요해요.

오늘은 세희 매니저님과의 1on1이 있었다

프리다이빙으로 하나됨ㅋㅋㅋㅋ

이번 과정에 프리다이빙 하시는 분들이 몇 분 계신 것 같은데 과정 끝나면 다같이 수심타러 한 번 가면 좋겠다ㅋㅋ

그나저나 나를 괴롭게 하는 클론디자인😩

2주차 과제 2를 어찌저찌 마쳤더니 3주차에서 또 클론 디자인을 만났다!!!

세상에나..ㅋㅋㅋㅋㅋ

그래도 어쩌겠어 해내야지!

네이버 지도 클론디자인 내일의 내가 완성해야지ㅋㅋㅋ