오늘의 계획

📌
1. 버튼 컴포넌트 스택 / 독
2. 포지션
3. 오버레이와 모달
4. 다이얼로그 컴포넌트

1. 버튼 컴포넌트 스택 / 독

스택 Stack

2개의 버튼을 동시에 배치하기 위해 컴포넌트로 활용하는 것

버튼 컴포넌트는 다양한 UI 형태로 사용되고 2개씩 배치하는 경우가 많아, 스택으로 2개의 버튼을 묶어 편리하게 활용한다.

독 Dock

화면의 하단에 고정된 상태
버튼 컴포넌트는 단일 요소로 사용되는 경우도 있지만 대부분의 경우 독 Dock 형태로 사용된다.

여백 요소를 더해 하단에 고정되는 버튼 컴포넌트의 형태로 만들어 활용하면 매우 빠른 디자인 진행이 가능하다.
실무에서는 기기 하단의 인디케이터 요소까지 포함해준다.

🖍️ 실습

- 스택

1. 버튼 두개를 복사하여 오토레이아웃으로 묶어준다.
2. 베리언츠를 적용하여 가로방향, 세로방향으로 배치시킨다.
3. 버튼의 스타일을 다르게 적용

- 독

1. 버튼 한개를 가져와 오토레이아웃을 적용하고 가로 사이즈를 375픽셀로 적용
   (상하좌우 여백을 적용하면 배치할 때 따로 계산하지 않아도 돼서 편리하다.)
2. 버튼의 크기를 Fill 로 변경
3. 인스턴스 스왑을 적용하여 스택버전도 만들어준다.
4. 네스티드 프로퍼티를 적용하여 버튼의 요소들을 편리하게 변경할 수 있도록 한다.

2. 포지션 Position

UI 요소는 화면 안의 다른 요소들과 상대적인 관계를 가지며 위치한다.
포지션을 활용하여 화면 상에서 요소가 위치하는 방식을 정의한다.

- 스태틱 Static

기본값, 요소에 아무런 속성값을 주지 않은 상태
프레임 안에서 자유롭게 위치 이동 가능

- 픽스드 Fixed

화면 전체를 기준으로 요소를 그 위치에 고정

스크롤이나 다른 요소에 영향을 받지 않는다 (ex. 내비게이션 바, 하단 버튼 등)

프로토타입에서 설정 가능

프레임 안에서 FIXED 속성 안에 위치

- 앱솔루트 Absolute

요소가 고정되는 위치가 화면 전체가 아닌 요소의 부모 컨테이너(Relative)가 기준이 된다.

부모 컨테이너가 반드시 오토 레이아웃이어야 앱솔루트 포지션을 사용할 수 있다.

오토레이아웃 포지션 안에서 고정할 요소의 위치를 정할 수 있다.

- 스티키 Sticky

스크롤 안에서는 스태틱이다가, 스크롤을 넘어가면 화면 상단에 고정된다.

프로토타입 안에서 설정 가능

3. 오버레이와 모달

🫧 팝업 Pop-up

현재 화면 위에 새로운 화면을 띄우는 것

1. 윈도우 팝업
   새로운 윈도우 (브라우저의 새 창) 을 띄워주는 방식
   일반적으로 이러한 방식을 팝업이라고 부른다.
   광고, 악성 코드 등을 방지하기 위해 팝업을 안 쓰는 추세이다.
   사용자의 행동을 방해하기 때문에 잘 사용하지 않는다.

2. 레이어 팝업
   코드로 만들어진 컴포넌트를 보여주는 방식
   최근 대부분의 서비스가 이 방식을 사용
   현재 화면 위에 컴포넌트로 만들어진 레이어를 보여주는 개념

- 모달 Modal

사용자가 별도의 행동을 취하기 전까지 팝업창 뒤에 가려진 화면을 조작할 수 없는 것을 의미한다.

