최철호

모바일 UI 디자인 기본 요소 - 타이포그래피 계층

최철호 — Tue, 07 Jan 2025 14:42:28 GMT

타이포그래피에서 가독성이 쉽고 효율적인 읽기에 집중한다면, 계층 Hierarchy은 정보를 빠르게 파악할 수 있도록 돕는다. 사용자는 모바일에서 긴 글을 집중해서 읽기도 하지만 대부분 스크롤하면서 훑어본다. 따라서 빠르게 읽을 만한 정보를 탐색하고 중요한 정보를 파악할 수 있도록 타이포그래피 계층이 필요하다. 타이포그래피 계층 Typography Hiera

모바일 UI-모바일 타이포그래피 환경과 읽기 패턴

최철호 — Thu, 02 Jan 2025 09:19:24 GMT

타이포그래피를 통해 제품의 사용성과 가독성을 향상하기 위해서는 모바일의 특성과 사용자의 읽기 패턴을 이해해야 한다. 이 글에서는 모바일과 인쇄 매체의 차이와 사람들이 모바일과 웹에서 글을 읽는 방식에 대해 설명한다. 모바일 타이포그래피 환경 모바일 화면은 작고 해상도가 낮아 종이보다 읽기가 어렵고, 사용자는 주로 이동 중이나 다양한 환경에서 모바일을 사용하

모바일 UI디자인 기본 요소 - 타이포그래피 2 가독성 - 모바일 환경에 최적화된 가독성 가이드

최철호 — Sun, 13 Oct 2024 14:27:08 GMT

“타이포그래피가 해야 할 지극히 당연한 의무는 정보를 글로 전달하는 일이다. 무슨 일이 있더라도 이 의무만은 면제될 수 없다. 만약 읽을 수 없는 인쇄물이 있다면 무용지물에 불과하다.” (에밀루더. 타이포그래피) 타이포그래피의 가장 큰 목적은 정보 전달의 효율성이다. 특히 모바일 환경에서는 읽기 쉽고 의미를 효율적으로 전달하는 가독성과 판독성이 중요하다.

모바일 UI 디자인 기본 요소 - 타이포그래피 1 - 사용자 경험을 향상하는 인터페이스 디자인을 위한 타이포그래피

최철호 — Mon, 03 Jun 2024 13:41:58 GMT

타이포그래피란 활자를 뜻하는 타이포 typo화 화풍이나 서풍을 의미하는 그래피 graphy의 합성어이다. 타이포그래피는 인터페이스에서 글 Text에 담긴 의미를 효율적으로 전달하고, 계층구조를 명확히 하기 위해 활자 Typeface를 배열하는 기술이다. 미술대사전 - 용어 편에 따르면 “오늘날에는 뜻이 바뀌어 사진까지도 첨가하여 그래픽 디자인 전체를 가리

UX 원칙 - One thing per page - 모바일 UI·UX 디자인 원칙

최철호 — Sun, 21 Jan 2024 11:13:36 GMT

“One thing per page”는 한 페이지에 한꺼번에 많은 정보 입력을 요청하기보다 단계를 나눠 한 가지 질문에 해당하는 입력과 선택을 요청하는 인터페이스가 더 사용성이 높다는 디자인 패턴 또는 원칙이다. 개요 모바일은 작은 화면으로 인해 콘텐츠를 읽기가 어렵다. 키보드 같은 외부 입력도구가 없어 작은 화면 내의 가상의 키보드에 엄지손가락으로 입력

UX 원칙 - 근접성 Proximity - 근접한 개체들은 동일한 개체로 인식된다

최철호 — Mon, 06 Nov 2023 05:55:23 GMT

근접성은 서로 가까이 있는 디자인 요소는 유사한 기능이나 특성을 공유하는 동일한 그룹으로 인식된다는 원칙이다. 사람들은 요소들의 거리가 가까이 있으면 서로 연관성이 있다고 인식하고 거리가 떨어져 있으면 관련이 없다고 인식한다. 근접성은 ‘게슈탈트의 지각 원리’의 여러 가지 원리들 중 하나다. 관련된 요소를 서로 가깝게 배치하고 관련되지 않은 요소를 분리하는

모바일 UI 디자인 기본 요소 - Tab bar - 모바일 앱의 글로벌 내비게이션 컨트롤 Tab bar

최철호 — Mon, 25 Sep 2023 12:22:55 GMT

