디자이너가 알아야 할 것들/UI·UX Design (11) 썸네일형 리스트형 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)의 원리에 따르면, 사람은 유사한 모양이 모인 것을 한 그룹으로 보는 경향이 있다. 위의 예시처럼 사각형은 사각형끼리 원은 원끼리 한 그.. UI·UX 디자인 스터디 - 제품 개발 프로세스와 포지션 이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. *** UI·UX 디자이너가 디자인하는 제품의 개발 과정과 그에 따른 포지션은 어떻게 될까? 어떤 것이 있는지 알아보도록 하자. 제품 개발 프로세스 제품은 일정 기간 프로세스에 따라 개발된다. 회사마다 프로세스가 다르지만, 대표적인 제품 개발 프로세스가 몇 가지 있다. 그 중 전통적 모델인 워터폴과 비교적 새로운 린 스타트업, 애자일, 디자인 씽킹에 대해 말하고자 한다. 워터폴 모델 Waterfall Model은 폭포수 모델로, Top-down 방식의 제품 개발 프로세스이다. 개발 과정의 흐름이 마치 폭포수처럼 위에서 아래로 향하여 붙여진 이름이다. 순차적 방식으로 위계가 강한 대기업이나 납기일이 정해진 프로젝트.. UI·UX 디자인 스터디 - UI·UX란 무엇인가? 이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. *** UI·UX 디자이너로 취직했는데 왜 유저 리서치부터 사용성 테스트까지 해야 하는지 물어보는 경우가 왕왕 있다. 그야 "UI·UX 디자이너"로 취직했기 때문이지만 UI·UX를 몰라서 생기는 의문이다. 그럼 도대체 UI·UX가 뭐고 UI·UX 디자이너는 무엇을 해야할까? 지금부터 알아보자. UX란 무엇일까? User eXperience를 줄인 말로, 사용자 경험을 뜻한다. 사용자가 제품/서비스를 사용하여 얻는 경험을 사용자 경험이라 하며 UX 디자이너는 이를 디자인한다. 백화점 1층에 들어갔을 때 맡게 되는 화장품 향기에 머리가 아팠다던지, 지하철의 안내판을 보고 1번 출구를 찾기 쉬웠다던지, 웹사이트에 접속.. 타이포그래피(Typography) - 베이스라인(baseline)의 차이가 디자인의 차이로 최근, 스포카 한 산스 네오를 버튼에 사용해보았다. 그랬더니 아래와 같은 모양새가 나왔다. 뭔가 이상하다. 뭐가 이상할까? 버튼 안의 글자가 조금 위로 올라가 있는 것 같지 않나? 그래서 다시 한번 적용한 값을 확인해봤다. 분명히 버튼 안에 글자를 상하좌우 가운데로 정렬하였다. 내가 사용한 프로그램은 피그마여서 행간이 폰트 중앙을 기준으로 위아래 동일하게 적용된다. (CSS 기준 행간) 그런데도 폰트 자체가 위로 올라가 보여, 타 폰트와 동일한 값을 적용하여 비교해봤다. 스포카 한 산스 네오와 그 전 버전인 스포카 한 산스, 노토 산스 KR을 비교한 모습이다. 폰트 크기, 행간, 자간, 상하좌우 간격 모두 동일하게 적용했다. 그럼에도 스포카 한 산스 네오만이 위쪽으로 치우쳐보인다. 폰트 고유의 특징인 것.. UI·UX 디자이너를 위한 가이드 - 디바이스와 밀도 (깨지는 이미지) '이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. *** 다양한 밀도에서 깨지는 픽셀 논리적 픽셀 도입 후 여러 디바이스에서 같은 이미지를 같은 크기와 위치로 보여주게 되었지만 다른 문제가 발생한다. 고밀도 디스플레이에 저해상도 이미지를 나타내면 열화되는 것이다. 1dp에 4px을 요구하는 디스플레이에 2px의 이미지를 제공하면 2px을 4px 영역에 채우기 위해 시스템이 늘리기 때문이다. 그리고 고해상도 이미지여도 px이 홀수면 줄여지면서 소수점이 되어 이미지가 열화된다. 소수점의 픽셀은 온전한 1px의 집합이 아니라 선명할 수 없다. 특히 복잡한 이미지(풍경, 인물 사진..)보다 단순한 이미지(아이콘, 버튼..)가 심히 열화되어 보인다. 그래서 보통 각 밀.. 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 디자이너를 위한 가이드 - 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 디자이너를 위한 가이드 - 해상도와 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 디자이너를 위한 가이드 - 래스터화(Rasterization) 이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. *** 디자인을 하다 보면 접하는 공식이 있다. "웹용 이미지는 72 dpi여야 한다" "4나 8배수로 아이콘을 디자인하는 것이 좋다" 머릿속에 박혀 있지만 근본적으로 이해하고 있지는 않는 공식들. 왜 그런 것일까? 맥락을 정리해보기로 했다. 래스터화(Rasterization) 컴퓨터그래픽스(Computer Graphics)의 그림 표현 방식은 벡터 그래픽*과 래스터 그래픽*으로 나뉜다. 벡터 그래픽을 래스터 그래픽으로 변환하는 것이 래스터화이며, 화면을 통해 보는 모든 것은 래스터화된 결과물이다. *벡터 그래픽(Vector Graphics): 점, 선, 면의 정보(좌표, 휘도...)로 그림을 구성한다. 기하학에.. 이전 1 다음
