Category: Uncategorized

무언가 모르는 단어가 있을땐, 그 단어를 빼고 설명을 해보자. UX 디자인을 UX와 디자인을 빼고 설명해본다. 이 단어는 앱을 만드는 상황에서 사용한다. 돈을 받고 앱을 만들어 먹고산다. 회사에서 돈을 주면서까지 앱을 만들려는 이유는, 앱이 돈을 벌어들이기 때문이다. 앱은 왜 회사에 돈을 벌어다줄까? 사람들이 앱에서 시간을 보냄으로써 다양한 방식으로 회사에 돈을 지불하기 때문이다. 나는 앱에다가 결제를 한…

여행 앱 분야의 프로젝트를 예시로 들어보자. 앱을 분석하는 순서는 다음과 같다. 앱 외부에서 사용자가 앱으로 진입하기까지의 과정을 분석(entry point), 대표적인 사용자 행동을 파악, 각 단계의 행동을 ui 기능으로 작동시킨 중요한 핵심 컴포넌트 결정, 해당 컴포넌트의 모양을 여러 앱들 사이에서 비교하여 각자의 목표에 맞는 통찰, 분석을 제시한다. 네 개의 앱이 모두다 비슷해보이면서도 자세히 보면 정말 많이…

항공권을 예약하는 앱은 어떤 정보를 넣어야할까? a. 항공권을 예매하려는 단계의 소비자 b. 항공권을 결정한 단계의 소비자 c. 소비자로부터 결제를 받는 항공사의 입장 a. 항공권을 예매하려는 단계의 소비자 출발지와 도착지, 날짜와 인원수에 맞는 항공권을 보고 싶어한다. 가격순으로, 또 경유 횟수나 선호하는 시간대에 있는지를보고싶어한다. 상식적인 선에서 본인에게 가장 합리적인 항공권을 고르기 위한 정보가 필요하다. b. 항공권을 결제하는…

위 사진처럼, 인스턴스 스왑 프로퍼티를 적용해 위의 서울-도쿄 인스턴스에서 오른쪽의 가느다랗고 긴 이벤트 카드로 교체한 상황이다. 그런데, 크기가 바뀌질 않는다.

피그마 기초를 다 배워서 클론 디자인을 할 때였다. 거의 모든 요소에 오토레이아웃을 적용하고, 프레임을 쓰고 있었다. 그런데, 위 그림의 서울, 도쿄 부분에서처럼 거의 규칙성을 띄지 않는 부분을 마주하게 된다. 이럴때 나는 그룹을 사용한다. 경력자인 튜터님께도 여쭤보았다. 그냥 따라하면되지 뭘 신경쓰냐고 묻는 사람도 있을 것이다. 내 생각은 이렇다. 결과물 그 자체가 가장 중요하지만, 그 다음으로 중요한게…

기초를 공부할 때 배웠다가 까먹은 것이 있다. 컴포넌트에 설정된 오토레이아웃은 인스턴스에서 개별적으로 요소를 추가할 수가 없다. 하지만 삭제는 된다. 사진 왼쪽 부분의 서울 한줄만 지울 수 있고, 국내 프레임에 fill을 적용했다면 국내 프레임도 알맞게 줄 것이다. 이럴땐 그럼 어떻게 해야할까? 사전적인 답안은 인스턴스스왑프로퍼티로 선택을 할 수 있다. 하지만 지금의 경우엔 적절치 않다. 피그마로는 되도록 복잡한…

클론도 하고, 사용자 분석도 하고, 보다 많은 것들을 하게된 지금도 버튼 하나 만들다가 고민될때가 있다. 어떻게 만들어야 할까? 눈으로 보기엔 똑같아도, 어떤 과정으로 만들어야 나중에 곤란한 일이 생기지 않을까? 텍스트를 작성하고 바로 오토레이아웃으로 넘기는 과정이다. 가장 많이 썼다. 하지만, 버튼의 크기가 텍스트의 길이에 따라 계속 변하는 특징이 있다. 따라서 적절치 못할때가 있다. 2. 텍스트->프레임 텍스트를…

클론을 하다보면 똑같은 14px을 사용해도 앱 내에서 어디에 사용되는지에 따라 자간(글자 사이 간격), 행간(줄글 사이 간격)이 다를 것이다. 텍스트 스타일을 적용해 편하게 쓰고싶었던 나는 이 상황이 이해가 되지 않았다. 물론, 편하려고 디자이너가 되는건 아니다. 하지만 이런 상황은 현직 디자이너가 노력한 결과물이고, 가장 잘한 결과물이 앱으로 출시된 것이니 ‘왜’인지 공부할 필요가 있다고 느꼈다. 디자이너는 20px 0%,…

uxui 공부중 클론 디자인 다음으로 진행한 프로젝트는 사용자 행동분석이다. 실무에서는 팀을 옮겼을때, 첫 일주일간 진행한다는 이 과정은 서비스에 대한 분석과 개선사항을 파악하는게 목적이다. 이번 프로젝트에는 다음의 제한조건이 붙었다. 프로젝트를 통해 내가 얻으려는 것. 실제로 업무를 하다보면 새로 만드는게 아니라 특정 구간 내에서 개선을 많이 함. 이럴 때 사용자의 핵심 행동과 서비스 이용과정을 이해하는게 필요하다. 이번…

피그마로 프로토타이핑 기능 중 스크롤을 구현하려고 한다. 관련 내용은 많은 블로그에서 다루고 있다. 보통 앱에서 상단 바(State Bar)나 하단 바 등을 스크롤 시에도 고정하고 싶으면? 에셋(선택 요소)를 지정후 오른쪽 사이드바 Prototype 탭에서 Scroll behavior에서 Position을 Fixed로 바꾸면 된다. 해당 내용도 많은 블로그에서 다루고 있다. (좌) 원래 (우) Fixed 설정법 하단 바를 고정하기 위해 바를 선택,…