God is in the details

UX(User eXperience) 디자인이란 용어 자체에서 알수 있는 것처럼, 제품 디자인의 핵심은 사용자 경험이다. 훌륭한 사용자 경험을 설계하기 위한 가장 좋은 방법은 바로 사용자가 누군지 파악하고 공감하는 것이다. 공감이란 특정 상황에 처한 다른 사람의 감정이나 생각을 이해하는 능력이다. 사용자와 공감하는 UX 디자이너는 더욱 향상된 제품을 디자인할 수 있습니다. 디자이너가 사용자의 욕구와 니즈를 예측하는 능력이 뛰어날수록 사용자는 제품의 디자인을 편안하게 느끼고, 더 나아가 장기적으로 제품과 상호작용할 가능성이 높아진다. 사용자와 공감하는 방법공감능력은 연습을 통해 충분히 향상될 수 있기 때문에 너무 큰 부담을 가질 필요는 없다. UX 디자이너가 공감능력을 기르는데 도움이 되는 6가지 팁: 1)..

Google UX Design Certificate의 첫 번째 과정인 Foundations of User Experience(UX) Design을 수료하고 두 번째 과정인 Start the UX Design Process: Empathize, Define, and Ideate가 시작되면 첫 번째 포트폴리오 프로젝트를 선택하게 된다. 첫 번째로 디자인하는 포트폴리오 프로젝트는 바로 모바일 앱. 구글 온라인 커리큘럼에서는 Sharpen 웹사이트에서 빠르게 여러 디자인 프롬프트를 생성해 보고 영감을 주는 프로젝트를 하나를 고르도록 안내한다. 다만, 개인적으로 실제로 존재하는 브랜드의 앱을 새롭게 디자인하거나 개선하는 형태의 포트폴리오 프로젝트를 진행하고 싶었다. 그리고 그렇게 고르게 된 브랜드는 바로 잭슨피자..

인간의 뇌는 뛰어난 정보처리 기계이자 놀라울 정도로 많은 양의 정보를 저장할 수 있다. 뇌가 이렇게 많은 양의 정보를 저장할 수 있는 이유는 반복된 패턴을 기반으로 '정신적인 단축키'를 만들어내기 때문이다. 이러한 단축키를 통해 우리는 정보를 더 빠르게 처리하고 관련된 정보를 그룹화시킬 수 있다. 하지만 이러한 반복된 사고 패턴은 특정한 대상에 대한 편향되거나 부정확하거나 또는 비합리적인 결론으로 이어지는 원인이 되기도 한다. 이러한 편향은 사용자 리서치에 심각한 영향을 미쳐 제품의 최종 디자인에 부정적인 형태로 나타날 수 있다. 따라서 편향이 UX 디자이너에의 작업에 미치는 영향과 이를 극복할 수 있는 방법을 살펴보려고 한다. 데이터 수집과정에서의 편향 방지 우리는 모든 사람이 편향을 가지고 있다는 사..

UX 리서치는 관찰과 피드백을 통해서 사용자의 행동, 니즈 그리고 동기를 이해하는데 포커스가 맞춰져 있다. 우리가 디자인하는 제품은 가정이 아닌 리서치를 통한 팩트를 근거로 개발되어야 한다. UX 리서치는 디자이너가 생각하는 사용자의 니즈와 사용자의 실제 니즈를 정렬한다. UX 리서치는 제품 개발 주기 (Product Development Life Cycle) 5단계에 아래와 같이 적용된다: Foundational Research 기본 리서치는 항상 디자인을 시작하기 전에 진행된다. 제품 개발 주기의 1단계에 해당하는 브레인스토밍 단계에서 진행되며, 사용자를 공감하고, 그들의 니즈를 이해하는데 도움을 주어 새로운 디자인 방향성에 대한 영감을 제공한다. 이 단계에서 페르소나와 유저 스토리를 만든다. 기본 ..

목차 시작하며오늘 오전에 2023년 웹디자인기능사 4회 실기시험에 응시했고 최종 합격했다. 코딩에 '코'자도 모르던 나였기에, 실기시험을 처음 준비할 때는 많이 막막했다. 하지만 꾸준히 공부하다 보니 어렵게만 보였던 코딩의 개념들이 서서히 이해되기 시작했고, 어느 순간부터는 코딩을 즐기고 있는 나를 발견했다.  지난 몇 개월간 독학으로 시험을 준비했던 과정들을 공유해보려고 한다.자바스크립트 vs 제이쿼리웹디자인기능사는 Javascript 나 jQuery 중 선택해서 애니메이션을 구현해야 한다. 상대적으로 구조가 간단한 jQuery를 암기해서 시험에 응시하는 경우가 많은 것 같다. 다만, jQuery는 사장되어 가는 라이브러리기도 하고, 시험을 보는 목적자체가 스펙이 아닌 장기적으로 코딩지식을 쌓아가는데 ..

