UIUX 디자인17 UIUX : 앱 서비스 설계 - 정보구조 설계 서비스 기획이 어느 정도 완료가 된 후, 본격적인 애플리케이션 기획 전에 가장 먼저 하는 것이 바로 정보구조 설계(IA)이다. 정보구조 설계는 앱의 뼈대로 서비스 전체의 흐름을 결정하는 정보 구조이다. 따라서 사용자가 원하는 정보를 빠르게 파악할 수 있도록 서비스에 맞는 정보구조를 설계하는 것이 가장 중요하다. 사용자에게 필요한 콘텐츠와 이용방식은 서비스별로 모두 다르다. 그렇기 때문에 정보구조를 설계할 때는 사용자의 입장에서 정보구조를 설계하는 것이 중요하다. 이번 포스팅에서는 정보구조를 설계하는 방법과 정보구조를 설계하기 위해 필요한 설계 방법들에 대해 알아보려 합니다. 정보구조 설계란 무엇인가 정보구조를 설계하기 위해서는 먼저 서비스가 가진 모든 기능과 정보를 나누고 배치할 위치를 정해야 한다. 그.. 2022. 12. 18. UIUX : 앱 서비스 설계 - 플로우차트 작성법 신규 앱 서비스를 기획한다면 제일 먼저 하는 일은 요구사항 정의와 이를 해결하기 위한 기능 명세서를 작성하는 것일 것이다. 이 두가지 작업이 완료되면 본겨적인 서비스 개발을 위해서 사용 동선을 설계해야하는데 이러한 작업을 플로우차트(Flow Chart)라고 한다. 플로우차트란? 플로우차트란 서비스를 사용하기 위해 수행하는 일련의 단계와 결정을 한눈에 파악할 수 있도록 도와주기 위해 시각적으로 표현한 자료이다. 각 단계는 정해진 다이어그램 기호에 맞춰 표현하며 진행 순서는 왼쪽에서 오른쪽으로 위에서 아래로 화살표를 이용하여 표현한다. 플로우차트는 다이어그램을 활용해 복잡한 프로세스를 이해하기 쉽도록 문서화하기 위해 주로 사용된다. 플로우차트가 필요한 이유는 크게 3가지 정도로 나눌 수 있는데, 첫 번째는,.. 2022. 12. 4. UIUX : 다크모드 UI 디자인 원칙 및 적용 가이드 디자인을 하고 있는 분들이라면 한 번쯤 다크 모드에 대해서 고민을 해보셨을 것이라고 생각합니다. 다크 모드를 단순히 디자인의 영역으로 생각할 수도 있지만 저는 디자인적인 영역뿐만 아니라 사용자의 UX측면에서도 다크 모드의 제공이 중요하다고 생각합니다. 이번 포스팅에서는 크게 3가지 측면에서 다크모드에 대해서 알아보려고 합니다. 첫 번째는 다크모드는 무엇이며 도대체 이걸 왜 해야 하는지, 또 요즘 대부분의 메이저 앱에서 다크 모드를 병행해서 제공하고 있는 이유를 두 번째는 다크모드의 대표적인 가이드를 확인하며 구현 시 고려사항과 이를 내 디자인에 적용하기 위한 디자인 가이드 제작 방법에 대해서 세 번째는 위에서 확인한 가이드를 피그마에서 실제로 적용하는 방법에 대해서 알아보려고 합니다. 1. 다크모드는 무.. 2022. 11. 26. UIUX : 터치 제스처의 중요성과 종류 모바일 앱은 마우스가 아닌 손가락으로 터치를 하여 앱을 조작하기 때문에 터치 제스처의 설정은 가장 기본이라고 할 수 있다. 터치 제스처에서 가장 중요한 것은 디바이스를 잡는 모양에 따라 달라지는 터치 영역을 확인하고 이에 맞춰 최적화된 터치영역을 설정하는 것이다. 모바일에서 무언가를 터치하려면 최소 44픽셀 정도의 영역을 가지고 있어야 하기 때문에 모바일 디자인은 단순히 시각적인 영역뿐만 아니라 터치 영역의 설정도 중요하다고 할 수 있다. 때문에 UIUX디자이너는 터치 제스처의 다양한 종류를 알고 설계 시 적절하게 적용해야 한다. 화면 설계 시 필수로 알아야 할 기본 터치 제스처의 종류는 크게 8가지이다. 1. 탭 : 화면을 한 손가락으로 짧고 가볍게 한번 터치하는 제스처로 주로 서비스나 아이템을 실행할.. 2022. 11. 12. UIUX : 디자인에서 그리드 시스템의 중요성 디자인을 처음 시작할 때 가장 많이 하는 질문이 아래와 같은 그리드 시스템과 관련된 내용일 것이다 그리드 시스템은 왜 설정해야 하나요? 그리드 시스템은 어떻게 설정해야 하나요? PC/Mobile별 그리드 시스템이 다른가요? 이 질문들에 답을 내기 위해서는 먼저 그리드 시스템이란 무엇인지를 한 번 정의해 볼 필요가 있을 것이다. 그리드 시스템이란? 디자인의 가장 기본이 되는 뼈대로 이를 주축으로 텍스트, 이미지, 버튼 등의 요소들의 배치를 돕는 가이드 시스템. 그렇다면 이러한 요소들을 배치하기 위해서는 꼭 그리드 시스템을 설정해야 할까라는 의문이 들 수도 있다. 이러한 의문을 해소하기 위해서, 요소를 배치하는데 그리드 시스템이 얼마나 도움이 되고 중요한지 다시 한번 정의해볼 필요가 있을 것이다. 그리드 시.. 2022. 11. 7. UIUX : 모바일 앱의 종류 모바일 앱 서비스 런칭을 준비하기 위해서는 모바일 앱의 종류를 알아고 제공할 서비스에 맞춰 구현할 앱을 선정해야 합니다. 사용자의 입장에서는 모두 비슷해 보일 수도 있지만 모바일 앱은 크게 4가지로 구분됩니다. 1) 모바일 웹 모바일 브라우저에서 구동되는 웹 장점: 개발 기간이 짧고 업데이트나 수정 변경이 용이, 별도의 설치 과정 불필요 단점: GPS나 센서 기능과 같이 스마트폰의 특정 기능 사용불가, 모바일 사용성과 호환성이 떨어짐 2)네이티브 앱 앱스토어를 통해 내려받아 설치하는 앱 장점: 구동 속도가 빠름, 스마트폰에 최적화된 개발 가능 단덤: 개발기간이 길고, 비용이 높다, 운영체제별로 대응을 해야하고, 스토어 등록 과정을 거치기 때문에 유지보수가 번거로움 3)웹 앱 통상의 웹보다 모바일에 더 최.. 2022. 9. 11. UIUX : 디자인 시스템 가이드라인 - 작업시 유의사항 요즘 새로운 프로젝트를 맡게 되어서 UIUX관련 정보를 정리하고 있습니다. 디자인가이드에 맞춰 컴포넌트를 만들기 전에 디자인가이드를 만들때의 유의사항을 분석하고 적립하기 위해서 아래와 같이정리해 보았습니다. 1.목적과 범위 구체화 [목적] 어떤 이유로 시스템과 디자인 원칙이 필요하다고 생각하게 되었는지 어떤 프로세스에서 디자인 결정이 어려운지 사용자 입장에서 어떤 부분이 디자인 일관성이깨지고 있는지 [범위] 어떤 서비스부터 적용할 건지 어떤 성격의 앱인지 (컴포넌트의 우선순위를 정하기 위해 중요) 2.AS-IS / TO-BE 정의하기 [AS-IS] 현재 브랜드/경쟁사 AS-IS분석을 통해 기능과 콘텐츠 분류 기능단위로 쪼개 비슷한 성격의 UI끼리 묶기 (ex 차량예약, 상담예약, 상세 콘텐츠확인 등) 분.. 2022. 8. 7. UI/UX : 디자인 컴포넌트를 만들 때 주의할 점 디자인 시스템을 만들때 가장 중요한 것 중에 하나가 컴포넌트입니다. 시스템의 시각 요소를 실제 화면에서 어떻게 보여줄지 컴포넌트로 정의를 하기 때문입니다. 컴포넌트에서 중요한 것은 기능의 위계와 시각적 중요도를 표현하는 기능적인 부분과 디자인 요소를 통해 브랜드와 서비스의 이미지를 만드는 이미지적인 부분 이렇게 2가지가 있습니다. 1.컴포넌트 위계 부여시 고려할 점 컴포넌트란? 기능 수행을 위한 모듈의 단위입니다. 즉 사용자가 쉽게 화면을 이해하고 동작하기 위해서는 컴포넌트간의 위계가 명확하고 직관적이여야 합니다. 따라서 컴포넌트는 UI설계 과정에서 부터 고려해서 기능의 속성과 화면의 목적을 정확히 파악해 제작해야합니다. 어떤 기능의 요소인지 명확하게 표현해야 함 중요도를 쉽게 파악할 수 있는 명확한 시.. 2022. 8. 7. 이전 1 2 다음
