UI·UX Design Study

본문 바로가기

Most viewed

Latest

Design System 웹 디자인 시스템 - 버튼 그룹 & 플로팅 액션 버튼 (FAB) 이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. --- 디자인 시스템 구축 과정에서 필요한 컴포넌트. 그 중 버튼 컴포넌트에 대해 정리해보았다. 버튼 그룹 (Button Group) 버튼이 여러 개일 때 간격을 공통으로 설정해야 한다. 간격이 매번 다르면 일관성이 떨어지고 유지보수하기 어려워진다. 사용자 경험 또한 좋아지지 않을 것이다. 간격이 너무 좁거나 넓지 않도록 유의한다. 머터리얼 가이드 3에서는 8 dp 이상의 간격을 권장하고 있다. 8 dp 미만으로 설정해도 문제 없지만 가급적 4의 배수를 추천한다. 참고: 머터리얼 가이드 2 - 4 dp & 8dp 그리드, 머터리얼 가이드 3 - 타겟 간격 위 예시처럼 다양하게 응용 가능하다. 다양한 종류의 버튼이..
Design System 웹 디자인 시스템 - 버튼 컴포넌트 상태 (State) 이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. --- 디자인 시스템 구축 과정에서 필요한 컴포넌트. 그 중 버튼 컴포넌트에 대해 정리해보았다. 버튼 컴포넌트의 상태 (States) 버튼에 마우스를 올렸는데 아무 변화가 없다면? 클릭해봤는데 아무 변화가 없다면? 제대로 동작이 되는 중인지 불안하고 답답할 것이다. 이런 사소한 불편함이 누적되면 안 좋은 사용자 경험을 초래한다. 따라서 버튼이 지금 어떤 상태인지 힌트를 주는 게 바람직하다. 사용자 경험을 더욱 긍정적으로 만들 수 있다. 1. 데스크탑 기준 기본 (Enabled) 클릭할 수 있는 버튼의 기본 상태 마우스오버 (Hovered) 버튼에 마우스 커서가 닿은 상태 기본 상태보다 한 톤 밝거나 어두운 배경 ..
Design System 웹 디자인 시스템 - 버튼 컴포넌트 스타일 이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. --- 디자인 시스템 구축 과정에서 필요한 컴포넌트. 그 중 버튼 컴포넌트에 대해 정리해보았다. 버튼의 가시성 버튼마다 우선순위가 있다. 우선순위에 따라 가시성의 차이를 두어 디자인한다. 가시성 높음 (우선순위 높음) 가장 필요로 하거나 눌렀으면 하는 버튼 사용자가 쉽게 누르도록 눈에 띄게 디자인한다. 강조색(Primary, Secondary, Tertiary)과 브랜드 색을 주로 사용한다. 예: 로그인, 제출, 작성, 전송, 구매, 팔로우, 확인 등 가시성 보통 (우선순위 보통) 눌렀을 때 영향이 작은 평범한 버튼 잘 보이지만 튀지 않도록 디자인한다. 예: 공유, 도움말, 설정, 이전으로, 취소 등 가시성 낮음..
Design System 웹 디자인 시스템 - 버튼 컴포넌트 이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. --- 디자인 시스템 구축 과정에서 필요한 컴포넌트. 그 중 버튼 컴포넌트에 대해 정리해보았다. 버튼의 구성 요소 기본적으로 버튼은 텍스트로 구성하지만, 아이콘을 추가하여 더 빠르고 명확하게 대상을 인식시킬 수 있다. 버튼의 크기 종류 버튼의 크기는 흔히 Small, Medium, Large의 3단계로 정할 수 있다. 필요하다면 4~5가지로 확장할 수 있다. 더 적게 줄일 수도 있다. 💡 크기를 나누는 이유는 무엇일까? 디자이너가 그리는 버튼의 크기가 모두 다르다고 생각해보자. 일관성이 떨어지고 유지보수하기 힘들어질 것이다. 디자이너가 한 가지의 버튼만 사용한다면 어떨까? 역시 쉽지 않다. 한 가지의 크기로 모든..
UI·UX Design 2023 AI 기반 UI·UX 디자인 트렌드 이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. --- 2023년을 맞아 새롭게 UI·UX 디자인 트렌드에 대해 알아보았다. 작년을 회고해보면 블록체인과 메타버스에 대한 사람들의 기대가 있었지만, 루나가 대폭락하고 FTX가 파산, 메타가 부진하는 등 시장의 불확실성이 커지고, 실리콘밸리에서 대량 해고가 시작되는 해였다. 디자인 분야에서는 미래지향적인 3D 요소와 애니메이션, Y2K 스타일이 다양한 플랫폼에서 활용되었고, 3D 요소에는 Claymorphism, 3D Chrome Effects, 3D Glass Texture 등이 눈에 띄었다. 시장의 흐름에 따라 디자인 트렌드도 변화한다. 2023년 디자인 트렌드 중 인공지능 기술을 이용한 디자인에 초점을 맞춰보..
Design System 디자인 시스템 구축하기 - 폰트 스타일 가이드 이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. *** 디자인 구축 작업에서 빼놓을 수 없는 과정, 디자인 시스템. 디자인 시스템에서 폰트는 어떻게 정리되어야 할까? 폰트 스타일 가이드에 대해 알아보자. 디자인에 있어 폰트는 아주 중요한 요소 중 하나이다. 폰트를 어떻게 쓰느냐에 따라 전달하려는 내용을 보다 효과적으로 보여줄 수 있기 때문이다. 특히 연속성을 띠는 시각 매체에는 폰트 스타일이 통일되어 있어야 매체의 가독성 또한 올라간다. (대표적인 예로는 책, 웹사이트, 앱 등이 있다.) 위 예시와 같이 하나의 연속된 컨텐츠에서 각기 다른 폰트 스타일을 사용한다면 사용자가 인식하는 과정에서 걸림돌이 됨은 물론, 하나의 컨텐츠로 보이지도 않게 된다. 본문 폰트 ..
UI·UX Design 페르소나란 무엇일까? (MIT 스타트업 바이블을 읽고...) 이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. *** MIT 스타트업 바이블을 읽고 UI·UX 디자이너로서 중요하다고 생각하는 개념들을 정리해보았다. 그 중 페르소나에 대해 정리해보았다. 페르소나 Persona는 '가면'이라는 뜻으로, 사회에서 자신이 가지는 또 다른 인격을 지칭할 때 흔히 쓰인다. 한편, 서비스 기획에서 페르소나는 주요 고객을 대표하는 특정 인물을 의미한다. 앨런 쿠퍼의 저서 "정신병원에서 뛰쳐나온 디자인(The Inmates Are Running the Asylum)"에서 처음 소개된 개념이다. 쉽게 말하면, 추상적이고 다양한 고객층을 특정하기 위해 실제 사용자 정보를 바탕으로 어떤 인물을 구체적으로 정의한 것이다. 예를 들면 대한민국 3..
UI·UX Design UI·UX 디자인 스터디 - 게슈탈트 법칙으로 본 UI 디자인 이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. *** UI 디자인에 적용할 수 있는 원리는 무엇이 있을까? 관련된 디자인 원리에 대해 알아보았다. 게슈탈트의 그루핑 법칙 시각적 특징에 따라 정보를 그루핑하는 것을 게슈탈트의 그루핑 법칙(Gestalt grouping laws)이라 한다. 게슈탈트 심리학자들은 그루핑의 시지각을 설명하는 여러가지 법칙을 발표했다. 사람이 시각 정보를 보고 해석하는 방법을 이해하고 UI를 디자인하면, 더욱 사용하기 좋은 인터페이스를 만들 수 있을 것이다. 유사성의 원리 유사성(similarity)의 원리에 따르면, 사람은 유사한 모양이 모인 것을 한 그룹으로 보는 경향이 있다. 위의 예시처럼 사각형은 사각형끼리 원은 원끼리 한 그..
UI·UX Design UI·UX 디자인 스터디 - 제품 개발 프로세스와 포지션 이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. *** UI·UX 디자이너가 디자인하는 제품의 개발 과정과 그에 따른 포지션은 어떻게 될까? 어떤 것이 있는지 알아보도록 하자. 제품 개발 프로세스 제품은 일정 기간 프로세스에 따라 개발된다. 회사마다 프로세스가 다르지만, 대표적인 제품 개발 프로세스가 몇 가지 있다. 그 중 전통적 모델인 워터폴과 비교적 새로운 린 스타트업, 애자일, 디자인 씽킹에 대해 말하고자 한다. 워터폴 모델 Waterfall Model은 폭포수 모델로, Top-down 방식의 제품 개발 프로세스이다. 개발 과정의 흐름이 마치 폭포수처럼 위에서 아래로 향하여 붙여진 이름이다. 순차적 방식으로 위계가 강한 대기업이나 납기일이 정해진 프로젝트..
UI·UX Design UI·UX 디자인 스터디 - UI·UX란 무엇인가? 이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. *** UI·UX 디자이너로 취직했는데 왜 유저 리서치부터 사용성 테스트까지 해야 하는지 물어보는 경우가 왕왕 있다. 그야 "UI·UX 디자이너"로 취직했기 때문이지만 UI·UX를 몰라서 생기는 의문이다. 그럼 도대체 UI·UX가 뭐고 UI·UX 디자이너는 무엇을 해야할까? 지금부터 알아보자. UX란 무엇일까? User eXperience를 줄인 말로, 사용자 경험을 뜻한다. 사용자가 제품/서비스를 사용하여 얻는 경험을 사용자 경험이라 하며 UX 디자이너는 이를 디자인한다. 백화점 1층에 들어갔을 때 맡게 되는 화장품 향기에 머리가 아팠다던지, 지하철의 안내판을 보고 1번 출구를 찾기 쉬웠다던지, 웹사이트에 접속..
UI·UX Design 타이포그래피(Typography) - 베이스라인(baseline)의 차이가 디자인의 차이로 최근, 스포카 한 산스 네오를 버튼에 사용해보았다. 그랬더니 아래와 같은 모양새가 나왔다. 뭔가 이상하다. 뭐가 이상할까? 버튼 안의 글자가 조금 위로 올라가 있는 것 같지 않나? 그래서 다시 한번 적용한 값을 확인해봤다. 분명히 버튼 안에 글자를 상하좌우 가운데로 정렬하였다. 내가 사용한 프로그램은 피그마여서 행간이 폰트 중앙을 기준으로 위아래 동일하게 적용된다. (CSS 기준 행간) 그런데도 폰트 자체가 위로 올라가 보여, 타 폰트와 동일한 값을 적용하여 비교해봤다. 스포카 한 산스 네오와 그 전 버전인 스포카 한 산스, 노토 산스 KR을 비교한 모습이다. 폰트 크기, 행간, 자간, 상하좌우 간격 모두 동일하게 적용했다. 그럼에도 스포카 한 산스 네오만이 위쪽으로 치우쳐보인다. 폰트 고유의 특징인 것..
UI·UX Design UI·UX 디자이너를 위한 가이드 - 디바이스와 밀도 (깨지는 이미지) '이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. *** 다양한 밀도에서 깨지는 픽셀 논리적 픽셀 도입 후 여러 디바이스에서 같은 이미지를 같은 크기와 위치로 보여주게 되었지만 다른 문제가 발생한다. 고밀도 디스플레이에 저해상도 이미지를 나타내면 열화되는 것이다. 1dp에 4px을 요구하는 디스플레이에 2px의 이미지를 제공하면 2px을 4px 영역에 채우기 위해 시스템이 늘리기 때문이다. 그리고 고해상도 이미지여도 px이 홀수면 줄여지면서 소수점이 되어 이미지가 열화된다. 소수점의 픽셀은 온전한 1px의 집합이 아니라 선명할 수 없다. 특히 복잡한 이미지(풍경, 인물 사진..)보다 단순한 이미지(아이콘, 버튼..)가 심히 열화되어 보인다. 그래서 보통 각 밀..
UI·UX Design UI·UX 디자이너를 위한 가이드 - AOS와 IOS 밀도 이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. *** AOS와 IOS 밀도 안드로이드 기반 디바이스는 고도로 발전하여 현재 점유율이 가장 높고 디스플레이 밀도도 매우 다양하다. 그래서 안드로이드 OS(AOS)에선 DPI를 6단계로 나누고 DP라는 논리적 픽셀을 공통의 측정 단위로 정했다. 기준 밀도(mdpi)인 160 dpi가 초기 시장에서는 가장 보편적이었으나, 이제는 초고밀도(xhdpi)인 320 dpi가 가장 보편적이다. *안드로이드 배포 대시보드: developer.android.com/about/dashboards?hl=ko *안드로이드 밀도 지원: developer.android.com/training/multiscreen/screendensiti..
UI·UX Design UI·UX 디자이너를 위한 가이드 - DP·SP와 디스플레이 이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. *** 고밀도 디스플레이 초기 PC 디스플레이는 72 ppi로 제작되었다. 인쇄된 글자가 화면에서도 똑같은 크기로 보이도록 글자 단위(포인트*)의 체계를 반영한 값이다. 1 pt는 1 inch의 1/72로, 바꿔 말하면 1 인치가 72 pt이므로 똑같이 1 인치에 72 px을 담았다는 말이다. 그래서 72 ppi 디스플레이에서 1pt와 1px은 1:1로 같다. *포인트(point): 줄여서 pt. 금속활자 시대부터 인쇄물의 글자, 획 등을 표현하는 단위로 쓰이고 있다. 1 pt는 1 inch의 1/72이며, 계산하면 대략 0.0139 in, 환산하면 0.3528mm이다. 현재 아이폰 OS(IOS)에서는 논리적 픽..
UI·UX Design UI·UX 디자이너를 위한 가이드 - 해상도와 PPI·DPI 이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. *** 해상도와 밀도 기준 *해상도(Resolution): 화면(또는 이미지)을 이루는 픽셀 수의 정도를 뜻한다. 같은 크기의 화면을 기준으로 픽셀*이 많아지면 해상도가 올라가고 화면은 선명해진다. (PPI 참고) *픽셀(Pixel): 그림 원소(Picture element)란 뜻으로, 줄여서 px이다. 화면(또는 이미지)의 가로, 세로 해상도를 표현하는 단위로 쓰인다. (예: 1920*1080 px ) 빛의 삼원색인 R, G, B 값을 표현하는 서브픽셀(Subpixel)로 이루어져 있으며 비트(bit)로 정보가 표시된다. 1 bit는 2의 1승으로 2개의 컬러 값을 가지고, 8 bit는 2의 8승으로 256개의..
UI·UX Design UI·UX 디자이너를 위한 가이드 - 래스터화(Rasterization) 이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. *** 디자인을 하다 보면 접하는 공식이 있다. "웹용 이미지는 72 dpi여야 한다" "4나 8배수로 아이콘을 디자인하는 것이 좋다" 머릿속에 박혀 있지만 근본적으로 이해하고 있지는 않는 공식들. 왜 그런 것일까? 맥락을 정리해보기로 했다. 래스터화(Rasterization) 컴퓨터그래픽스(Computer Graphics)의 그림 표현 방식은 벡터 그래픽*과 래스터 그래픽*으로 나뉜다. 벡터 그래픽을 래스터 그래픽으로 변환하는 것이 래스터화이며, 화면을 통해 보는 모든 것은 래스터화된 결과물이다. *벡터 그래픽(Vector Graphics): 점, 선, 면의 정보(좌표, 휘도...)로 그림을 구성한다. 기하학에..
Web Accessibility 디자이너가 알아야 할 웹 접근성: 7. 이해의 용이성 ⁕⁕ 이 글은 디자이너로서 알아야 할 일부 웹 접근성 지침만을 발췌하여 풀이한 것이므로, 더 깊이 고려해야 한다면 위의 웹콘텐츠접근정지침 PDF 파일을 참고하면 될 것입니다. 7. 이해의 용이성(understandable) 이해의 용이성은 사용자가 장애 유무 등에 관계없이 웹 사이트에서 제공하는 콘텐츠를 이해할 수 있도록 제공하는 것을 의미한다. 이해의 용이성은 가독성, 예측 가능성, 콘텐츠의 논리성, 입력 도움의 4 가지 지침으로 구성되어 있다. 7.3. 콘텐츠의 논리성 7.3.1. (콘텐츠의 선형 구조) 콘텐츠는 논리적인 순서로 제공 해야 한다. 콘텐츠는 보조 기술 사용자가 맥락을 이해할 수 있도록 논리적인 순서로 제공해야 한다 (1) 콘텐츠의 선형 구조 유지 : 웹 페이지를 구성하는 모든 콘텐츠는 ..

티스토리툴바