E-1: 김치이야기 와이어프레임 살펴보기 E유형은 가로만 반응형인 D형과 다르게 가로&세로 모두 반응형으로 제작해야 한다. 영역별 애니메이션: 서브메뉴: 개별 세로 슬라이드 이미지: 좌우 슬라이드 레이어 팝업 E-1: 김치이야기 와이어프레임 구성하기 Visual Studio Code를 실행하고, 아래와 같은 구조로 파일을 생성한다: HTML을 사용해서 와이어프레임의 기본구조를 만든다. 먼저 Main과 Footer 두 영역으로 구분한다: CSS reset 작업을 하고 기본 구조를 정의한다: *세로(Height)는 %를 인식하지 못하므로 대신 vh 값을 사용한다. @charset "UTF-8"; /* reset */ * { margin: 0; padding: 0; color: #333; } a { text-..

D-1 조이컨트리클럽 와이어프레임 살펴보기 기존 A, B, C 유형과는 다르게 D유형은 반응형으로 제작해야 한다. 영역별로 구현해야 되는 애니메이션: 서브메뉴 - 세로형태 슬라이드 애니메이션 슬라이드 - 페이드 인&아웃 형태의 애니메이션 탭메뉴 레이어팝업 D-1: 조이컨트리클럽 와이어프레임 구성하기 Visual Studio Code를 실행하고, 아래와 같은 구조로 파일을 생성한다: HTML을 사용해서 와이어프레임의 기본 구조를 만든다. 먼저 3개의 영역(Aside, Main, Footer)을 만든다: CSS 최상단에 reset을 적용시키고 영역별로 정의해 준다. 고정형이 아닌 반응형이기 때문에 cal()를 사용한다: @charset "UTF-8"; /* reset */ * { margin: 0; padd..

C유형의 첫 번째 문제 C-1 해운대 빛축제 와이어프레임 살펴보기 기존에 풀어보았던 A, B이 서로 비슷한 구조를 가지고 있었다면 C유형은 완전히 다르다. 애니메이션 관련 세부사항: 공지사항/갤러는 탭메뉴로 구현 이미지 슬라이드는 사라졌다가 다음 슬라이드가 표시되는 페이드 인&아웃 형태 서브메뉴는 각각 세로형태로 표시되는 형태 레이어 팝업은 기존과 동일 C-1: 해운대 빛축제 와이어프레임 구성하기 Visual Studio Code를 실행하고, 아래와 같은 구조로 파일을 생성한다: HTML을 사용해서 와이어프레임의 기본 구조를 만든다. 먼저 Aside와 Main으로 영역을 2등분한다: 이후에 세부 영역을 추가로 작성한다: CSS 기존처럼 reset을 진행한 뒤 Aside와 Main 영역을 먼저 정의한다: ..

B유형의 첫 번째 문제 B-1 대한은행 와이어프레임 살펴보기 B유형의 경우 전반적인 레이아웃 구성은 A유형과 거의 동일하지만, 상단의 헤더와 푸터의 Width를 브라우저 100% 처리해 줘야 한다. B-1 유형의 경우 푸터를 제외한 나머지 구조(메뉴, 탭메뉴 등)는 A-1과 동일하고 하단의 푸터 레이아웃은 A-3와 동일하다. 메인메뉴에 마우스를 오버하면 서브메뉴 전체가 한 번에 나타나는 구조 이미지 슬라이드는 가로로 이동하도록 구현해야 한다. B-1: 대한은행 와이어프레임 구성하기 기존과 동일하게 Visual Studio Code를 실행하고, 아래와 같은 구로조 파일을 생성한다: HTML을 사용해서 와이어프레임의 기본 구조를 만든다: *A유형과 다른 점이 있다면 B유형은 각각의 id별로 container..

A유형의 마지막 문제를 풀어볼 차례 A-4: 유진건설 와이어프레임 살펴보기 앞서 작업했던 다른 A형 문제에서 한 번씩은 출제되었던 구조가 조합되어 있다: 배경이 서브메뉴와 함께 슬라이드 되는 형태는 A-2와 동일 공지사항과 갤러리가 별도로 구성된 형태 또한 A-2와 동일하다 푸터 영역은 좌측의 로고 영역이 제외되는 대신 A-2에서 출제되었던 패밀리사이트 메뉴가 우측에 배치된다 이미지 슬라이드의 경우 A-3와 동일한 페이드인&아웃 형태의 애니메이션을 구현해야 한다 A-4: 유진건설 와이어프레임 구성하기 기존과 동일하게 Visual Studio Code를 실행한 뒤, 아래와 같은 구조로 파일을 생성한다: HTML을 사용해서 와이어프레임의 기본 구조를 만든다: 이어서 CSS를 작성한다: @charset "@U..