본문 바로가기

사전캠프(23.11.20~12.15)/UXUI 사전캠프 데일리 미션 - 2주차

[금]▸ 이번 주 학습내용 관련 WIL

WIL (Weekly I learned)

  1. 지난 일주일을 돌아봄으로써 나의 현재 상태를 파악
      내일배움캠프 시작 주로부터 벌써 2주가 지나갔다. 느리면서도 또 굉장히 빠르게 지나간 것 같다.
    강의학습과 미션으로 살펴보자면, 벌써 2주차가 끝났나 싶다. 몰입도가 아주 좋기 때문이다.
    강의는 언제 다 듣지 했는데 몰입해서 듣자하니 내용이 더 들어갔으면 싶고, 미션으로 하루하루를 채워 나가다 보니 시간이 가는 것이 무섭다. 그 사이에 배운 거라고는 고작 몇 가지 안되는 것 같은데…. 아쉬운 마음이 크게 든다.
    아침에 일찍 일어나서 (파리시간 상 오전 7시) 바로 수업에 들어가는 패턴이 자리를 잡은 지 2주차 끝이다.
    짧은 시간 동안에 좋은 습관이 꽤 몸에 베었다. 거시적으로 생각하면 갈 길이 멀다 하고 느껴진다.
    앞으로 지식과 기술로 채워야 할 것들이 많아 어깨가 무겁다.

    이번주를 마감하며 느낀 점은 Figma- Components, Variants, Frame, Groups의 기능에 대해서 더욱 자세하게 공부할 필요가 있다. Prototype의 기능에서 생소한 것들이 많다. Trigger와 Action에서 좀 더 공부할 필요가 있다.
    이번 주 3일 동안 진행했던 웹 클론 디자인 작업을 통해서 많은 부분이 부족하고, 더 숙련시킬 필요성을 느꼈다.
    좀 더 스스로 찾아보고, 해결해 나갈 수 있도록 생각해봐야겠다.(간단하게 해결할 수 있는 상위 메뉴를 예제로 연습해 봐야겠다.)


    <3주차 정리>
    [수업목표]

    피그마로 유저 플로우를 쉽게 그릴 줄 안다.
    피그마로 화면 설계서 템플릿을 쉽게 만든다.
    피그마로 프로토타이핑 기본기를 익힌다. / 스마트 애니메이션, Figma mirror로 휴대폰 확인

    +유저플로우 : 제품 또는 서비스를 사용자 취하는 전체 경로 표시 다이어그램
    +화면 설계서 : 서비스 화면의 이해를 돕기 위한 문서
    +프로토타이핑 : [Prototype - On Click - Instant - Navigate to]
    화면의 순서 또는 플로우 간의 연결을 시켜, 특정 버튼이나 영역을 눌렀을 때 어떤 화면으로 어떤 인터랙션 스타일(클릭, 드래그, 스크롤 등)로 이동할 것인지 목업으로 보여주는 것.

    [Trigger]
    ① On click - 요소를 클릭했을 때입니다.
    ② On drag - 요소를 가로, 세로 방향으로 드래그 했을 때입니다.
    ③ while hovering : 요소에 마우스를 올리고 있는 동안입니다. =&gt; mouse enter와 mouse leave를 번갈아 실행
    ④ while Pressing : 요소에 마우스를 꾹 누르고 있는 동안입니다. =&gt; mouse down과 mouse up을 번갈아 실행
    ⑤ Mouse enter : 마우스가 영역에 들어가는 순간의 액션처리입니다.
    ⑥ Mouse leave : 마우스가 영역을 벗어나는 순간의 액션처리입니다.
    ⑦ Mouse down : 마우스를 누르는 순간의 액션처리입니다.
    ⑧ Mouse up : 마우스에서 손을 떼는 순간의 액션처리입니다.
    ⑨ After delay : 일정 시간이 지난 뒤 화면이 넘어갑니다.

    [Action]
    ① Navigate to - 연결한 프레임으로 이동합니다.
    ② Change to - 베리언츠 내에서 연결했을 때 해당 컴포넌트로 바뀝니다.
    ③ Open overlay - 오버레이가 열립니다. 모달 팝업을 만들 때 사용합니다.
    ④ Swap overlay - 화면이 오버레이 프레임으로 바뀝니다.
    ⑤ Close overlay - 오버레이를 닫습니다.
    ⑥ Back : 맨 처음 프레임으로 돌아갑니다.
    ⑦ Scroll to : 연결한 위치로 스크롤 합니다.
    ⑧ Open link : 외부 링크로 연결합니다.

    [Animation]
    ① Navigate to - 연결한 프레임으로 이동
    ② Change to - 베리언츠 내에서 연결했을 때 해당 컴포넌트로 바꿈

 
2. 더 나은 다음 주를 만들기 위해 어떤 부분을 어떻게 채워나갈지 고민하는 것
 클론 디자인 작업은 나의 부족한 점, 모르는 점을 빠르게 확인할 수 있는 좋은 장치이다.
클론 디자인에 대해서 많이 고민을 해보고, 간단하게 작업할 수 있는 예시들을 선정해서 Prototype를 연습하면 좋을 것 같다. 기술적인 편에서 살펴보면, 좀 더 논리적으로 접근하고 깔끔하게 작업할 수 있도록 해야겠다.
하루하루를 배우면 배울수록 더 재미있어지는 것 같다. 창작물을 만들면서 고민하고 문제를 발견하고 해결하기 위해 노력하는 이 시간이 매우 값지다.


"몰입하는 시간이 진정으로 값진 시간이다" - 송민진(UXUI_1기)