본문 바로가기

디자이너가 알아야 할 것들

(21)
웹 UI 디자인 기본 문법 - 셀렉트 박스 (Select) 아래의 포스팅을 간단하게 영상으로 시청하실 수 있습니다.   셀렉트 박스 (Select) 셀렉트 박스는 사용자의 선택을 수집하기 위해 사용하는 UI 요소이다.여러 옵션 중 하나만 선택할 수 있다.    일반적으로 드롭다운 형식으로 제공된다.박스를 클릭하면 리스트가 펼쳐지고, 옵션을 선택하면 리스트가 접힌다.   선택된 옵션은 박스에 표시된다.사용자는 자기가 무엇을 선택했는지 쉽게 파악할 수 있다.  셀렉트 박스는 왜 사용할까? 일정한 입력 값을 얻고, 정형화된 데이터를 수집하기 위해 사용한다. 옵션이 정해지지 않으면사용자로부터 의도치 않은 다양한 응답을 수집할 수 있다.    따라서 일정한 입력 값이 필요한 경우,옵션을 정해서 사용자에게 제공해야 한다.    그런데, 이러한 목적은 라디오 버튼도 같다. ..
웹 UI 디자인 기본 문법 - 체크박스 (Checkbox) 아래의 포스팅을 간단하게 영상으로 시청하실 수 있습니다.    체크박스 (Checkbox) 체크박스는 사용자의 선택을 수집하기 위해 사용하는 UI 요소이다.사각형의 아이콘과 레이블로 구성되어 있다.   클릭하면 선택(✔)되고, 다시 클릭하면 해제(☐)된다.   하나 또는 여러 개의 옵션을 선택할 수 있다.   1개의 체크박스를 사용할 수 있다.여러 개를 함께 사용할 수도 있다.   체크박스는 왜 사용할까? 일정한 입력 값을 얻고, 정형화된 데이터를 수집하기 위해 사용한다.  옵션이 정해지지 않으면사용자로부터 의도치 않은 다양한 응답을 수집할 수 있다.   따라서 일정한 입력 값이 필요한 경우,정해진 옵션을 사용자에게 제공해야 한다.  그럼, 체크박스는 언제 사용할까? 1. 다중 선택이 가능할 때 체크박스..
웹 UI 디자인 기본 문법 - 라디오 버튼 (Radio button) 아래의 포스팅을 간단하게 영상으로 시청하실 수 있습니다.    라디오 버튼 (Radio button) 라디오 버튼은 사용자의 선택을 수집하기 위해 사용하는 UI 요소이다.원형의 아이콘과 레이블로 구성되어 있다.   라디오 버튼은 여러 옵션 중 한 개만 선택할 수 있다.옵션을 선택하면 기존에 선택되었던 옵션은 해제된다.  라디오 버튼은 왜 사용할까? 일정한 입력 값을 얻고, 정형화된 데이터를 수집하기 위해 사용한다.옵션이 정해지지 않으면 사용자로부터 의도치 않은 다양한 응답을 수집할 수 있다.   따라서 일정한 입력 값이 필요한 경우, 옵션을 정해서 사용자에게 제공해야 한다.그래서 라디오 버튼을 사용한다.   그런데, 여러 옵션 중 한 개만 선택하는 UI 요소가 또 있다. 바로 셀렉트 박스다. 만약, 라디..
유용한 무료 피그마 아이콘 플러그인 6 가지 추천 아래의 포스팅을 간단하게 영상으로 시청하실 수 있습니다.    웹이나 앱을 디자인하면 아이콘 세트가 필요합니다.그런데 아이콘 만들기, 직접하기엔 시간이 부족할 수 있습니다.이때 아이콘 라이브러리를 활용하면 작업 시간을 줄일 수 있습니다. 실무에 활용하기 좋은 피그마 무료 아이콘 플러그인 6 가지를 소개하겠습니다.피그마를 사용하지 않더라도 아래에 링크된 사이트를 이용하여 아이콘을 다운로드 받을 수 있습니다. 1. Material Symbols구글에서 제공하는 아이콘 세트입니다.2500개가 넘는 방대한 아이콘을 제공합니다.  선(Outlined), 채우기(Fill), 둥근(Rounded), 각진(Sharp) 스타일이 모두 있습니다.아이콘이 일관성 있게 디자인되어 있고, 필요한 종류가 대부분 있습니다.웹사이트..
웹 디자인 시스템 - 버튼 그룹 & 플로팅 액션 버튼 (FAB) 이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. --- 디자인 시스템 구축 과정에서 필요한 컴포넌트. 그 중 버튼 컴포넌트에 대해 정리해보았다. 버튼 그룹 (Button Group) 버튼이 여러 개일 때 간격을 공통으로 설정해야 한다. 간격이 매번 다르면 일관성이 떨어지고 유지보수하기 어려워진다. 사용자 경험 또한 좋아지지 않을 것이다. 간격이 너무 좁거나 넓지 않도록 유의한다. 머터리얼 가이드 3에서는 8 dp 이상의 간격을 권장하고 있다. 8 dp 미만으로 설정해도 문제 없지만 가급적 4의 배수를 추천한다. 참고: 머터리얼 가이드 2 - 4 dp & 8dp 그리드, 머터리얼 가이드 3 - 타겟 간격 위 예시처럼 다양하게 응용 가능하다. 다양한 종류의 버튼이..
웹 디자인 시스템 - 버튼 컴포넌트 상태 (State) 이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. --- 디자인 시스템 구축 과정에서 필요한 컴포넌트. 그 중 버튼 컴포넌트에 대해 정리해보았다. 버튼 컴포넌트의 상태 (States) 버튼에 마우스를 올렸는데 아무 변화가 없다면? 클릭해봤는데 아무 변화가 없다면? 제대로 동작이 되는 중인지 불안하고 답답할 것이다. 이런 사소한 불편함이 누적되면 안 좋은 사용자 경험을 초래한다. 따라서 버튼이 지금 어떤 상태인지 힌트를 주는 게 바람직하다. 사용자 경험을 더욱 긍정적으로 만들 수 있다. 1. 데스크탑 기준 기본 (Enabled) 클릭할 수 있는 버튼의 기본 상태 마우스오버 (Hovered) 버튼에 마우스 커서가 닿은 상태 기본 상태보다 한 톤 밝거나 어두운 배경 ..
웹 디자인 시스템 - 버튼 컴포넌트 스타일 이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. --- 디자인 시스템 구축 과정에서 필요한 컴포넌트. 그 중 버튼 컴포넌트에 대해 정리해보았다. 버튼의 가시성 버튼마다 우선순위가 있다. 우선순위에 따라 가시성의 차이를 두어 디자인한다. 가시성 높음 (우선순위 높음) 가장 필요로 하거나 눌렀으면 하는 버튼 사용자가 쉽게 누르도록 눈에 띄게 디자인한다. 강조색(Primary, Secondary, Tertiary)과 브랜드 색을 주로 사용한다. 예: 로그인, 제출, 작성, 전송, 구매, 팔로우, 확인 등 가시성 보통 (우선순위 보통) 눌렀을 때 영향이 작은 평범한 버튼 잘 보이지만 튀지 않도록 디자인한다. 예: 공유, 도움말, 설정, 이전으로, 취소 등 가시성 낮음..
웹 디자인 시스템 - 버튼 컴포넌트 이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. --- 디자인 시스템 구축 과정에서 필요한 컴포넌트. 그 중 버튼 컴포넌트에 대해 정리해보았다. 버튼의 구성 요소 기본적으로 버튼은 텍스트로 구성하지만, 아이콘을 추가하여 더 빠르고 명확하게 대상을 인식시킬 수 있다. 버튼의 크기 종류 버튼의 크기는 흔히 Small, Medium, Large의 3단계로 정할 수 있다. 필요하다면 4~5가지로 확장할 수 있다. 더 적게 줄일 수도 있다. 💡 크기를 나누는 이유는 무엇일까? 디자이너가 그리는 버튼의 크기가 모두 다르다고 생각해보자. 일관성이 떨어지고 유지보수하기 힘들어질 것이다. 디자이너가 한 가지의 버튼만 사용한다면 어떨까? 역시 쉽지 않다. 한 가지의 크기로 모든..
2023 AI 기반 UI·UX 디자인 트렌드 이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. --- 2023년을 맞아 새롭게 UI·UX 디자인 트렌드에 대해 알아보았다. 작년을 회고해보면 블록체인과 메타버스에 대한 사람들의 기대가 있었지만, 루나가 대폭락하고 FTX가 파산, 메타가 부진하는 등 시장의 불확실성이 커지고, 실리콘밸리에서 대량 해고가 시작되는 해였다. 디자인 분야에서는 미래지향적인 3D 요소와 애니메이션, Y2K 스타일이 다양한 플랫폼에서 활용되었고, 3D 요소에는 Claymorphism, 3D Chrome Effects, 3D Glass Texture 등이 눈에 띄었다. 시장의 흐름에 따라 디자인 트렌드도 변화한다. 2023년 디자인 트렌드 중 인공지능 기술을 이용한 디자인에 초점을 맞춰보..
디자인 시스템 구축하기 - 폰트 스타일 가이드 이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. *** 디자인 구축 작업에서 빼놓을 수 없는 과정, 디자인 시스템. 디자인 시스템에서 폰트는 어떻게 정리되어야 할까? 폰트 스타일 가이드에 대해 알아보자. 디자인에 있어 폰트는 아주 중요한 요소 중 하나이다. 폰트를 어떻게 쓰느냐에 따라 전달하려는 내용을 보다 효과적으로 보여줄 수 있기 때문이다. 특히 연속성을 띠는 시각 매체에는 폰트 스타일이 통일되어 있어야 매체의 가독성 또한 올라간다. (대표적인 예로는 책, 웹사이트, 앱 등이 있다.) 위 예시와 같이 하나의 연속된 컨텐츠에서 각기 다른 폰트 스타일을 사용한다면 사용자가 인식하는 과정에서 걸림돌이 됨은 물론, 하나의 컨텐츠로 보이지도 않게 된다. 본문 폰트 ..
페르소나란 무엇일까? (MIT 스타트업 바이블을 읽고...) 이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. *** MIT 스타트업 바이블을 읽고 UI·UX 디자이너로서 중요하다고 생각하는 개념들을 정리해보았다. 그 중 페르소나에 대해 정리해보았다. 페르소나 Persona는 '가면'이라는 뜻으로, 사회에서 자신이 가지는 또 다른 인격을 지칭할 때 흔히 쓰인다. 한편, 서비스 기획에서 페르소나는 주요 고객을 대표하는 특정 인물을 의미한다. 앨런 쿠퍼의 저서 "정신병원에서 뛰쳐나온 디자인(The Inmates Are Running the Asylum)"에서 처음 소개된 개념이다. 쉽게 말하면, 추상적이고 다양한 고객층을 특정하기 위해 실제 사용자 정보를 바탕으로 어떤 인물을 구체적으로 정의한 것이다. 예를 들면 대한민국 3..
UI·UX 디자인 스터디 - 게슈탈트 법칙으로 본 UI 디자인 이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. *** UI 디자인에 적용할 수 있는 원리는 무엇이 있을까? 관련된 디자인 원리에 대해 알아보았다. 게슈탈트의 그루핑 법칙 시각적 특징에 따라 정보를 그루핑하는 것을 게슈탈트의 그루핑 법칙(Gestalt grouping laws)이라 한다. 게슈탈트 심리학자들은 그루핑의 시지각을 설명하는 여러가지 법칙을 발표했다. 사람이 시각 정보를 보고 해석하는 방법을 이해하고 UI를 디자인하면, 더욱 사용하기 좋은 인터페이스를 만들 수 있을 것이다. 유사성의 원리 유사성(similarity)의 원리에 따르면, 사람은 유사한 모양이 모인 것을 한 그룹으로 보는 경향이 있다. 위의 예시처럼 사각형은 사각형끼리 원은 원끼리 한 그..