아티클
디자인과 개발, AI를 잇는 실무 인사이트를 전합니다.
웹 UI 디자인 기본 문법 - 셀렉트 박스 (Select)
아래의 포스팅을 간단하게 영상으로 시청하실 수 있습니다. 셀렉트 박스 (Select) 셀렉트 박스는 사용자의 선택을 수집하기 위해 사용하는 UI 요소이다.여러 옵션 중 하나만 선택할 수 있다. 일반적으로 드롭다운 형식으로 제공된다.박스를 클릭하면 리스트가 펼쳐지고, 옵션을 선택하면 리스트가 접힌다. 선택된 옵션은 박스에 표시된다.사용자는 자기가 무엇을 선택했는지 쉽게 파악할 수 있다. 셀렉트 박스는 왜 사용할까? 일정한 입력 값을 얻고, 정형화된 데이터를 수집하기 위해 사용한다. 옵션이 정해지지 않으면사용자로부터 의도
DX LAB·2025.03.28
웹 UI 디자인 기본 문법 - 체크박스 (Checkbox)
아래의 포스팅을 간단하게 영상으로 시청하실 수 있습니다. 체크박스 (Checkbox) 체크박스는 사용자의 선택을 수집하기 위해 사용하는 UI 요소이다.사각형의 아이콘과 레이블로 구성되어 있다. 클릭하면 선택(✔)되고, 다시 클릭하면 해제(☐)된다. 하나 또는 여러 개의 옵션을 선택할 수 있다. 1개의 체크박스를 사용할 수 있다.여러 개를 함께 사용할 수도 있다. 체크박스는 왜 사용할까? 일정한 입력 값을 얻고, 정형화된 데이터를 수집하기 위해 사용한다. 옵션이 정해지지 않으면사용자로부터 의도치 않은 다양한 응답
DX LAB·2025.03.18
웹 UI 디자인 기본 문법 - 라디오 버튼 (Radio button)
아래의 포스팅을 간단하게 영상으로 시청하실 수 있습니다. 라디오 버튼 (Radio button) 라디오 버튼은 사용자의 선택을 수집하기 위해 사용하는 UI 요소이다.원형의 아이콘과 레이블로 구성되어 있다. 라디오 버튼은 여러 옵션 중 한 개만 선택할 수 있다.옵션을 선택하면 기존에 선택되었던 옵션은 해제된다. 라디오 버튼은 왜 사용할까? 일정한 입력 값을 얻고, 정형화된 데이터를 수집하기 위해 사용한다.옵션이 정해지지 않으면 사용자로부터 의도치 않은 다양한 응답을 수집할 수 있다. 따라서 일정한 입력 값이 필요한 경우
DX LAB·2025.03.07
유용한 무료 피그마 아이콘 플러그인 6 가지 추천
아래의 포스팅을 간단하게 영상으로 시청하실 수 있습니다. 웹이나 앱을 디자인하면 아이콘 세트가 필요합니다.그런데 아이콘 만들기, 직접하기엔 시간이 부족할 수 있습니다.이때 아이콘 라이브러리를 활용하면 작업 시간을 줄일 수 있습니다. 실무에 활용하기 좋은 피그마 무료 아이콘 플러그인 6 가지를 소개하겠습니다.피그마를 사용하지 않더라도 아래에 링크된 사이트를 이용하여 아이콘을 다운로드 받을 수 있습니다. 1. Material Symbols구글에서 제공하는 아이콘 세트입니다.2500개가 넘는 방대한 아이콘을 제공합니다. 선(Out
DX LAB·2025.02.03
웹 디자인 시스템 - 버튼 그룹 & 플로팅 액션 버튼 (FAB)
이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. --- 디자인 시스템 구축 과정에서 필요한 컴포넌트. 그 중 버튼 컴포넌트에 대해 정리해보았다. 버튼 그룹 (Button Group) 버튼이 여러 개일 때 간격을 공통으로 설정해야 한다. 간격이 매번 다르면 일관성이 떨어지고 유지보수하기 어려워진다. 사용자 경험 또한 좋아지지 않을 것이다. 간격이 너무 좁거나 넓지 않도록 유의한다. 머터리얼 가이드 3에서는 8 dp 이상의 간격을 권장하고 있다. 8 dp 미만으로 설정해도 문제 없지만 가급적
DX LAB·2023.04.10
웹 디자인 시스템 - 버튼 컴포넌트 상태 (State)
이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. --- 디자인 시스템 구축 과정에서 필요한 컴포넌트. 그 중 버튼 컴포넌트에 대해 정리해보았다. 버튼 컴포넌트의 상태 (States) 버튼에 마우스를 올렸는데 아무 변화가 없다면? 클릭해봤는데 아무 변화가 없다면? 제대로 동작이 되는 중인지 불안하고 답답할 것이다. 이런 사소한 불편함이 누적되면 안 좋은 사용자 경험을 초래한다. 따라서 버튼이 지금 어떤 상태인지 힌트를 주는 게 바람직하다. 사용자 경험을 더욱 긍정적으로 만들 수 있다. 1.
DX LAB·2023.03.31
웹 디자인 시스템 - 버튼 컴포넌트 스타일
이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. --- 디자인 시스템 구축 과정에서 필요한 컴포넌트. 그 중 버튼 컴포넌트에 대해 정리해보았다. 버튼의 가시성 버튼마다 우선순위가 있다. 우선순위에 따라 가시성의 차이를 두어 디자인한다. 가시성 높음 (우선순위 높음) 가장 필요로 하거나 눌렀으면 하는 버튼 사용자가 쉽게 누르도록 눈에 띄게 디자인한다. 강조색(Primary, Secondary, Tertiary)과 브랜드 색을 주로 사용한다. 예: 로그인, 제출, 작성, 전송, 구매, 팔로우
DX LAB·2023.03.25
웹 디자인 시스템 - 버튼 컴포넌트
이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. --- 디자인 시스템 구축 과정에서 필요한 컴포넌트. 그 중 버튼 컴포넌트에 대해 정리해보았다. 버튼의 구성 요소 기본적으로 버튼은 텍스트로 구성하지만, 아이콘을 추가하여 더 빠르고 명확하게 대상을 인식시킬 수 있다. 버튼의 크기 종류 버튼의 크기는 흔히 Small, Medium, Large의 3단계로 정할 수 있다. 필요하다면 4~5가지로 확장할 수 있다. 더 적게 줄일 수도 있다. 💡 크기를 나누는 이유는 무엇일까? 디자이너가 그리는
DX LAB·2023.03.02
2023 AI 기반 UI·UX 디자인 트렌드
이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. --- 2023년을 맞아 새롭게 UI·UX 디자인 트렌드에 대해 알아보았다. 작년을 회고해보면 블록체인과 메타버스에 대한 사람들의 기대가 있었지만, 루나가 대폭락하고 FTX가 파산, 메타가 부진하는 등 시장의 불확실성이 커지고, 실리콘밸리에서 대량 해고가 시작되는 해였다. 디자인 분야에서는 미래지향적인 3D 요소와 애니메이션, Y2K 스타일이 다양한 플랫폼에서 활용되었고, 3D 요소에는 Claymorphism, 3D Chrome Effect
DX LAB·2023.02.11
디자인 시스템 구축하기 - 폰트 스타일 가이드
이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. *** 디자인 구축 작업에서 빼놓을 수 없는 과정, 디자인 시스템. 디자인 시스템에서 폰트는 어떻게 정리되어야 할까? 폰트 스타일 가이드에 대해 알아보자. 디자인에 있어 폰트는 아주 중요한 요소 중 하나이다. 폰트를 어떻게 쓰느냐에 따라 전달하려는 내용을 보다 효과적으로 보여줄 수 있기 때문이다. 특히 연속성을 띠는 시각 매체에는 폰트 스타일이 통일되어 있어야 매체의 가독성 또한 올라간다. (대표적인 예로는 책, 웹사이트, 앱 등이 있다.)
DX LAB·2022.03.25
페르소나란 무엇일까? (MIT 스타트업 바이블을 읽고...)
이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. *** MIT 스타트업 바이블을 읽고 UI·UX 디자이너로서 중요하다고 생각하는 개념들을 정리해보았다. 그 중 페르소나에 대해 정리해보았다. 페르소나 Persona는 '가면'이라는 뜻으로, 사회에서 자신이 가지는 또 다른 인격을 지칭할 때 흔히 쓰인다. 한편, 서비스 기획에서 페르소나는 주요 고객을 대표하는 특정 인물을 의미한다. 앨런 쿠퍼의 저서 "정신병원에서 뛰쳐나온 디자인(The Inmates Are Running the Asylum)
DX LAB·2021.11.16
UI·UX 디자인 스터디 - 게슈탈트 법칙으로 본 UI 디자인
이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. *** UI 디자인에 적용할 수 있는 원리는 무엇이 있을까? 관련된 디자인 원리에 대해 알아보았다. 게슈탈트의 그루핑 법칙 시각적 특징에 따라 정보를 그루핑하는 것을 게슈탈트의 그루핑 법칙(Gestalt grouping laws)이라 한다. 게슈탈트 심리학자들은 그루핑의 시지각을 설명하는 여러가지 법칙을 발표했다. 사람이 시각 정보를 보고 해석하는 방법을 이해하고 UI를 디자인하면, 더욱 사용하기 좋은 인터페이스를 만들 수 있을 것이다. 유
DX LAB·2021.06.08
UI·UX 디자인 스터디 - 제품 개발 프로세스와 포지션
이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. *** UI·UX 디자이너가 디자인하는 제품의 개발 과정과 그에 따른 포지션은 어떻게 될까? 어떤 것이 있는지 알아보도록 하자. 제품 개발 프로세스 제품은 일정 기간 프로세스에 따라 개발된다. 회사마다 프로세스가 다르지만, 대표적인 제품 개발 프로세스가 몇 가지 있다. 그 중 전통적 모델인 워터폴과 비교적 새로운 린 스타트업, 애자일, 디자인 씽킹에 대해 말하고자 한다. 워터폴 모델 Waterfall Model은 폭포수 모델로, Top-do
DX LAB·2021.06.06
UI·UX 디자인 스터디 - UI·UX란 무엇인가?
이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. *** UI·UX 디자이너로 취직했는데 왜 유저 리서치부터 사용성 테스트까지 해야 하는지 물어보는 경우가 왕왕 있다. 그야 "UI·UX 디자이너"로 취직했기 때문이지만 UI·UX를 몰라서 생기는 의문이다. 그럼 도대체 UI·UX가 뭐고 UI·UX 디자이너는 무엇을 해야할까? 지금부터 알아보자. UX란 무엇일까? User eXperience를 줄인 말로, 사용자 경험을 뜻한다. 사용자가 제품/서비스를 사용하여 얻는 경험을 사용자 경험이라 하며
DX LAB·2021.06.03
타이포그래피(Typography) - 베이스라인(baseline)의 차이가 디자인의 차이로
최근, 스포카 한 산스 네오를 버튼에 사용해보았다. 그랬더니 아래와 같은 모양새가 나왔다. 뭔가 이상하다. 뭐가 이상할까? 버튼 안의 글자가 조금 위로 올라가 있는 것 같지 않나? 그래서 다시 한번 적용한 값을 확인해봤다. 분명히 버튼 안에 글자를 상하좌우 가운데로 정렬하였다. 내가 사용한 프로그램은 피그마여서 행간이 폰트 중앙을 기준으로 위아래 동일하게 적용된다. (CSS 기준 행간) 그런데도 폰트 자체가 위로 올라가 보여, 타 폰트와 동일한 값을 적용하여 비교해봤다. 스포카 한 산스 네오와 그 전 버전인 스포카 한 산스, 노토
DX LAB·2021.01.03
UI·UX 디자이너를 위한 가이드 - 디바이스와 밀도 (깨지는 이미지)
'이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. *** 다양한 밀도에서 깨지는 픽셀 논리적 픽셀 도입 후 여러 디바이스에서 같은 이미지를 같은 크기와 위치로 보여주게 되었지만 다른 문제가 발생한다. 고밀도 디스플레이에 저해상도 이미지를 나타내면 열화되는 것이다. 1dp에 4px을 요구하는 디스플레이에 2px의 이미지를 제공하면 2px을 4px 영역에 채우기 위해 시스템이 늘리기 때문이다. 그리고 고해상도 이미지여도 px이 홀수면 줄여지면서 소수점이 되어 이미지가 열화된다. 소수점의 픽셀
DX LAB·2020.12.20
UI·UX 디자이너를 위한 가이드 - AOS와 IOS 밀도
이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. *** AOS와 IOS 밀도 안드로이드 기반 디바이스는 고도로 발전하여 현재 점유율이 가장 높고 디스플레이 밀도도 매우 다양하다. 그래서 안드로이드 OS(AOS)에선 DPI를 6단계로 나누고 DP라는 논리적 픽셀을 공통의 측정 단위로 정했다. 기준 밀도(mdpi)인 160 dpi가 초기 시장에서는 가장 보편적이었으나, 이제는 초고밀도(xhdpi)인 320 dpi가 가장 보편적이다. *안드로이드 배포 대시보드: developer.android
DX LAB·2020.12.20
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. 금속활자 시대부터 인쇄물의 글자, 획 등을
DX LAB·2020.12.20
UI·UX 디자이너를 위한 가이드 - 해상도와 PPI·DPI
이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. *** 해상도와 밀도 기준 *해상도(Resolution): 화면(또는 이미지)을 이루는 픽셀 수의 정도를 뜻한다. 같은 크기의 화면을 기준으로 픽셀*이 많아지면 해상도가 올라가고 화면은 선명해진다. (PPI 참고) *픽셀(Pixel): 그림 원소(Picture element)란 뜻으로, 줄여서 px이다. 화면(또는 이미지)의 가로, 세로 해상도를 표현하는 단위로 쓰인다. (예: 1920*1080 px ) 빛의 삼원색인 R, G, B 값을 표
DX LAB·2020.12.20
UI·UX 디자이너를 위한 가이드 - 래스터화(Rasterization)
이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. *** 디자인을 하다 보면 접하는 공식이 있다. "웹용 이미지는 72 dpi여야 한다" "4나 8배수로 아이콘을 디자인하는 것이 좋다" 머릿속에 박혀 있지만 근본적으로 이해하고 있지는 않는 공식들. 왜 그런 것일까? 맥락을 정리해보기로 했다. 래스터화(Rasterization) 컴퓨터그래픽스(Computer Graphics)의 그림 표현 방식은 벡터 그래픽*과 래스터 그래픽*으로 나뉜다. 벡터 그래픽을 래스터 그래픽으로 변환하는 것이 래스터
DX LAB·2020.12.20
디자이너가 알아야 할 웹 접근성: 7. 이해의 용이성
⁕⁕ 이 글은 디자이너로서 알아야 할 일부 웹 접근성 지침만을 발췌하여 풀이한 것이므로, 더 깊이 고려해야 한다면 위의 웹콘텐츠접근정지침 PDF 파일을 참고하면 될 것입니다. 7. 이해의 용이성(understandable) 이해의 용이성은 사용자가 장애 유무 등에 관계없이 웹 사이트에서 제공하는 콘텐츠를 이해할 수 있도록 제공하는 것을 의미한다. 이해의 용이성은 가독성, 예측 가능성, 콘텐츠의 논리성, 입력 도움의 4 가지 지침으로 구성되어 있다. 7.3. 콘텐츠의 논리성 7.3.1. (콘텐츠의 선형 구조) 콘텐츠는 논리적인 순서로
DX LAB·2020.11.12