코딩공부&일상기록 블로그

매일매일 조금씩

UX 9

웹디자인 - 디스플레이 해상도에 대해 제대로 알기

해상도는 웹 디자인에서 항상 고려되어야 하는 대상 입니다. 그 이유는 바로 디스플레이에 이용되는 단위가 정해져있기 때문입니다.  해상도란?이는 디스플레이 표현력의 세밀함 정도를 나타내고 화면이 표현하는 가로, 세로의 픽셀(Pixel)개수를 기준으로 1920x1080(Full HD), 3840x2160(4K UHD) 과 같이 표현합니다.  결국 픽셀 수가 많아질 수록 이미지가 더 선명해진다고 할 수 있고, 이는 디스플레이로 표현되는 것 모두에 해당되는 규격이기 때문에 웹디자인에서도 당연히 이 Pixel을 기준으로 모든 것을 표현하게 된다는 점을 알아두셔야 합니다.해상도 단위 보통 1인치(25.4mm) 안에 표현되는 화소(Pixel)나 점(Dot)의 수로 해상도를 표현합니다. 널리 쓰이는 단위로는 DPI와 ..

UX 2024.08.23

와이어프레임 작성하기(다운로드 템플릿 첨부)

와이어프레임의 개념miro에서 정의한 와이어프레임의 정의는 다음과 같습니다. 와이어프레임은 앱 또는 웹사이트 설계를 시각화하거나 새 프로젝트 요소를 매핑하는 간단한 방법입니다.단순한 개요를 만들면 서로 다른 요소가 어떻게 결합하는지를 시각화하고 잠재적 UX 이슈를 파악하기가 쉽습니다. 위에서 설명하듯 와이어프레임을 작성하는 목적은 1. 기획 내용의 재정립단순한 개요를 만들어 > 서로 다른 요소가 어떻게 결합하는지를 시각화 > 잠재적 UX 이슈를 파악 2. 작성 내용 공유협업 대상에게 기획 내용을 설명하고 이해시켜 결과물을 출시하기까지 전체 과정의 참고서를 만드는 것 이렇게 두 가지로 나뉜다고 생각하시면 됩니다.이 문서는 PM, 디자이너, 개발자 혹은 투자자나 결정권자 등 여러 대상을 위하기 때문에 간..

UX 2024.08.18

화면기획의 결과물 유스케이스, 스토리보드

이제 앞서 한 리서치들의 내용을 종합해 화면으로 구현하기 위해 하나의 기획자료가 되어야합니다. 화면기획서, 스토리보드가 가져야하는 내용과 그 것의 목적과 개념에 대한 설명입니다.유스케이스개념시스템의 동작을 사용자의 입장에서 표현한 시나리오한 시스템에 관련된 요구사항을 끌어내는 과정시스템을 분석하는 사람과 사용자가 함께 시스템의 사용 방법을 결정하는 데 도움을 주는 도구 작성 과정1. 시스템에 대한 사용자의 요구 사항을 찾는다.2. 시스템의 유스케이스와 관계된 모든 행위자(Actor)를 찾는다.3. 행위자가 요구하는 모든 유스케이스를 찾는다.4. 공통된 유스케이스에 대한 서비스들을 정제한다.5. 유스케이스를 목록으로 만들고, 각 유스케이스의 주요 요소들을 식별한다.6. 유스케이스 문서를 작성한다. 스토..

UX 2024.08.06

컨셉 모델

개념리서치 결과를 반영해 페르소나를 작성하고 경쟁 서비스의 벤치마킹이 끝났다면 아이디어를 공유할 수 있는 형태로 만들어야 한다. 이 때 사용되는 것이 아이디어를 시각화한 컨셉 모델(Concept model)입니다. 목적해당 모델로 프로젝트에 참여할 관리, 기획, 디자인, 개발, 테스터까지 전체 팀의 커뮤니케이션을 목적으로 한 도구가 될 것 입니다. 컨셉모델 작성법은 실제로 개발의 DB구조를 설계할 때 기초방법과 굉장히 흡사하며, 실제 나온 Concept Model을 참고하여 ERD를 그려내기 쉽기 때문입니다. 특히 개발자와의 커뮤니케이션이 이 Concept Model 하나로 한 방에 해결됩니다. 구조가 다듬어지면 모델을 사용하여 프로젝트의 범위를 함께 정할 수 있기 때문에 협업 중 일정관리에도 용이합니다..

UX 2024.08.05

디자인/유저 리서치 기법의 종류