팝업이 뜰 때 뒤의 화면을 검은색 화면으로 가려 사용자가 원래 보던 화면에서 작업을 수행할 수 없다는 것을 알려주고 팝업창에 시선이 가도록 만든다.

💡 모달과 팝업

레이어 팝업과 모달이 같은 뜻으로 혼용하여 사용되는 경우가 많은데 모달과 팝업의 차이를 정확히 알고 있어야 한다.

‼️ 주의사항

사용자의 행동을 방해하는 것이므로 사용자가 반드시 확인해야 하는 내용이거나 그만큼 중요한 내용에만 사용한다.

- 오버레이 Overlay

UI가 화면 위에 중첩이 되는 경우, 오버레이 속성을 가졌다고 말한다.

- 라이트박스 Light box

스크림 (scrim; 천 또는 장막), 딤드 (Dimmed; 흐려진), 딤레이어(Dim layer), 오버레이 (Overlay) 등 여러가지 이름으로 불린다.

모달 속성의 UI를 사용할 때 ‘작업을 수행할 수 없다’ 를 의미하는 뒤에 깔리는 반투명한 층

💡참고

팝업 레이어와 배경을 구분하여 사용자가 팝업 레이어에 집중할 수 있도록 하는 장치이니 필수가 아닌 권장 사항이다.

라이트박스를 클릭했을 때 이를 사용자가 취소 또는 뒤로 가기 작업을 수행했다고 간주하여 원래 보던 화면이 나올 수 있도록 해야한다.

만약 레이어 팝업 안에서 정보를 입력하거나 중요한 선택을 하는 과정이었다면 라이트박스를 클릭하여도 창이 닫히지 않도록 해야한다.

4. 다이얼로그 컴포넌트

• 컨테이너에 해당하는 컴포넌트
• 오버레이 , 모달 속성을 가진다.
• 다이얼로그를 통해 사용자의 의사를 묻고 답을 얻는다.
• 컨테이너 내부에 헤더와 액션을 포함한다.

‼️ 주의사항

1. 선택지의 유형에 따라 조작법이 달라진다.

   • 무언가를 선택 → 다이얼로그
   • 경고 또는 확인 → 얼럿 (Alert), 팝업

2. 라이트박스를 눌러도 다이얼로그가 닫힌다.

   • 라이트박스를 누르는 것은 닫기와 취소로 간주한다.
   • 중요한 내용을 전달하거 선택하는 경우 직접 버튼을 눌러 닫도록 한다.

3. 사용자가 반드시 확인해야하는 내용에 대해서만 사용

   • 그렇지 않은 경우 토스트 알림을 사용

🖍️ 실습

1. 텍스트 레이어 두개를 만들고 오토레이아웃을 적용하여 다이얼로그의 헤더 부분을 만든다.
2. 버튼을 복사해와 다이얼로그의 액션 부분을 만든다. 이때, 헤더와 액션의 너비를 맞춰준다.
3. 필요하다면 스택을 고를 수 있도록 인스턴스 스왑을 적용한다.
4. 헤더와 액션을 함께 선택하여 오토레이아웃을 적용하고 너비와 간격, 레디어스 등을 적용한다.
5. 필요하다면 입력 필드를 넣을 수도 있다.

🎙️ 느낀점

이제 제법 피그마가 편해진 것 같다.
작업을 하면 할 수록 오토레이아웃과 프로퍼티 설정을 꼼꼼하게 해야겠다고 느낀다.

클론 디자인 과제를 진행했는데 생각보다 시간이 오래 걸렸다.
폰트, 여백, 글씨 크기 등 최대한 비슷하게 적용을 하려했으나 맞게 적용했는지 잘 모르겠다.
그래도 4배수의 숫자로 간격과 수치를 적용하는 등의 디자인 패턴에 대해서는 꽤 찾은 것 같다.

강의가 한 주차 더 빠르게 진행되고 있지만 아직 시간이 있으니 시간을 갖고 과제의 완성도를 높이려 노력해야겠다.