수요일 - 목표
📍3주차 수업듣기
📍팀 회의 준비하기
📍팀 프로젝트
📍팀 프로젝트 과제하기
👀 미니 팀 프로젝트 시작!
오늘은 본격적으로 팀 프로젝트를 시작하는 날이다.
팀과 자기소개가 주된 내용이고 강의 내용을 토대로 피그마에 적용시켜 페이지를 만들어보는 프로젝트!
피그마 페이지를 만들기 위해서 강의 진도도 나가야 하고, 팀 회의도 해야하고, 캠프 줌 회의도 참여해야하고..
바쁘다 바빠 캠프사회🏃♂️🏃♂️🏃♂️🏃♂️🏃♂️
▶️3주차 강의 수강
3주차 강의의 시작은 어렵지 않았다. 원래 알고 있던 개념을 더 명확하게 하는 과정 정도였다.
사용자들이 상호작용할 수 있는 요소들을 컨포넌트라고 한다.
파운데이션은 쓰는 사람마다 용어가 다를 수 있다. 엘리먼트나 아톰이라고 쓰기도 한다.
버튼을 어떻게 만드는지 주입식 과정으로 배우는게 아니라 원리를 이해하는 것이 중요하다고 하셨다.
▶️3주차 강의 핵심!!
ui 디자인은 심미성보다 규칙이 더 중요한 디자인
▶️강의 실습하기
먼저 박스형태 3개를 만든다
피그마는 어울리는 컬러팔레트를 자동으로 제공해주는 툴이 있는데 coolors가 바로 그것이다.
플러그 인에 coolor를 등록해서 사용하며 generate를 누르면 색상이 변한다. 원하는 컬러가 나올 때까지 누르면 된다.
primary, secondary,tertiary 컬러 적용을 위해 2가지 색상팔레트는 제거한다.
원하는 컬러가 나오면 박스 색상을 변경한다.
coolors를 클릭하면 해당 색상의 헥스코드가 자동으로 복사된다.
3가지 색상의 박스는 10개씩 복사 > 하나를 복사한뒤 command+d를 누르면 그전 과정을 반복한다.
박스의 필을 살펴보면 HEX로 되어 있는데 HSL로 변경하고 3번째 숫자를 10단위로 변경해준다.
78로 설정되어 있으니까 순서대로 98>88>..>8까지 10개를 지정해준다.
3가지 모두 색상모두 변경
같은 톤의 색상을 선택해준뒤 레이어에서 rename을 선택해준다
50~900까지 설정해줄건데 이름/$N00 으로 적은뒤 내림차를 누른다.
첫번째와 두번째의 차이는 50이지만 나머지는 100 차이이기 때문에 N00으로 설정해주고 0을 시작으로 설정한다.
그리고 첫번째 색상의 이름만 뒤의 숫자를 50으로 따로 변경해준다.
그리고 모든 상자를 선택하고 plugins>styler>generate stylers 를 누르면
이렇게 컬러 스타일이 지정이 되어서 디자인을 할때 용이해진다.
*슬러시/를 꼭 넣어주어야 이렇게 등록이 되는 점 참고!!
▶️미니 프로젝트 회의
레이아웃 레퍼런스를 모은 것을 바탕으로 팀 회의를 진행했다.
아무래도 들어가는 내용이 별로 없고 특별한 레이아웃을 도출해내기 어려운 내용이라 그런지 비슷비슷한 레퍼런스를 가져왔다.
그 중에서 좋은 것들을 추려서 뚝딱뚝딱 이어붙힌 모습. 나는 1과 4의 작업을 맡았다.
팀명과 팀소개 페이지에 zep에 있는 캐릭터를 넣자는 의견을 냈는데 다들 좋아해주셔서 뿌듯했다..ㅎ
회의가 다 끝나고 쉼터로 이동해서 하나,둘,셋 하고 mbti를 말하는걸 찍었는데 정말정말 귀엽다.
그런데 프라이빗 방을 벗어나서 채팅을 치니까 전체 공지에 대답하고 있는 사람들 사이에서 mbti 외치고 있어서 좀 웃겼다ㅋㅋ
💭
사전캠프 못 들은게 이렇게 크게 오다니..! 강의 듣는것도 벅찬데 팀프로젝트도 시간을 정말 많이 잡아먹는다. 오늘도 회의 조금 하고 정신차리니까 2시간이 지나 있었다. 회의 끝나고 부랴부랴 강의 듣는데 전체 줌 회의에 참여하라는 슬랙이 와서 조금 멘붕,, 이거,, 언제 다하지..? 나는 원래 질문 별로 안하는 인간이라 역시나 질문 안 했는데 다른 분들은 정말 많은 질문을 하셨다. 심지어 모두 양질의 질문.. 나도 평소에 고찰하면서 살아야겠다는 생각이 조금 들었다. 튜터님들 이력이 정말 어마어마해서 너무 멋있었고, 나도 그렇게 되고 싶다는 꿈이 생겼다. 될 수 있겠지..? 🥹