220514 Today I learned!
- Vue 프롭스와 라우터
- CSS 그리드
1. Fact
(1) 1학기 마지막 프로젝트- 와이어 프레임
어제 팀원과 제작한 기능 명세서 및 컴포넌트 구조를 기반으로 와이어 프레임을 제작했다.
- 피그마를 활용한 와이어 프레임 제작
- 디자인 시스템과 컴포넌트 제작
- 내가 만든 컴포넌트 및 페이지와 모달
- Home View의 NavBar와 Modal (홈뷰의 네브바와 모달- 로그인, 비로그인 버전 )
- SearchMovieModal (검색 창, 검색 결과를 보여주는 모달)
- MovieDetailView (영화 상세 페이지 및 한줄평 페이지 -로그인, 비로그인 버전 )
- UserInfoView( 유저 프로필 페이지 및 회원정보 수정 모달 )
- 피그마
2. Feeling
오후 2시에 시작해서 오전 3시에 끝난...... 와이어 프레임 제작기...
피그마를 처음 접한 팀원과 같이 함께 열심히 제작했다. 먼저 팀원에게 피그마 유튜브 강의 하나와 카드 컴포넌트를 만들어보라는 과제를 던져주고 디자인 시스템을 제작했다. 우리의 웹사이트 색 테마는 사실…….디스코드!!이다. 특별한 prime 컬러 없이 제작했다. 굳이 prime 컬러를 꼽자면 gray??
사실 나도 피그마를 이렇게 다뤄본 적은 처음이기 때문에 힘들었지만 즐거운 과정이였다. (밤11시 전까지는..)
저녁식사, 운동 시간을 제외하고 쉬지 않고 달려서 새벽부터는 너무 힘들었다. 그 결과, 새벽 시간의 일 효율이 너무 떨어졌다. 일도 쉬는 시간을 가지면서 해야한다는 것을 새삼 느꼈다. 그래도 결과물을 보니 뿌듯했다. 하지만, 우리가 만든 와이어 프레임 그대로 CSS를 구현할 수 있을지에 대한 우려도 있다.
웹사이트 디자인은 넷플릭스, 티빙, 와챠, 리디북스, 인프런 등 다양한 사이트를 보고 제작했다. 그 결과, 현재 운영하는 사이트들과 너무 유사한 느낌도 있지만,,, 그래도 만족스럽다!
3. Finding
null;
4. Future Action & Feedback
| Future Action | 진행 상황 | Feedback |
|---|---|---|
| DOM을 깨우치다 | pause 🤦♀️ | 잠시 중단! |
| why 리액트? | Not Start🌙 |