Week 6
2024.11.27(Wed)
- 프로토타입
-애니메이션
-커브2024.11.29(Fri)
- 프로토타입
-스크롤- (+)중간평가 시험
2024.12.02(Mon)
- 드롭다운 컴포넌트
16일차(2024.11.27)
개념 정리
프로토타입
애니메이션
: 시각적 효과
커브
: 애니메이션 속도선의 커브
과제
요구사항
- 버튼에 각 애니메이션을 적용하여 프로토타입 구현하기
- 커브를 적용하여 스마트 애니메이션 구현해보기
- 자동으로 움직이는 스플래쉬 화면 구현하기
실습과정 및 결과
버튼별 애니메이션 세팅 과정
커브 세팅 과정
자동으로 움직이는 물결 화면 세팅 과정
버튼별 애니메이션 구현
커브 구현
자동으로 움직이는 물결 화면 구현
회고
프로토타입 작업은 전체적으로 어렵지 않았다. 이전에 프로토타입을 어렴풋이 접해본 경험이 있어, 큰 어려움 없이 수월하게 진행할 수 있었다. 하지만 간혹 예상치 못한 움직임이나 동작이 발생할 때가 있었는데, 왜 그렇게 작동하는지 이해하기 어려운 경우가 있었다. 그럴 때마다 문제를 해결하고 싶은 마음이 간절했지만, 잘 풀리지 않으면 답답함이 밀려오기도 했다.
그럼에도 불구하고, 다른 사람들의 과제를 함께 살펴보는 과정은 매우 흥미로웠다. 특히 그들이 직접 디자인한 스플래시 화면을 구경할 때마다 신선한 아이디어와 창의성이 돋보였다. 다양한 접근 방식과 상상력을 자극하는 스플래시 화면들을 보며 많은 영감을 받을 수 있었다. 이런 경험은 단순히 기술적인 부분을 넘어서, 디자인의 가능성과 창의성에 대해 다시 한번 생각해보는 계기가 되었다.
17일차(2024.11.29)
개념 정리
프로토타입
스크롤
스크롤하고자 하는 프레임, 컨테이너를 화면 사이즈만큼 크기를 정한 후에 해당 속성을 설정한다
과제
요구사항
- 스크롤 화면을 구현해볼 것
- 다양한 프로토타입 애니메이션을 활용하여 실제 앱 화면을 구현해볼것
실습과정 및 결과
스크롤 화면 구현
앱 화면 프로토타입 구현 과정
앱 화면 프로토타입 실제 구현 화면, 잘 반영했는지는 모르겠다
회고
앱 화면 프로토타입을 만들면서 빠진 부분이 없는지 여러 번 확인했지만, 작업을 진행하다 보니 여전히 누락된 부분이 조금씩 발견됐다. 이 과정을 통해 프로토타입 작업이 생각보다 훨씬 꼼꼼함을 요구한다는 걸 체감했다.
특히, 프로토타입을 제대로 만들려면 화면 구성이나 리스트 같은 기본 정리가 확실히 되어 있어야 한다는 것도 깨달았다. 화면 간의 흐름이 매끄럽게 이어지려면 각 요소의 위치나 기능에 대해 미리 세세하게 고민해야 했다.
또, 프로토타입이 단순히 화면을 연결하는 데 그치지 않고, 실제로 사용자 입장에서 경험을 미리 검증해볼 수 있는 중요한 도구라는 걸 다시금 느꼈다. 화면 전환이 예상대로 작동하지 않거나 인터랙션이 어색할 때, 사용자 입장에서 뭐가 불편한지 다시 돌아보는 계기가 되었다.
이번 작업을 통해 디테일에 더 신경 써야겠다는 생각이 들었고, 다음엔 누락이나 오류를 줄이기 위해 체크리스트 같은 걸 만들어서 더 체계적으로 진행해봐야겠다. 그렇게 하면 프로토타입의 완성도를 좀 더 높일 수 있을 것 같다.
18일차(2024.12.02)
개념 정리
드롭다운 컴포넌트
드롭다운 컴포넌트를 프로토타입으로 만들어봄으로써 프로토타입을 좀 더 심화적으로 공부한다.
과제
요구사항
- 베리어블 모드를 활용하여 드롭다운 컴포넌트를 만들고 프로토타입 구현까지 진행
실습과정 및 결과
베리어블 모드 세팅
드롭다운 컴포넌트 제작 및 프로토타입 세팅
드롭다운 컴포넌트를 활용한 화면 구현 최종결과
회고
베리어블 모드를 활용해 드롭다운 컴포넌트를 세팅하는 과정이 생각보다 만만치 않았다. 특히 컴포넌트 간 연결이 헷갈려서, 어떤 경로로 연결하고 액션을 어떤 순서로 설정해야 할지 혼란스러웠다. 작업을 하다 보면 매번 어디서 실수했는지 확인하고 다시 고쳐야 하는 경우가 많았다.
하지만 이 과정을 통해 베리어블 모드를 잘 활용하면 프로토타입을 훨씬 더 다채롭게 구현할 수 있겠다는 생각이 들었다. 단순히 화면 전환을 넘어서, 사용자와의 인터랙션을 더 세밀하게 조정할 수 있는 강력한 도구인 듯 하다.
앞으로 베리어블 모드를 더 자주 연습하면서 기능을 완전히 익히고, 프로토타입의 완성도를 한 단계 끌어올려봐야겠다. 특히 이번 경험을 바탕으로 컴포넌트 연결 구조를 더 체계적으로 정리하는 방법을 고민해봐야겠다.
본 후기는 [스나이퍼팩토리x웅진씽크빅] UX/UI 실무 초격차 디자인 전문가 양성과정 (B-log) 리뷰로 작성 되었습니다.
#UXUI디자인전문가양성과정 #UXUI교육과정 #서울시청년취업사관학교 #새싹동대문캠퍼스 #SeSAC #스나이퍼팩토리 #웅진씽크빅 #UXUI디자이너 #디자이너교육 #디자이너인턴