탭바 Tab bar는 사용자가 앱 내에서 중요한 콘텐츠 사이를 빠르게 전환할 수 있도록 하는 글로벌 탐색 컨트롤 Global navigation control이다. Tab bar는 사용자가 현재 탐색 상태를 유지하면서 계층 구조의 최상위 레벨 Top Level의 콘텐츠 그룹에 빠르게 접근할 수 있도록 한다. 글로벌 내비게이션이란? Tab bar를 디자인

생각에 관한 생각 책소개 - 사용자의 생각에 관한 생각

최철호 — Wed, 10 May 2023 09:49:45 GMT

최근 디자인과 관련해서 많은 관심을 가지는 점 중 하나는 고객 또는 사용자는 앱을 통한 구매여정에서 상품의 선택과 구매 결정을 어떻게 하는가입니다. 고객이 상품을 선택하고 구매를 결정하는 심리적인 요인에 대해서 많은 정보를 찾아보고 디자인에 반영하려고 노력하고 있습니다. 그러던 중 '생각에 관한 생각'이라는 벽돌보다 큰 책을 읽게 됐습니다. 난해한 부분이

모바일 UI 디자인 - 아이콘 디자인 참고 자료 모음 - 모바일 앱 아이콘 세트 디자인 시 참고할 자료와 가이드 모음

최철호 — Mon, 05 Sep 2022 04:03:38 GMT

모바일 앱의 아이콘 세트를 디자인하기 전 아이콘의 구조와 형태를 알아야 합니다. 다음은 제가 앱과 웹 아이콘 디자인을 하면서 참고하고 많은 도움을 받았던 아이콘 라이브러리와 디자인 가이드들을 소개합니다. 애플과 구글 등 주요 플랫폼의 아이콘 라이브러리에 대해 다룹니다. 주요 디자인 시스템의 디자인의 아이콘 가이드와 피그마 리소스에 대해서도 정리합니다.

모바일 UI 디자인 - 접근성Accessibility - UI/UX 디자이너를 위한 접근성 가이드

최철호 — Wed, 16 Mar 2022 03:42:20 GMT

웹 접근성(Web Accessibility - 이하 접근성)은 내용이 방대하여 이해하기 어렵고 실무에 어떻게 반영해야 할지 막막했다. 이 글은 디자이너가 쉽게 이해하고 실무에 반영할 수 있는 모바일 UI 접근성 가이드를 목표로 한다. - 모바일 웹/앱에 중점을 두고 작성했다.(데스크톱에 관한 내용은 생략됐거나 비중이 떨어진다) 접근성이란? 접근성이란 ‘모

꼭 필요한 것만 디자인하자

최철호 — Sun, 19 Dec 2021 10:58:50 GMT

