UXUI design (33) 썸네일형 리스트형 [TIL] 0702 학습일지 오늘은 2,3 단계를 진행했다.2단계. 서비스 리서치 및 선정한 서비스와 관련된 레퍼런스 조사 - 3사 분석3단계. 2step서 조사한 레퍼런스 기반으로 서비스 핵심 기능 UI 분석4단계. 디자인씽킹프로세스 진행 (맛보기) 리서치 자료를 취합 및 정리하고 주요경쟁사의 장단점, 시장상황, 서비스의 방향성 등 레퍼런스를 분석한 다음 어디에서 이탈이 가장 많이 발생하는지 사용자의 관점에서 알아보기 위해 서비스 화면과 그안의 기능들을 뜯어보고 다른 업체와 비교 분석했다. 또, 페르소나를 설정하여 사용자의 행동을 알아보고자 했다. 오늘도 역시 튜터님께서 해주신 말씀이 굉장한 인사이트가 됐다 💡① 경쟁 업체를 비교할 때는 '알라딘'의 주요 기능과 플로우를 위주로 해야 할 것!주요 기능은 '책 탐색' 후 .. [TIL] 0701 학습일지 오늘(7/1)은 미니 팀 프로젝트 진행하는 날 !이번 [미니 프로젝트]는 UI 분석 기반의 디자인을 개선하는 프로젝트이다. 프로젝트의 목표는 다음과 같다.개선할 서비스를 선정하고, 서비스의 문제를 정의, 문제 해결을 위한 솔루션 도출하여디자인을 개선하는 것이다. 프로젝트는 총 5단계로 이와 같다.1. 서비스 선정 2. 리서치 - 선정한 서비스와 관련된 레퍼런스 조사3. UI 분석 - 서비스 UI와 핵심 기능 UI 분석을 통해 핵심기능 찾기4. 디자인씽킹 - 디자인 씽킹 프로세스 진행5. 프로토타입 제작 - 피그마를 활용하여 디자인 개선 ✔️ 나의 생각을 배제하고 서비스를 사용하는 사용자의 관점을 고려해야 한다는 것을 명심! ---> 데이터 기반의 사고가 중요*✔️ 리서치하는 것 중요더보기리서치를.. [TIL] 0627 학습일지 UI 키트 page 디자인 page [TIL] 0624 학습일지 [WIL] 0621 주간회고 지난 일주일 간의 배움 중 가장 어려웠던 내용은 버튼과 텍스트필드 만들기였다. 그 과정에서 프로퍼티, 인스턴스, 배리언츠가 뭔지, 언제 쓰는 것인지 도통 알기가 어려워서 어제 노트에 하나하나 다 적었던 일이 가장 기억에 남는다. 그 과정을 한번 거치니까 어떤 패턴을 갖는지 왜 이때 이 기능이 쓰이는지를 어느 정도는 알게 됐던 것 같다. 이렇게 익히는 방식이 나한테는 도움이 된다는 것도 깨달았다! 이렇게 하면서 속도에 뒤처지는 건 아닌가, 하는 생각이 들기도 했다. 그럼에도 몇 시간을 투자한 가치가 있다고 느껴졌던 때는 오늘 체크박스와 라디오버튼 만들기를 배우면서였는데, 앞의 내용을 먼저 잘 이해한 후에 새로운 내용을 접하니까 패턴 같은 게 있다고 느껴져서 크게 어렵지 않았다. 나아가, 먼저 해볼 수 있.. [TIL] 0620 학습일지 오늘은 다음 강의를 들을 차례였는데, 어제 공부한 내용(버튼 컴포넌트, 텍스트필드 컴포넌트 만드는 방법, 인스턴스, 배리언츠 등의 개념)을 잘 이해하였는지 스스로 확신할 수 없었다. 이해되지 않은 상태로 넘어가는 게 찝찝했다. 결국 다시 강의를 들으면서 정리해 보기로 했다. 튜터님이 컴포넌트를 만드는 방식을 하나하나 짚어가며 적고 따라해봤다. 그랬더니 앵무새처럼 따라 할 때와 달리 버튼의 위계, 크기, 상태가 무엇을 의미하는지, 텍스트 프로퍼티는 무슨 역할을 하는지.. 등 선 이해 후 스스로 컴포넌트를 만들어볼 수 있게 됐다.이해가 되니까 어려워서 강의내용대로 따라만 하게 되던 과제를 자연스럽게 배운 내용에 연결지어 할 수 있었다. [TIL] 0619 학습일지 컴포넌트 디자인에서 컴포넌트란 파운데이션 조합을 쌓아 만들어지는 구성품을 이야기한다. 개체라고 생각해도 되겠다. 버튼 컴포넌트를 보았을 때, 모양 색상 모두 다르지만 유저가 '버튼'이라고 받아들이는 이유는 버튼의 하는 일을 기준으로 생각하기 때문이다. 즉 컴포넌트는 모양이 아니라 기능이 중요하다. 컴포넌트와 인스턴스의 관계마스터 컴포넌트는 원본이고, 인스턴스는 마스터 컴포넌트의 복제본이다. 마스터 컴포넌트를 복사하면 인스턴스가 생긴다. 피그마에서는 빈강정같은 아이콘(♢)이 붙어 있다. - 컴포넌트를 수정하면 인스턴스에도 반영된다.- 인스턴스를 먼저 수정하면 컴포넌트를 수정해도 반영되지 않는다.- 컴포넌트를 지우더라도 인스턴스는 남아 있다. - 연결을 해제하면 인스턴스는 컴포넌트와 분리되고, 일반적인.. [TIL] 0618 학습일지 📌컨스트레인트Child Container와 Parent Container 컨테이너 사이에있 파란색점선이 Child Container가 Parent Container에 가지고 있는 제한, 즉 컨스트레인트이다.정확히 말하면, 자식 컨테이너가 부모 컨테이너에 고정되어 움직이는 '핀의 위치'를 컨스트레인트라고 한다. 위 이미지로 보았을 때, 자식 컨테이너는 부모 컨테이너의 사이즈가 변할 때, 부모 컨테이너의 위쪽과 왼쪽을 기준으로 고정되어 움직인다는 뜻이다.컨스트레인트는 댜른 말로 하면, '앵커'라고 한다. 📌프레임 리사이징프레임을 오토레이아웃으로 감싸는 순간, Fixed외의 다른 사이즈값이 생긴다. 이를 피그마에서는 리사이징이라 부른다. 종류Fixed 고정값 Hug 자식 컨테이너의 크기에 맞춰 .. 이전 1 2 3 4 5 다음
