본문 바로가기

전체 글55

iOS 가이드라인 2 시각 요소 1. 적응성 및 레이아웃 iOS에서는 멀티태스킹, 분할 보기, 화면 회전 등의 작업을 하는 동안 다양한 장치에서 모양과 크기가 자동으로 변경되도록 인터페이스 요소와 레이아웃을 구성할 수 있다. 다양한 화면을 지원하려면 구성 요소 간의 관계를 규칙으로 정의하여 화면 크기가 변경되더라도 적용되도록 하는 방법이 필요한데, 이 방법을 자동 레이아웃이라고 한다. 자동 레이아웃은 환경 변화가 감지되면 분할 보기와 같이 지정된 조건에 따라 레이아웃을 자동으로 재조정한다. 2. 안전 영역 Safe Area tvOS에서 처음 도입된 개념인 안전 영역은 콘텐츠로 가려지지 않는 영역을 의미한다. iPhone X 스마트폰에서도 사용되기 시작했으며, 주요 콘텐츠와 버튼이 이 영역을 벗어나지 않도록 디자인해야 한다. .. 2023. 4. 11.
iOS 가이드라인 1 웹 아키텍처 iOS의 주제는 다음과 같은 특징을 통해 다른 플랫폼과의 차별화를 추구한다. 가독성 높은 텍스트 장식의 최소화 기능 주도 디자인 전체 화면 활용한 콘텐츠 표시 부드러운 모션과 미려한 인터페이스 콘텐츠 이외의 요소가 더 두드러지지 않도록 하는 것 이해하기 쉬운 아이콘 중요한 요소를 강조하는 명확함 베젤, 그러데이션, 그림자 등의 사용을 최소화 레이어와 모션을 통해 계층 구조 표현 콘텐츠 이동 시 깊이를 더해주는 화면 전환 또한, iOS는 미적인 통일성 Aesthetic Integrity, 일관성 Consistency, 직접 조작 Direct Manipulation, 피드백 Feedback, 은유 Metaphors, 사용자 조작 User Control을 디자인 원칙으로 하여 앱 개발 과정에 전반.. 2023. 4. 10.
모바일 디자인 가이드 요소 2 그리드 Grid 그리드는 '격자'를 의미하는 용어로, 디자인에서는 디자인 영역을 일정하게 구획하는 것을 의미한다. 일종의 지침이라고 생각하면 된다. 그리드 시스템을 구축하면 사진, 그림, 문자, 여백 등의 시각적 효과를 고려해 배열하고 구성하는 데 유용하며, 정보에 질서와 구조를 부여함으로써 사용자가 보고 이해하기 쉽게 일관성을 부여한다. 그리드 시스템을 만들려면 그리드 간의 간격을 띄우는 기준선이 있어야 한다. 간격을 띄우는 방법으로는 비율, 컨테이너, 터치 대상에 영향을 주는 기준선 그리드, 패딩, 증분 간격을 사용한다. 기본적으로 모바일, 태블릿, 데스크톱에 사용되는 모든 구성 요소는 8dp의 기본 그리드에 맞춰 정렬해야 한다. 이는 iOS에서도 마찬가지이다. 그리드를 구성하고 있는 요소는 컬럼 C.. 2023. 4. 10.
모바일 디자인 가이드 요소 1 모바일 디자인 가이드 요소 Z축과 그림자 모바일 기기의 화면은 평면으로 보이지만, 디자인적으로는 가상의 Z라는 깊이감을 가지고 있다. iOS는 iOS 7을 기점으로 플랫 디자인을 사용했지만, 최근에는 머티리얼 디자인을 도입해 적용하고 있다. Z축의 깊이감은 그림자를 통해 표현된다. 알림창이 열렸을 때를 예로 들어보자. 이때 기존의 콘텐츠는 뒤로 물러나면서 흐릿해지고 알림창이 앞으로 돌출된 것처럼 보인다. 그렇게 보이는 이유는 알림창이 앞으로 돌출된 것처럼 보인다. 그렇게 보이는 이유는 알림창에 그림자가 생겼기 때문이다. 그리고 그림자가 어디에 있느냐에 따라 알림창의 높이가 결정된다. 이처럼 그림자를 통해 깊이감이 표현되고 높낮이가 좌우되므로 효과적으로 시각적 요소를 구성하려면 Z축과 그림자에 대해 이해하.. 2023. 4. 9.
모바일 UI/UX 디자인의 종류 모바일 UI/UX 디자인의 종류 얼마 전까지 모바일 UI/UX 디자인의 종류는 모바일 운영체제에 의해 결정되었다. 안드로이드에서는 머티리얼 디자인, iOS에서는 플랫 디자인을 주로 사용했다. 전 세계 스마트폰 시장에서 모바일 운영체제의 사용 비중은 안드로이드가 약 88%, iOS가 약 11%이고, 모바일 UI/UX 디자인은 구글의 머티리얼 디자인과 애플의 플랫 디자인으로 양분되어 있다. 그런데 최근에는 플랫 디자인을 고수하던 iOS가 점차 머티리얼 디자인을 받아들이는 추세이다. 플랫 디자인과 머티리얼 디자인은 각각 장단점이 있으므로 유동적으로 사용하는 것이 바람직하다. 1. 스큐어모픽 디자인 Skeuomorphic Design 스큐어모픽 디자인은 현실의 객체를 디지털로 구현한 사실적이고 3차원적인 디자인.. 2023. 4. 9.
프로토타이핑 프로토타이핑의 효과 플로차트를 작성하고 프로토타이핑 테스트를 하는 것처럼 와이어 프레임을 작성한 후에도 프로토타이핑해 보는 것이 좋다. 프로토타이핑 Prototyping은 사전적으로 원형이나 견본을 의미하는데, 앱 개발에서는 실제 원하는 방식으로 서비스가 작동하고 구현되는지 테스트하는 과정을 말한다. 프로토타이핑하면 코딩하지 않고도 앱을 테스트할 수 있으므로 디자이너와 개발자가 서로 이해하면서 원활하게 의사소통을 할 수 있다. 또한, 성능과 구현 가능성 등을 시험하기 위해 전체 기능을 간편하게 만들어 보기 때문에 시행착오를 줄일 수 있다. 프로토타이핑 방법 1. 종이 프로토타이핑 일반적으로 제품이나 서비스가 동작하는 방식을 보여 주는 가장 빠른 방법은 종이 위에 디자인의 특정한 순간을 담아 스케치하고 숫.. 2023. 4. 8.
정보 구조 설계 플로차트 와이어프레임 정보 구조 설계 1. 정보 구조와 정보 구조 설계 정보 구조 (Information Architecture, IA)는 사용자가 원하는 정보를 불편 없이 사용할 수 있도록 만든 뼈대라고 할 수 있다. 앱에서는 화면 내에 내비게이션 체계나 레이블링 등을 도식화한 것을 의미한다. 정보 구조를 설계하는 이유는 기획자, 개발자, 디자이너 간에 워크플로를 공유하고 파일명, 화면, 용어를 공용화해 업무 처리를 쉽게 하기 위해서이다. 정보 구조를 설계하려면 앱의 전체 구성을 한눈에 볼 수 있는 메뉴 트리를 만들어야 한다. 또한 계층 간의 구조와 파일명 및 간략한 기능을 정보 구조 기능 정의를 통해 정리하는 것이 좋다. 정보 구조를 잘 설계해야만 사용자가 목표에 쉽고 빠르게 도달할 수 있으며, 서비스를 제공하는 견해에서.. 2023. 4. 8.
디자인 리서치 정리 : 모델링 디자인 리서치 정리 : 모델링 디자인 리서치 결과 정리 요소 여러 다양한 기법을 통해 리서치를 진행했다면 이후에 수반되는 후속 작업의 근거를 마련하기 위해 체계적인 분석과 정리를 통해 인사이트를 도출해야 한다. 리서치를 마치면 사용자의 말과 행동에 대한 데이터가 많이 쌓인다. 그중에서 의미 없는 데이터는 버리고 의미 있는 데이터를 선별해야 하는데, 이 과정을 키 파인딩이라고 하며, 보통 이슈별로 진행한다. 키 파인딩 작업 후에는 그것으로부터 시사점을 찾는 모델링 과정이 필요하다. 리서치 결과 정리는 발견의 게임이라고 할 정도로 분석력과 통합력이 필요한 작업이다. 데이터의 수렁에 빠지거나 형식화의 오류에 매몰되지 않도록 경험 있는 전문가와 함께 진행하는 것이 바람직하다. 리서치 결과에서 발견해야 할 요소에.. 2023. 4. 7.
UX 디자인 리서치 디자인 리서치의 구분 : 정성적 리서치와 정량적 리서치 디자인 리서치는 크게 정성적 리서치와 정량적 리서치로 구분된다. 정성적 리서치 (Qualitative Research)는 사용자가 원하는 바를 통찰해 결과를 얻는 방법으로, 가설에 대한 검증 또는 증명의 도구로 사용하며, 사용자 설문이나 웹 로그 분석 등을 이용한다. 정량적 리서치 (Quantitative Research)는 전반적인 상황이나 수치 데이터를 이용해 이해관계자를 설득하는 방법으로, 사용자를 한 개인으로 이해하며 내용에 대한 분석을 통해 결과를 도출한다. 정성적 리서치 *기초적인 원인과 동기에 대한 질적인 이해 *내용에 대한 분석 *대표성 있는 소규모 *비구조화, 유동적 *비 통계적 *FGI, 심층 면접, 관찰 면접 *초기 이해의 전개,.. 2023. 4. 6.
UX 디자인 프로세스와 개발 방법 UX 디자인 프로세스와 개발 방법 UX 디자인 프로세스 디자인 씽킹은 사람들의 행동과 요구에 대한 관찰을 기반으로 분석적 사고와 직관적 사고를 융합해 도출하는 문제 해결 접근 방식을 말한다. 고객을 관찰하고, 정의하고, 개발하고, 배포하기까지의 반복 상황을 프로세스로 만들면 쓸데없는 낭비를 최소화할 수 있다. UX 디자인 프로세스는 시장 분석과 대상 설정을 통해 문제 요소를 발견하고 목표를 세운 후 현장 연구 결과를 활용해 전략을 수립하고 프로토타이핑과 테스트를 거치는 과정의 순환이라 할 수 있다. 대표적인 디자인 프로세스는 영국 디자인 카운슬에서 개발한 디자인 씽킹 방법론 중 하나인 더블 다이아몬드이다. 더블 다이아몬드 모델은 문제를 정의하는 과정과 솔루션을 만드는 과정이 한 점에서 시작되어 확산과 수.. 2023. 4. 6.
UI/UX 디자인의 최신 추세 UI/UX 디자인의 최신 추세 디자인 추세 1. 맞춤형 일러스트레이션과 스토리텔링 맞춤형 일러스트레이션은 웹 사이트와 모바일 앱의 이야기를 보여주거나 플랫폼의 분위기를 설정해 시각적 스토리텔링을 만들고 앱의 기능과 이점을 제시한다. 이러한 일러스트레이션은 실제 세계와 유사한 시각적 연관성을 설정함으로써 직관적인 상호작용을 제공하고 화면을 역동적이고 활기차게 한다. 그레이디언트를 활용하거나 그림자를 적용해 상표 가치의 독창성을 표현하는 것은 물론, 사용하고 있는 페이지의 언어가 모국어가 아닌 경우 발생할 수 있는 텍스트 인식의 문제를 해결해 접근성을 향상하고 콘텐츠의 일관성을 높여 준다. 2. 아이소메트릭 디자인 Isometric 아이소메트릭 디자인은 2차원 요소로 3차원 객체를 그리는 방법이다. 평면 디.. 2023. 4. 6.
모바일 앱의 종류 모바일 앱의 종류 모바일 앱은 모바일 기기에 사용되는 응용 프로그램으로, 스마트폰 앱 그뿐만 아니라 태블릿, 스마트워치, 웨어러블 기기용 앱이 포함된다. 대부분의 모바일 앱은 iOS용과 안드로이드용으로 구분되며, 각 OS에 따라 구글 플레이 스토어 또는 애플 앱 스토어에서 사용자가 직접 내려받아 설치한다. 하지만 설치 없이 사용하는 앱도 있으며, 최근에는 앱보다는 방대한 양의 콘텐츠를 제공하기 위해 반응형 웹으로 앱을 대신하기도 한다. 모바일 앱의 종류는 대표적으로 네이티브 앱과 하이브리드 앱으로 구분되지만, 최근에는 프로그레시브 웹 앱과 모바일 웹도 앱의 종류에 포함된다. 1. 네이티브 앱 Native APP 네이티브 앱은 모바일 운영체제 제조사에서 제공하는 개발 언어를 사용해 각각의 고유 모바일 운영.. 2023. 4. 5.
UX의 이해 UX의 개념 사용자 경험(User eXperience)은 사용자와 컴퓨터의 상호작용을 연구하는 데 사용된 개념으로, 소프트웨어와 하드웨어 개발에서 비롯된 다양한 원리를 기반으로 한다. 현재 이 개념은 컴퓨터뿐만 아니라 서비스, 상품, 프로세스, 사회, 문화에 이르기까지 널리 응용되고 있다. UX에는 "경험하다' 라는 동사적 의미와 '경험' 이라는 명사적 의미가 함께 포함되어 있다. UX의 사전적 의미는 사용자가 어떤 시스템, 제품, 서비스를 직, 간접적으로 이용하면서 느끼고 생각하는 총체적 경험이다. 기능이나 절차상의 만족뿐만 아니라 지각 가능한 모든 면에서 사용자가 참여, 사용, 관찰하고 상호 교감을 통해 알 수 있는 가치 있는 경험 전체를 말한다. 즉 UX는 제품의 각 요소가 사용자에게 주는 개별 감.. 2023. 4. 3.
휴리스틱 평가 휴리스틱의 어원은 발견하다라는 의미의 그리스어 heuriskein이다. 휴리스틱 평가 (Heuristic Evaluation) 는 인간의 직관이나 경험에 기반하여 문제를 해결하거나 학습, 발견하는 방법을 지칭한다. 사용성 평가에서는 휴리스틱 평가 척도의 준수 여부를 사용성 전문가가 판단하며, 초기 단계의 시스템 개발이나 평가에 주로 사용한다. 개인의 주관적인 평가가 이루어지기 때문에 평가자의 지식이나 경험의 폭에 따라 결과가 달라질 수 있으며 계량적인 평가 자료를 만들기 힘들다는 단점이 있지만, 저렴한 비용으로 적은 수의 평가자를 투입해 비교적 정확한 결과를 얻을 수 있다는 장점이 있어 일반적으로 많이 사용된다. 1. 시스템 상태의 시각화 (Visibility of system status) * 피드백의.. 2023. 4. 3.
UXUI 디자인개요 UI의 이해 인터페이스의 구분 인터페이스 (interface)는 서로 다른 두 시스템이나 장치 또는 소프트웨어 등을 이어주는 접속장치로, 쉽게 말해 두 대상을 이어주는 매개체라 할 수 있다. 여기서 매개체는 크게 입력과 출력으로 구성된다. 입력은 한쪽 장치가 다른 쪽에 정보를 전달하는 것이고, 출력은 전달된 정보를 다른 장치가 받아들이는 과정이라고 할 수 있다. 인터페이스는 연결하는 대상에 따라 크게 하드웨어 인터페이스, 소프트웨어 인터페이스, 사용자 인터페이스로 구분할 수 있다. 하드웨어 인터페이스 : 컴퓨터, 모니터와 같이 기계와 기계를 연결하는 매개체를 의미한다. 소프트웨어 인터페이스 : 소프트웨어 간의 연결을 위한 매개체를 의미한다. 컴퓨터 내부에서 응용프로그램과 운영체제가 상호 작용을 할 수 있.. 2023. 4. 2.

티스토리툴바