“ 사용자의 요구에 따라 애플리케이션을 개선하려고 할 때, 안 좋은 방향으로 가려는 경향이 있다. 겨우 10%의 사용자를 위한, 또는 전체 사용량의 10% 만을 위한 기능들이 추가됨으로써 나머지 90%의 기능성을 가로막는다. 그게 아니면 깔끔한 인터페이스를 어지럽히고, 가장 많이 쓰이는 기능을 의 사용에 방해가 된다. 이런 ‘만능 지향(Creeping

모바일 UI 디자인 기본 요소 - 아이콘 1 - UI에서 그림 문자

최철호 — Sat, 21 Sep 2019 06:37:15 GMT

아이콘은 모바일 사용자 인터페이스(GUI)의 핵심 개념 중 하나이다. 아이콘은 명령(Action), 상태(State), 특정 기능과 정보를 상징적으로 단순하게 시각화하여 디자인된 그래픽 요소이다. 사용자는 아이콘을 보고 사전에 알지 못한 기능이나 명령을 직관적으로 이해하고 상호작용할 수 있다. 잘 디자인된 아이콘은 핵심적인 내용과 기능, 명령 Action

모바일 UI 디자인 기본 요소 - 버튼 - 가장 본질 적인 모바일 UI 컨트롤

최철호 — Mon, 12 Nov 2018 09:07:36 GMT

버튼 Button은 사용자가 데이터를 전송하거나 기능을 실행하도록 하는 명령 컨트롤 imperative control이다. <About Face 4>에서 엘런 쿠퍼는 “컨트롤의 세계에서 가장 본질적인 요소는 버튼이다. 버튼은 수없이 많은 얼굴을 지녔지만 실상은 하나다. 버튼을 클릭하는 순간 이에 연결된 시행(동사)은 즉시 발효된다.”라고 했다. 버튼의 가장

모바일 커머스-검색 UX가이드 - 더 나은 검색 경험 개선을 위한 디자인

최철호 — Fri, 22 Jun 2018 06:34:42 GMT

검색은 모바일에서 핵심 사용자 활동이다. 모바일 커머스에서 검색은 가장 기본적인 동작이며 수익성 있는 앱이나 사이트를 만드는데 중요한 요소이다. 사용자가 원하는 상품을 찾지 못한다면 해당 상품은 판매할 수 없다. 검색을 통해 사용자는 상품을 빠르게 찾고 구매할 수 있다. 모바일 커머스는 지속적으로 성장하고 있다. 매년 70~80%의 성장을 이어가고 있다.

모바일 커머스-상품명 UX가이드

최철호 — Thu, 01 Feb 2018 06:01:52 GMT

커머스에서 검색을 통한 유입 비율은 직접 유입 비율에 비해 훨씬 높다. 상품 페이지에서 상품명은 고객이 상품을 쉽게 찾는데 초점을 맞춰야 한다. 즉, 검색 엔진 최적화할 때 가장 신경 써야 할 부분이 상품명이다. 고객의 언어를 사용하여 상품명을 작성해야 한다. 상품 페이지에서 상품명은 고객이 상품을 쉽게 찾는데 초점을 맞춰야 한다. 네이버나 구글 검색 시

모바일 UI 디자인 기본 요소 - 텍스트 필드 - 가장 대표적인 입력 컨트롤

최철호 — Tue, 16 Jan 2018 06:03:43 GMT

텍스트 필드 Text input field는 사용자가 문자와 숫자를 직접 입력할 수 있는 입력 컨트롤이다. - 입력 컨트롤은 사용자가 정보를 앱과 웹사이트에 입력할 수 있게 한다. - 텍스트 필드는 가장 대표적인 입력 컨트롤이다. 사용자가 입력 필드 Input field를 탭 하면 텍스트 입력이 가능하도록 키보드가 화면에 나타나고 입력 필드 내에 커서가 표

모바일 UI 디자인 기본 요소 - 색채 Color - UI 디자인에서 색채의 사용

최철호 — Fri, 09 Jun 2017 06:34:44 GMT

색채 color는 사용자 인터페이스에서 중요한 시각적이고 기능적인 요소이다. 또한 브랜드 정체성을 표현하고 앱의 스타일을 결정하는 중요한 요소 중 하나이다. 네이버의 녹색이나 카카오의 노란색을 떠올려 보면 알 수 있다. 사용자 인터페이스 측면에서는 색채는 즉각적이면서 강력한 상호 작용을 유도한다. 색채와 UI 디자인 색채는 사용자에게 상호작용 요소를 직관

모바일 UI 디자인 기본용어 - 컨트롤 - UI 디자인에서 가장 먼저 이해해야 할 컨트롤에 대하여

최철호 — Sat, 22 Apr 2017 03:46:52 GMT

이글에서는 UI 디자인에서 가장 기본적인 개념인 UI Control에 대해서 이야기 하고자 한다. 모바일 UI 디자인 시 고려해야 할 가이드라인 모음을 쓰면서 UI 다자인 기본 용어에 대해 정리를 해야 할 필요성을 느꼈다. 그중에서 사용자 인터페이스(UI)의 가장 기본인 컨트롤(Control)에 대해 이야기하고자 한다. 대부분의 UX가이드에서 컨트롤이란

커머스 아이콘

최철호 — Wed, 29 Mar 2017 11:14:06 GMT

커머스 관련 아이콘을 공유합니다. 일러스트로 디자인했고 약 390개 정도 됩니다. 아래 파일 다운로드하시고 압축을 푸시면 AI파일로 일러스트레이터에서 열어서 사용하실 수 있습니다. 레이어로 그리드도 같이 있어 수정해서 쓰실 수 있습니다. 안드로이드 아이콘을 기반으로 디자인을 변형했습니다. 안드로이드 아이콘의 라운드를 최소화해서 좀 더 세련련돼 보이도록 했습

모바일 UI·UX 디자인시 고려해야 할 가이드라인 5 - 애플 iOS HIG와 Material design 가이드를 중심으로

최철호 — Tue, 28 Feb 2017 05:22:25 GMT

41. 한 화면에 뒤로 가기 버튼은 하나여야 합니다. 작은 화면에 동일한 기능을 중복 배치하는 것은 사용자에게 혼란을 줍니다. 하단 텝바(bottom navigation bar)가 있는 앱의 경우 상단 내비게이션 바와 기능이 중복되지 않아야 합니다. 불필요한 기능이나 자주 사용하지 않는 가능은 숨기거나 제거해야 합니다. 콘텐츠 페이지에서 중요한 것은 사용