[내일배움캠프] 2주차 시작 🙉

디자인카타

🙌🏻 내가 선택한 디자인 : 키보드 입력

👉🏻 오른쪽 이미지와 같이 입력 정확도를 올리기 위해 키보드로 직접 입력이 아닌 피커 형식으로 날짜를 선택하면 날짜가 31에 가깝거나 나이가 많은 사람들은 스크롤을 더 많이 해야하기 때문에 번거롭다고 생각된다. 스크롤 형식으로 올리고 내리다보면 내가 맞추려는 날짜를 지나쳐 다시 스크롤해야 하는 경우가 발생해 불편함을 느껴 이탈률이 더 발생할거라고 생각된다.

---

아티클 스터디

 

오늘의 아티클 : 시각적으로 균형있는 디자인하는 방법(시각적 보정 팁)

출처 - https://brunch.co.kr/@thinkaboutlove/227

1. 측정한 크기와 눈에 보이는 크기

원과 사각형은 다른 너비와 높이를 가지고 있지만 비슷한 영역을 차지

사람들은 시각적으로 원보다 사각형을 더 크게본다. 때문에 아이콘을 사각형 영역에 맞추면 사각형에 가까운 도형들이 더 커이보이게 된다.

시각적 균형을 체크하기 위한 방법

 

시각적 균형을 체크하는 방법 중 가장 쉬운 방법은 블러처리 해보는 것. 아이콘이 서로 비슷하게 덩어리져보인다면 동일한 시각적 무게를 가진것이다.

- 시각적 무게는 인간의 눈이 오브젝트의 중요도와 크기를 인식하는 방법. 반드시 픽셀 사이즈와 영역이 동일할 필요 없음.

- 원, 다이아몬드, 삼각형, 그 외 비사각형 도형들은 사각형 도형들과 시각적 균형을 맞추기위해 더 키워져야함.

- 아이콘 영역은 시각적 균형을 위해 조금의 여백을 두어야한다.(아이콘 세트를 만들 떄 일관성을 갖기 위함)

2. 다양한 도형의 배열(정렬)

- 뾰족한 가장자리를 지닌 도형은 사각형 오브젝트 가까이에 있을 때 시각적 균형을 맞추기 위해 더 길거나 크게 만들어야함.

- 버튼 위의 삼각형 아이콘 위치를 바로 잡을 때 효과정인 방법 중 하나는 삼각형을 원으로 둘러싼 후 배경과 정렬하는 것

3. 시각적으로 올바른 모서리 라운딩

- 기하학적인 둥근 모서리는 직선이 갑자기 곡선으로 바뀌는 점을 쉽게 볼 수 있어 인위적으로 보임

- 시각적으로 올바른 모서리 라운딩은 특별한 공식이나 수동으로 모양을 조정하는 것이 필요

 

 대칭을 정확하게 맞춘 아이콘들은 디자인적으로 봤을 때 시각보정을한 아이콘들 보다 오히려 부자연스럽고 딱딱한 느낌을 줄 수 있다. 디자인을 할 때는 대칭을 정확하게 맞추는 것보다 사용자가 봤을 때 눈으로 느끼는 만족감을 더 중요하게 생각해야 할 것 같다.

---

피그마 실습

+히주님 코멘트

네비게이션 서랍 : 앱의 메뉴나 탐색 기능을 표시하기 위해 화면 좌측 또는 우측에서 슬라이드하여 보여주는 요소

- 슬라이드 방식 : 화면 좌측 또는 우측에서 슬라이드하여 메뉴를 표시

- 접거나 펼 수 있는 방식 : 메뉴가 표시되지 않을 때는 숨겨져 있으며, 필요할 때 펼쳐서 사용

탭 컴포넌트 :  컴포넌트 종류 중 네비게이션에 해당, 현재 화면을 전환해주는 요소

개별 아이템인 탭 메뉴와 메뉴를 모아 만드는 탭으로 구성 할 수 있음.

헤더 : 로고, 내비게이션, 액션버튼(CTA) 등을 포함하는 핵심 영역

- 고정형 헤더 : 스크롤을 내려도 항상 상단에 고정되는 형태

- 스크롤 업 헤더 : 스크롤을 내리면 숨겨지고 올리면 다시 나타나는 형태

- 드롭다운 메뉴 : 마우스를 올리거나 클릭하면 하위 메뉴가 펼쳐지는 형식

- 메가 메뉴 : 드롭다운 메뉴의 확장된 형태. 여러 개의 카테고리를 한 번에 표시할 수 있음.

아직 다 못 끝낸 실습,, ⭐

프로그레스바 : 작업의 진행 상황을 시각적으로 표시하는 요소

- 확정적 프로그레스바 : 작업 전체 진행률을 알고 있으며 , 이를 기반으로 남은 진행 상황을 표시하는 방식

- 비확정적 프로그레스바 : 작업의 소요 시간을 알 수 없을 때 사용. 진행 중임을 나타내기 위해 반복적인 애니메이션을 적용

- 원형 프로그레스 인디케이터 : 원형 형태로 작업 진행 상태를 나타냄. 주로 모바일 UI에 사용

- 선형 프로그레스바 : 막대 형태로 진행률을 표시. 일반적인 로딩화면에 사용됨

 

---

마무리

팀원들이랑 디자인카타, 아티클하고 개인적으로 강의 듣고 실습하고,, 뭘 많이 한 것 같은데 막상 보이는 실습도 몇 개 없다,,

내일부터는 디자인 입문 챕터를 시작한다고 하는데 피그마는 따로 좀 더 해봐야겠다.

이번 주도 다덜 화이팅 ✊🏻✊🏻