본문 바로가기

분류 전체보기

 (148)
레퍼런스 분석 5주차 - 핀터레스트(vs. 비핸스) 천천히 돌아보며 내가 가장 많이 이용했던 서비스가 무엇인지 생각해보았고, 대학교 시절에 디자인을 위해 레퍼런스를 찾던 경험을 떠올리며 핀터레스트를 분석해보고자 한다 핀터레스트는 2009년 런칭하여 같은 상황에 있는 다른 유니콘기업들 (페이스북, 인스타그램, 트위터 등)과 달리 천천히 성장하고 있는 기업이다 이름에서 알 수 있듯이 핀터레스트(Pinterest)는 물건을 고정할 때 쓰는 핀(Pin)과 관심사를 뜻하는 인터레스트(Interest)의 합성어이다 창업 후 빠르게 수익을 내지 못해 투자자들의 혹평을 받았지만 핀터레스트의 창업자인 벤 실버만은 다른 IT스타트업이 빠르게 성장하고 망하는 동안, '인터넷을 통한 발견과 탐험'이라는 철학을 고수하며 '발견의 즐거움이 있는 사이트'를 만들기 위해 질적으로 나..
UIUX 스터디 5주차 학습일지 03 : '당근' 클론디자인, 인터랙션 실습 - 15 9-1 ~ 9-10 쇼핑몰 실무 실습 Adobe XD와 Figma를 계속 사용해보면서 느낀 점은 하나에 익숙해지면 다른 하나는 금방 따라갈 수 있다는 점이다 쇼핑몰 실무 실습을 하는데 강사님은 Figma를 더 잘다루시는 것 같은지, XD에서는 반복 그리드나 패딩 등에서 효율적이지 못하게 작업을 하셨다 그래도 Lottie, 애니메이션 트랙패드 등 새로운 점을 알게 되어서 의미가 있었다 10-1 디자인 스타일가이드 정리 강의의 순서대로 따라가다보니 디자인가이드를 처음부터 구축하면서 만드는 것이 중요하다는 것을 알게된다 이후에 제플린으로 공유할 때에도 디자인가이드 구축의 중요성이 다시 생각났다 리스트나 컬러 부분에 있어서는 만들기가 쉬웠다 그러나 텍스트의 경우에 앱 화면을 먼저 디자인하고 만드니까 굉장히 불편..
UIUX 스터디 5주차 학습일지 02 : 컴포넌트 가이드라인 실습 - 14 8-1 상단 앱바 1 - 컨테이너, 스테이터스바(상태바), 3 - 타이틀, 2, 4, 5 - 아이콘 아이콘 사이 간격은 손가락 크기를 고려해 24px, 텍스트박스와 아이콘과의 간격도 24 타이틀 베이스라인 20 타이틀의 크기는 Headline 6적용 반응형 크기조정 8-2 탭 1 - 컨테이너, 2 - 활성 아이콘, 3 - 활성 텍스트, 4 - 활성 탭 표시기(인디케이터), 5, 6 - 비활성, 7 - 탭 4개 이상의 탭을 넣을 경우에 고정형이 아니라 스크롤러블 탭을 이용 8-3 내비게이션 드로워 8-4 하단 내비게이션 아이콘 3-5개 메뉴를 사용하도록 권장 3개는 탭바, 5개는 네비게이션으로 만드는 것이 좋음 8-5 버튼과 나인패치 사용자와 상호작용을 위한 접점으로 사용되기 때문에 그림자에 따라 고도를 ..
UIUX 스터디 5주차 학습일지 01 : 모바일 디자인의 이해 - 13 7-1. 모바일 환경의 이해 디자인 스타일가이드는 모바일 어플리케이션, 시스템 설계에 있어 자주 발생할 수 있는 공통적인 문제의 해결법 이 때 사용할 수 있는 최상의 가이드이자 템플릿 IOS와 안드로이드는 UI컴포넌트의 표현, 사용 상황이 조금씩 다름 UI 컴포넌트는 디바이스와 사용자간의 원활한 커뮤니케이션을 위해 필수적인 요소 향후 유지보수, 기능 확장을 할 때 용이함 웹에서 사용되는 것보다 모바일의 컬러 대비가 강하고 폰트의 크기가 큼 모바일기기 화면은 변화하는 환경에 맞도록 디자인과 컬러, 타이포그래피에 있어 동적 사용성을 고려하여 제공해야 함 밝은 환경, 어두운 환경, 동적 환경에서 모두 눈에 잘 띌 수 있도록 해야함 7-2. 디자인 랭귀지 UIUX디자이너는 디자인 랭귀지가 바탕이 되어 시각적인 ..
UIUX 스터디 4주차 학습일지 03 : 커머스 앱 분석 - 12 여러가지 커머스 앱을 경험 순서대로 (회원가입 - 카테고리 - 제품 상세 - 장바구니 - 결제) 각 페이지를 살펴보고 클론 디자인을 실습했다. 각각 서비스마다 어떻게 UI 디자인을 했는지 자세히 알아볼 수 있었다. 그리고 피그마도 스터디하면서 익숙해지도록 했다. 에어비앤비 회원가입 페이지는 본인인증 후에 간단한 정보 입력을 하는 게 전체 플로우다. 간결하고 텍스트필드도 커서 시원시원하였다. 에어비앤비의 카테고리 페이지는 마치 인스타그램 피드를 보는 듯 하였다. 특이했던 것은 카테고리의 타이틀이 메인 페이지에는 보이지 않고 상세 페이지에 들어가야 보이는 것이었다. 타이틀이 없으니 전체적으로 깔끔하게 숙박시설을 즐기면서 탐색할 수 있었다. 마켓컬리의 카테고리 페이지는 상품을 소팅하는 모듈이 광고를 가운데 두..
레퍼런스 분석 4주차 - 집무실 4주차는 취준컴퍼니라는 취업 스터디 모임(?)을 통해 현직자와 커피챗을 하며 체험해보게 된 '집무실'을 분석해보고자 한다. 집무실은 알리콘에서 만든 온/오프라인 플랫폼으로 서울과 경기도에 여러 개 지점이 있는 공유오피스 서비스이다. 실제 공간을 방문하기 위해선 '집무실' 어플을 통해서만 입장할 수 있다. 1. 타겟 사용자 이번에 취준을 하면서 커피챗을 위해 사용한 것처럼, 취업 준비생도 무료로 사용할 수 있는 이벤트를 계속 하고있다. 홈페이지를 보니, 원래는 원격 근무를 할 수 있는 직장인 대상으로 만들어진 서비스 같았다. 아마도 취업준비생을 대상으로 이러한 이벤트를 하는 것은 이들을 집무실 서비스의 '잠재 고객'으로 생각하고 있거나 이들로 사용자를 확장하려고 하기때문일 것이다. 따라서 이번에는 취업준비..
UIUX 스터디 4주차 학습일지 02 : 회원가입 페이지 스터디 - 11 회원가입 페이지 상세 치수 스터디 마켓컬리는 주소 기입만 빼면 플로우가 훨씬 간결해질 것 같다. 주문할 때 데이터를 받아도 되지 않을까? 번거로운 인증을 먼저 하고 나머지 정보 기입하는 플로우의 에어비앤비 보편적인 앱들과 순서가 달라서 29cm가 제일 UX가 좋은 듯 싶었는데 맨 마지막에 가서 이미 가입한 아이디가 있다고 떴다.. (?) 자칫 지루해질 수 있는 경험을 아이콘을 같이 사용해 깔끔하고 시원시원하게 정리했다.
UIUX 스터디 4주차 학습일지 01 : 바이널씨 특강 - 10 피그마에서 에셋 내보내는 법 1) 소문자 사용하기 2) 첫글자 숫자 금지 3) 띄어쓰기 금지 4) 축약하기 Button -> btn Image -> img Icon -> ic 5) 규칙 만들기 (유형+이름_숫자 등) ic-favorite-24.png btn-go-hover.png 피그마 퍼블리싱하기 책 모양의 아이콘을 누르면 퍼블리시가 가능 바이널씨 특강 내용 복기 사용자 여정지도를 만들 때 주목해야할 사항 각 단계에서 캐치업할 수 있는 니즈나 감정, 불편사항 등을 정리해야 함. 실무에서 잘 사용되는 프레임워크. AS-IS 문제점을 발견하는 것이 중요하다. 레퍼런스 분석은 왜 해야하는지 해당 카테고리의 다양한 플랫폼을 분석해서 해당 업계의 플랫폼이 구동되는 바운더리를 인지해야 어떻게 개선해야 좋을지에 대..

티스토리툴바