[패스트캠퍼스]UXUI강의-8주차 학습일지

마지막, 나는 얼마나 성장했을까

드디어 국비지원교육 피그마 강의의 마지막 학습일지....

이번 강의를 통해 배운 피그마 기초 지식을 활용하여 '푸드레인'이라는 서비스의 가상 모바일 앱을 만들어보았다. B2B 디저트 전문 유통몰로 사업자가 있어야만 구매 가능! 

화면 상에서 완성도를 높이기 위해 피그마 미러모드로 직접 보면서 디자인을 다듬고 프로토타이핑까지 완료..!!!!

프로토타입 부분이 약했는데 이번에 데굴데굴 구르면서 제대로 감을 잡게 되서 기쁘다...ㅋㅋㅋㅋㅋㅋㅋ

처음에 빠르게 구린 초안을 만들고 계속해서 다듬어가면서 완성하기로함. 이건 초안.

이제부터 수정시작~~~~

먼저 상단 헤더를 로고있는 버전과 없는 버전으로 나누었다. 그리고 로고 대신 심플하게 아이콘넣어서 처리.

뭐가뭐가 더 나은지 옵션을 주려면 절대! 삭제하지 말고 수정된 버전을 배리언트로 넣어서 교체해 본다음 왔다갔다 비교하고 픽스할것.

깔-끔!

              모달 띄우기            

디저트 납품인 만큼 납입기한을 안내하는 것도 중요하니 배송 예정일을 안내하는 팝업을 만들었다.

원래 왼쪽처럼 조금 구리게....되어 있던 걸 약간 ios 느낌나게 바꾸고 프로토타입으로 open overlay로 나타나게 설정. 

open overlay 설정할때 팝업으로 띄울 창을 컴포넌트로 만든 뒤 플로우를 그릴 수 있게 옆에 둔다.

(이 때 디자인 시스템에 만들어도 되는데 분명 인스턴스인데도 가끔 안듣는 경우가...왤까...... )

그리고 트리거가 될 버튼에 컴포넌트 창을 연결.

Open overlay로 설정하고 모달이 될 컴포넌트에 잘 연결되어 있는지 확인하고, 오버레이 설정을 변경.

나는 화면 중간에 창을 띄울거라 center로 설정했는데, 원하는 위치가 별도로 있다면 manual로 설정해서 지정한다.

이때 백그라운드를 어둡게 처리해줄 수 있는데 투명도를 조절해서 적절한 톤앤매너에 맞게 바꿔줄것.

2. status별로 달라지게 보이려면?

샘플 주문 페이지에 체크박스를 넣기 위해서 배리언트를 만들었다.

이때 배리언트 별로 인터랙션을 추가해주면 인터랙션에 따라 왔다갔다 하도록 만들 수 있다.

status를 checked, unckecked로 분리해서 두가지 경우의 수를 만들어 서로 왔다갔다하게 만들었다.

한번 누르면 체크가 되고 한번 더 누르면 해제.

3. 스크롤 만들기

상하 스크롤할때는 프레임을 새로 만들어서 고정 컴포넌트를 얹어 놓고 fixed로 고정, 중간에 움직어야 하는 얘들을 오토 레이아웃이나 프레임으로 묶어서 집어 넣고 스크롤이 되게 설정 되어 있는지 확인.

이때 새로 만든 프레임이 no scroll이 아닌지 꼭 확인하세요!!!!!!!!!!!!!!(이것때문에 광광 울다가 해답을 찾고 또 울었다..)

진짜 중요.......난 바보야.........

4. 바텀시트 올라오게 만들고, 내려가면서 다시 홈화면으로 이동하려면?

먼저 임시로 만들어둔 <성공시 이동> 버튼과 주문완료 바텀시트를 연결. 이때 오버레이로 두고 올라오는 위치를 bottom center, move in을 아래에서 위로 설정. 이러면 밑에서 올라오는 것처럼 보이겠지?

그다음 시트가 내려가면서 홈화면이 노출되게 바꿔야 하는데, 바텀시트와 홈화면을 연결하고 모션은 drag로, move out을 아래 방향으로 넣어준다. 그럼 완성!

5. 푸시 띄우면서 화면전환(된것 처럼 보이게)

미션: <장바구니에 상품이 담겼습니다> 푸시알림이 뜨면서 동시에 장바구니에 뱃지에 달리게 화면을 전환해라!!!!

먼저 장바구니 버튼을 누르면 푸시가 떠야하니 장바구니 이동 버튼과 컴포넌트로 만들어 놓은 푸시 알림창을 연결.

open overlay로 두고 위치는 매뉴얼로 적당히 조절한다. 이때 애니메이션은 기본값인 instant여도 괜찮은데 조금 더 스무-스한 느낌을 위해 디졸브로.

그 다음! 푸시가 뜸과 동시에 장바구니에 뱃지가 달리는 건 프로토타입 모드에서 구현 가능한지 모르겠고ㅋㅋㅋㅋ최대한 비슷하게 만든다면 푸시 알림이 after delay로 스르륵 사라짐과 동시에 뱃지가 달려있는 장바구니 버전의 페이지가 나오게하면 마치 푸시알림이 사라지면서 장바구니에 뱃지가 뿅~ 달린 것 처럼 보이긴 한다.

하려고 하면 정말 끝이 없다 프로토타입이라는 건.........

6. 좌측 슬라이드 메뉴바 슥- 나오게 하는법!

overlay에 open overlay와 swap overlay가 있는데, 저 '사이드 메뉴 슥' 을 하려고 처음에는 스와이프했다.

근데 스와이프는 화면 전체가 아니면 안되더라구? 그래서 그럼 메뉴 컴포넌트와 전체 프레임의 width를 맞추고 투명도를 어쩌구....고민하다가그냥 open overlay로 하고 move in을 왼쪽에서 오게, 위치는 매뉴얼로 하면 된다는 사실을 새삼스레 깨닫고 너무 기뻤다!

작업하다가 제일 보람찬 순간이죠.......고민하던거 탁 풀렸을 때....내가 천재된 것 같고........ㅋㅋㅋㅋㅋㅋㅋ

8주의 시간이 길다면 길고 짧다면 짧다고 할 수 있을 것 같다. 

처음에 강의를 들었을 때는 이게 기초가 맞아...? 했지만 지금은 안다..그게 정말 기초중에 기초라는 사실을....

배우면 배울 수록 배울 것은 너무너무 많고, 아무리 디자이너라도 서비스 기획부터 개발까지 '찍먹'은 해봐야 하는 것임을 할 수 있었다. 

앞으로는 이렇게 배운 기술들을 활용해 실제 외주를 받아보면서, 더 현장의 칼같은 피드백을 통해 성장해야 겠다. 

이만 안녕!

#패스트캠퍼스 #내일배움카드 #국비지원교육 #K디지털기초역량훈련  #UXUI강의