리서치 중 단계 별로 이용될 수 있는 대표적인 기법에 대해 간단히 정리해보겠습니다. 상황과 순서에 따라 기법들을 적절히 배치한 뒤에 사용해야 하고 검증 리서치의 경우 의미있는 데이터를 얻어내기 위해 주의해서 기법을 결정해야 합니다.1. 선행 리서치단어-개념 매칭제품의 특정한 기능이나 서비스 정보에 대해 사용자들이 지각하는 이미지 조사에 유리제품에 대한 사용자 태도를 알기 위해 초반 시행 페르소나사용의 니즈, 동기, 서비스 사용 행태 등과 같은 사용자 특성 정보 제공사용자의 숨겨진 니즈(Unmet Need) 발굴, UX 방향성 도출 등을 목적으로 시행 카드 소팅(포스트잇 정리)주로 UX 디자인의 마지막 단계인 설계, 구현, 테스트 단계에서 사용,워크플로우(Workflow)나 네비게이션(Navigation)..

UX 2024.08.04

디자인 리서치 계획수립

앞서 다룬 글에서 리서치의 기본 개념과 프로세스에 대해 다뤘기 때문에 기법에 대해 설명하려고 합니다.우선 사용할 기법을 계획하는 법을 먼저 정리해보겠습니다.첫번 째 다이아몬드에서 세부적으로 기획할 수 있는 방법이라고 생각해주시면 될 것 같습니다. 앞서 정리한 더블다이아몬드 글을 참고 부탁드립니다.https://uihkk.tistory.com/12 디자인 리서치란?디자인 리서치의 정의디자인 프로세스에서 리서치의 중요성은 계속 대두되고 있습니다. 설계가 이루어 지기 전 단계인 조사, 기획 단계를 디자인 리서치라고 할 수 있습니다.  앞서 리서치에uihkk.tistory.com 디자인 리서치 계획 대상 선정내용 설계방법 계획일정 계획내용사용자 분류사용자 대상 선정이슈 정의질의 내용 설계리서치 가이드 작성리서치..

UX 2024.08.03

디자인 리서치란?

디자인 리서치의 정의디자인 프로세스에서 리서치의 중요성은 계속 대두되고 있습니다. 설계가 이루어 지기 전 단계인 조사, 기획 단계를 디자인 리서치라고 할 수 있습니다.  앞서 리서치에 대해 더 이해하자면 크게 두 가지의 정성적, 정량적 방식으로 나뉩니다.두 방식의 차이에 대해 정리하면 아래와 같습니다.정성적 리서치정량적 리서치기초적 원인과 동기에 대한 질적인 이해내용에 대한 분석대표성 있는 소규모비구조화, 유동적비통계적FGI, 심층 면접, 관찰 면접초기 이해의 전개, 발견, 진단자료의 계량화, 결과의 일반화수치에 대한 분석대표성 있는 대규모구조화, 방식 변경 불가통계적설문 조사, 스캐너 데이터최종 단계 측정, 예측, 추정*FGI(focus Group Interview) : 표적집단 인터뷰, 전문가가 특정..

UX 2024.08.02

좋은 UX 디자인을 위한 놓치지 말아야 할 원칙

우리는 일상 속에서 그 본연의 목적을 충분히 달성함으로써 인생의 의미를 풍요롭게하고 시작과 끝을 선명하게 구분할 수 있는 어떤 경험들을 하곤 한다. 이처럼 우리의 삶에 필수적인 요소로서 ‘참 좋은 경험이었어.’하고 자연스럽게 회상할 수 있는 바로 그 경험이 ‘진정한 경험’이다.   경험학습 이론을 대표하는 미국의 교육학자이자 철학자였던 John Dewey (존 듀이)는진정한 경험에 대해 위와 같이 정의하였습니다. 그렇다면, 사용자에게 ‘참 좋은 경험’을 제공하는 것이 UX의 본질이란 사실을 염두에 두고 그가 제시한 3가지 경험의 원리 중 상호작용의 원리를 살펴보자.   상호작용의 원리경험의 주체와 경험의 객체인 환경이 서로 주고 받는 상호작용. 인간이 행하는 행동과 그 행동의 결과로 환경이 인간에게 되돌..

UX 2024.08.01

UI/UX 정의

UXUser experience, 사용자 경험 사용 경험의 전반적인 느낌 유래 사람과 컴퓨터의 상호작용에 관한 다양한 주제를 연구하는 학문인 HCI(Human computer interaction)에서 사용자 중심 디자인(User centered design)을 설명할 때 종종 언급되곤 했습니다.도널드 노먼이 1993년 애플 컴퓨터의 부사장으로 재직하던 때, 자신의 직함을 ‘User experience architect’로 사용함으로써 UX라는 단어가 점차 세상에 알려지기 시작했습니다. 도널드 노먼은 휴먼 인터페이스나 사용성(Usability) 같은 표현이 지나치게 제한적이었기 때문에 UX라는 용어를 만들었는데 디자인 뿐 아니라 인터페이스, 물리적 상호작용, 매뉴얼 등 사용자가 시스템을 경험하는 과정에 ..

UX 2024.08.01