2/21 TIL 및 WIL

박세진·2025년 2월 23일

WIL

이번주를 돌아보며....

이번주는 지금까지 배운 UI디자인을 배우면서 생각을 재정립 하는 시간이였다고 생각한다.
내가 알고있지만 부족한 부분들 및 디자인 용어, 규칙 등을 재정립하고 다시 알아봤다.
사실 아이콘 제작을 되게 많이해보고 시간을 쏟았지만 규칙을 알고 다시 한번 그려보니깐 훨씬 쉽고 규칙적으로 됬던거같다.
다음주에는 강의 재복습 해볼 생각이다.

1. 디자인 카타

나의 생각

솔직히 안드로이드(인피니티 디스플레이) 를 쓰는 제 입장에선 둘다 별로긴하다.
노치 또는 인피니티 두 종류 다 정면 카메라라는 기능을 추가하기 위해 사용자에게 불편함을 디자인으로 변화시킨 것인데,
아이폰의 노치는 영상이나 소설, 책 등을 읽을 때상단 화면을 가려 시야의 흐름을 전체적으로 방해를 주는 느낌이 강하다라고 생각이 들며 통일감이 없다. 또한 공간적으로 좁은 느낌을 줌. 디바이스가 작으면 작을수록 상대적으로 더 크게 느껴질 것이라고 생각.
선호하는 쪽은 B 공간적으로도 여유가 있어보이며 전화 등과 같은 상호작용 시스템을 만들어 사용자에게자연스럽게 인지시켜 흐름 유도함.

2. UI 디자인의 기본

오늘 학습주제

UI디자인의 가장 기본적인 컬러, 타이포그래피, 아이콘은 UI 디자인에서 사용자의 경험을 크게 향상시키는 중요한 구성 요소이다.
각 요소가 어떤 역할을 수행하는지에 대한 학습.

2 - 1. 컬러

컬러는 중요한 정보를 강조하거나 사용자의 행동을 유도하기 위해 주로 사용하는 요소에요.
또한 브랜드 아이덴티티의 스타일을 결정하는 요소 중 하나에요.

정보에 따라 채도,명도를 요소의 중요도에 따라 구분한다.

버튼이나 링크에 컬러를 적용하여 사용자가 다음 단계로 나아갈 수 있도록 행동을 유도

탭, 버튼활성화, 토글 등 사용자와 상호작용하면서 즉각적인 피드백(상태)을 전달

브랜드 컬러를 지속적으로 사용자에게 전달하여 브랜드 아이덴티티를 각인시킴.
브랜드마다 컬러를 이용한 메세지를 사용자에게 전달함.

UI 컬러 구성

UI 디자인에서는 Primary(주색), Secondary(보조색), Neutral(흰색,검은색,회색), Semantic(시스템컬러) 컬러를 사용해요.
5:25:70의 비율을 활용
5% 주색(브랜드 컬러), 25% 보조색, 70% 배경색으로 사용(절대적인 것은 아님)

컬러는 상대적이라 주변 환경(배경 색)에 따라 영향을 받음 .

화이트모드와 다크 모드일때 모드에 맞게 컬러 사용.

컬러는 상대적이라 형태에 따라 영향을 받음.

배경색과 텍스트 넓이가 다름에 따라 형태에 맞게 색을 변환시켜야줘야된다. 가독성 up

한 화면에서 너무 많은 컬러를 사용하는 것은 사용자에게 혼란을 줄 수 있어요.

배경색과 텍스트의 컬러의 대비를 높여 사용자 행동 유도. 또한, 정보를 강조해야 하는 경우 기준에 맞는 컬러 사용.

2 - 2. 타이포그래피

타이포그래피는 사용자의 경험을 향상시키는 중요한 요소.
각 회사별 및 시스템 상 알맞는 타이포그래피를 쓰는게 중요하다.

OS별 시스템 폰트

아이폰 : Apple SD Godic neo (San Serif), SF pro, New York (Serif)

안드로이드 : Noto Sans, Roboto
San Serif = 고딕, Serif = 명조
장점 : 다국어 지원, 다양한 사이즈 굵기 지원, 용량이 라이트함, 무료로 사용 가능

웹폰트

Pretendard, Spoqa Han Sans Neo, Suit 등 다양하지만 대체로 이 세개를 사용.
장점: 이 세가지 경우는 시스템 폰트랑 장점이 같음.

폰트 사이즈

디자인 작업은 PC에서 확대해서 작업하기 때문에 상대적으로 폰트가 크게 느껴지지만 실제 사이즈는 매우 작음을 인지.

10이하는 절대 사용금지!!!!!!!!!!!!!!!!!!

시각적 계층 구조

텍스트의 사이즈, 두께, 컬러, 위치, 여백 등 요소를 활용하여 더 나은 사용자 경험을 할 수 있도록 도와줌.

타이틀, 서브 타이틀, 본문 텍스트를 모두 강조하지 마세요.
모든 텍스트를 강조하게 되면 계층 구조가 무너지고 중요하게 전달해야 할 정보를 강조할 수 없게 돼요.

폰트 사이즈는 확실하게 차이를 두는 것이 좋아요. 1.5-2배의 차이를 둘 수 있어요.
예를 들어, 본문에 16px을 적용했다면 서브 타이틀은 32px를 적용할 수 있어요.

텍스트에 너무 과도한 컬러를 사용하지 않도록 주의해야 해요. 과도한 컬러 사용은 복잡해 보일 수 있어요