God is in the details

포토샵에서 아래와 같은 효과를 적용하려면 어떻게 해야 할까? 포토샵 좀 해본 사람이라면, 레이어를 더블클릭해서 아래와 같이 Layer Style 패널을 활성화시킨 다음 Inner Shadow와 Drop Shadow 효과를 아래와 같이 적용시킬 것이다. 하지만 위와 같이 단순한 아웃풋을 제작하는 경우라면 괜찮지만, 더욱 복잡한 그래픽 작업물을 제작하거나 2차, 3차 작업을 이어서 해야 할 경우엔 Layer Style만을 활용하면 편집의 폭이 제한되어 버린다. 그럼 이런 문제를 어떻게 해결할 수 있을까? 먼저 Layer Style 대신 다른 효과를 활용해 위와 동일한 이미지를 제작해 보자: Inner Shadow 원을 선택한 다음 Shift + Cmd + I를 눌러 선택 영역을 반전시킨다. 영억이 선택된 상..

목차  "UX 디자이너의 덕목이 뭐라고 생각하세요?" 얼마 전 UX디자인 인턴 면접 중 받은 질문이다. 살짝 당황했지만 긴장 잠시 고민한 후 머릿속에 떠오르는 생각을 최대한 정리해서 아래와 같이 대답했다. "UX 디자이너는 사용자를 최우선으로 고려한 제품을 설계할 수 있어야 하며, 사용자를 최우선으로 고려한다는 뜻은 그들이 원하는 목적을 달성하는 데만 온전히 집중할 수 있도록 그 과정을 최대한 매끄럽고 간결하게 만드는 것입니다" 어버버  UX디자인을 공부하면서 늘 사용자를 중심에 두고, 그들과 공감하며, 유저 관점에서 효율적인 플로우를 설계하라는 말을 귀에 박히게 듣다/읽다 보니 자연스럽게 저런 뻔한 대답이 나온 것 같다. 다행히(?) 면접엔 합격했지만, 이번 경험을 계기로 UX디자이너의 역할과 내가 왜..

아르바이트와 디자인 공부를 병행하다 지난 회고에서 끝맺음할 때 계획했던 것처럼, 10월 말부터 완성된 포트폴리오를 가지고 디자인 아르바이트를 지원하기 시작했다. 간단한 사진보정이나 쇼핑몰 웹사이트를 관리하는 아르바이트 정도는 쉽게 구할 수 있을 거라 생각했는데 오산이었다. 이력서와 포트폴리오를 열람한 뒤에 연락해 주는 곳은 거의 없었다. 불행 중 다행(?)으로 파트타이머 웹디자이너를 뽑는 문구회사의 면접을 볼 수 있었으나 왕복 2시간이 걸리는 출퇴근거리와 1년의 의무 근무기간은 부담스러웠고, 무엇보다 UX 관련된 실무 경험을 해볼 수 있다는 확신이 들지 않아서 고사했다. 다만, 당장 생활비를 벌면서 디자인 공부를 병행해야 하는 상황이었기에 아르바이트 업종에서 타협을 보기로 했다. 일단 디자인 공부를 지속..

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..