목요일 - 목표
📍디자인 카타 새로운 발제
📍피그마 활용법 강의 완강
📍material UX guidance
📍디자인 스터디
👀 완강!!
7주차까지 완강! 강의 자체의 물리적인 시간은 길지는 않은데 사전캠프 강의와 다르게 과제가 주차마다 있어서 해결하느라 시간이 꽤 오래 걸렸다. 대충 툴의 기능만 활용하게 아니라 실제로 있는 앱을 바탕으로 레이아웃도 신경쓰고 싶은 욕심이 생긴 탓도 있는 듯..! 강의를 다 듣고 난 후에는 카타 시간에 아직 다 못한 서치 자료를 재정리하고, material design에 대해 스터디를 진행했다.
▶️디자인 카타 웹페이지 서치
이번 카타의 새로운 주제는 좋은 웹페이지를 3가지 서치하고 그렇게 생각한 이유를 발표하는 것이다. 웹페이지?? 지난 카타에서 내가 랜딩페이지로 잘 못 찾아온 페이지들이 그냥 잘 디자인된 웹페이지라고 피드백을 주셨었는데 그걸 그대로 가져가도 되나 하는 생각을 했다. 발제시간에 튜터님이 웹사이트의 주요 구성 요소에 대해서 설명해 주셨다.
웹사이트의 주요 구성 요소 예시 고정적이진 않음
1. 홈페이지 (Home Page)
웹사이트의 첫 번째 페이지이자 메인 페이지로, 사용자에게 웹사이트의 목적, 브랜드 정체성, 주요 메뉴 등을 소개하는 역할모든 페이지로 연결되는 네비게이션 허브 역할을 수행하여, 사용자가 전체 웹사이트를 쉽게 탐색할 수 있도록 도움
2. 소개 페이지 (About Page)
기업, 개인, 또는 조직에 대한 설명을 제공하여, 사용자에게 웹사이트와 브랜드에 대한 신뢰감을 형성할 수 있음미션, 비전, 주요 성과 등을 포함하여 기업의 철학과 비전을 전달함
3. 제품/서비스 페이지 (Product/Service Page)
기업이 제공하는 제품 또는 서비스에 대한 상세한 정보를 제공함고객이 제품을 구매하거나 서비스에 대해 문의하도록 유도하는 컨텐츠를 포함하여, 제품의 특징, 혜택 등을 효과적으로 전달함소프트웨어 제품이 있을 경우 다운로드까지 이어지는 경우가 많음
4. 문의 페이지 (Contact Page)
웹사이트 방문자가 기업과 쉽게 연락할 수 있도록 지원하는 페이지로, 연락처 정보, 위치 정보, 그리고 문의 양식 등이 포함고객 서비스, 지원 요청 등 사용자와의 직접적인 소통을 가능하게 함
5. 블로그/뉴스 페이지 (Blog/News Page)
최신 소식, 산업 뉴스, 브랜드 관련 정보를 제공하여 사용자와의 연결을 지속할 수 있음검색 엔진 최적화(SEO)에 도움이 되며, 트래픽을 유도하고 사용자와의 관계를 강화하는 도구로 활용됨
이 내용을 토대로 3가지 웹사이트를 서치했다. 화면을 캡쳐하려는데 반응형이라 풀스크린으로 캡쳐하면 아직 반응이 일어나기 전의 페이지가 캡쳐되어서 (ㅜㅜㅜㅜ..) 하나하나 캡쳐하기로 결정. 풀무원/ 신한금융그룹/ 로지텍 이렇게 찾았는데 아직은 내가 맞게 서치한 것인지 아리까리 해서 내일 피드백이 궁금하다.
▶️Figma 활용법 강의 수강 7주차
프로토타입
프로토타입의 개념 정리.
어제 학습한 와이어프레임도 낮은 단계의 프로토타입이라고 볼 수 있다. 실제로 화면이 구현되었을 때 어떻게 작동하는지 볼 수 있게 하는 것인데 피그마로 꼭 하지 않을 수도 있다고 하셨다. 다양한 프로토타입 툴이 있다고 한다.
프로토타입 하나하나의 흐름을 플로우라고 한다. 플로우를 구성하는데에는 트리거, 액션, 애니메이션 이렇게 세가지 있다.
▶️Figma 활용법 강의 과제
캐러셀 과제 - 스크롤
캐러셀이란 이미지 슬라이드를 뜻한다. 스크롤 컨테이너를 활용해서 가로로 스크롤 할 수 있는 페이지를 만드는 과제이다.
리디 북스 어플의 UI를 클론으로 만들어서 진행해보았다. 캐러셀을 만드는 것에 집중하기 위해 스크롤 컨테이너를 제외한 부분은 어플을 그대로 캡쳐하거나 와이어프레임으로 구성하여 진행했다. 그 중에서 한강 작가님의 노벨문학상 수상을 기념하여 한강 작가님 책들을 캐러셀로 만들기로 결정하였다.
처음에는 스크롤 컨테이너에 스크롤을 적용했는데 에러 메시지가 떴다. 생각해보니 전체 화면에서 스크롤 하는 것이라 화면에 스크롤을 적용해야 하는 것이었다. 다시 적용하고 나서 프리뷰를 보는데 화면 전체가 움직여서 당황했는데 알고보니 캐러셀을 제외하고 나머지 레이어는 fixed로 고정을 해줬어야 했다. 역시 직접 만들어보면 시행착오를 겪어야 진짜 내 것이 된다.
어코디언 프로토타입 과제
접었다 펼다 할 수 있는 리스트를 어코디언이라고 부르며, 접을 수 있기 때문에 폴더블(foldable)이나 콜랩서블(collapsible)이라고 부르는 경우도 있다.
메뉴 리스트 삭제 실습에서 했던 단계 그대로 차근차근 진행하니까 어렵지 않게 완성할 수 있었다. 버튼도 컨포넌트 프로퍼티로 만들었고, 펼쳐지는 리스트에 그라디언트도 적용해보았다 ㅎㅎ 미니 팀 프로젝트를 진행할 때 오토레이아웃 적용된 아이콘 사이에 라인을 넣을 때 자꾸만 정렬이 되어서 야매로 했었는데, 알고보니 필요한 부분은 오토레이아웃을 무시할 수 있는 기능이 있었다. 그라디언트도 이렇게 적용해서 리스트 위에 겹쳐서 배치했는데 지금 보니까 되돌아갈때 약간 어색하다. 이 부분은 다시 수정해봐야지..!
아이콘을 돌아가면서 색상이 변하는 것은 스마트 애니메이션 효과를 적용하면 알아서 자연스럽게 구현된다. 신기해
버튼 변화 프로토타입
당근 앱의 글쓰기 버튼의 변화를 프로토타입으로 만드는 과제
이번 과제에서도 버튼은 컨포넌트로 만들어서 활용해보았다. 부동산, 등등등 나머지 부분들을 인스턴스로 만들었다. 지금 보니까 원래 맨 처음은 알바인데 컨포넌트 만들기에 치중해서 버튼라벨로 되어 있네.. TIL 쓰면 이런 실수를 찾을 수 있어서 재밌다ㅎ
세개의 페이지를 만들고 스마트 애니메이션까지 적용시켜서 자연스럽게 움직일 수 있게 했다. 원래는 다이얼로그 프레임에서 오버레이로 생성되게 만들고 싶었는데 그렇게 하니까 누르는 상태의 버튼 프로토타입 구현이 잘 되지 않아서 끙끙대다가 그냥 힌트를 봤는데 이렇게 세개의 페이지를 만들어서 진행하라고 되어 있었다..!
💭
완강핻서요,,🫠
7주차를 4일만에 완강하는 으마으마한 계획을 달성해 버렸다. 사실 더 빨리 할 수 있을 줄 알았는데 12시간을 온전히 집중하는게 아직은 버겁기도 하고 뒤로 갈 수록 과제하는데에 시간 오래 걸림 이슈로 조금 늦어졌다. 이제부터는 진짜 내가 알아서 필요한 부분 복습을 해야 한다. 머리속으로 하고 싶은건 둥둥 떠다니는데 과연 다 할 수 있을지..!? 일단은 그 전 조 팀원들이랑 디자인 스터디처럼 모여서 클론 만들기나 반응형 카드 만들기를 진행해보기로 했다. 혼자하면 흐물흐물 눕고나 싶어지는데 으쌰으쌰 해주는 사람들이 있어서 반강제로 공부하는건 정말 이 캠프의 장점인 것 같다. 내일은 드디어 금요일 아자아자아자자자ㅏ.....😖