[인프런 워밍업 스터디 1기 디자인] 네번째 발자국

이번 4주차는 일요일이 가장 힘든 주였다지금까지 밀린 10 ~ 16까지의 과제를 마무리 하였다. 10 ~ 11 : navigation 컴포넌트 만들기link, part, tab 부터 side navigation과 header 등 웹사이트에 필요한 컴포넌트를 만듬12 ~ 13 : 다크모드 설정 및 브랜드 모드 설정전체적인 색에서 반전된 다크 모드 베리어블을 등록브랜드 컬러 주황과 초록이 베리어블에 없어서 등록하느라 힘들었다14 ~ 15 : 반응형 디자인 및 OTT 만들기반응형 디자인이라는게 피그마에서 되는게 신기했다. 사실 완주를 포기하고 있었는데 완주 조건이 낮아졌다는 소식을 들어 겨우겨우 미션을 깨 나갔다２주차 분량의 과제는 너무 많았고 앞으로는 미루지 말아야지 라는 생각이 많이 들었다。 지난 한달간 고생했고 또 포기하지 않은 내가 자랑스럽다

[인프런 워밍업 스터디 클럽 1기_디자인] 세번째 발자국

가장 아쉬운 주각종 학교 행사 및 집안 사정으로 미션 하나 밖에 못하는 상황이 되어버렸다.그게 아니더라도 몸살 등 여러 건강 문제 때문에 강의를 들어도 이해가 되질 않고 작업이 진행되지 않았다.조금 더 관리를 잘 했으면 하는 아쉬움이 많다. 미션 9alert, toast 및 slot 요소를 만들고,전체적으로 만든 컴포넌트를 수정했던 시간을 가졌다.피드백 미션을 진행하면서, 가장 신기했던 것은 로딩 하는 도중 애니메이션으로 움직이는spinnner와 skeleton 이였다. 구조는 단순하지만 간단한 prototype 작업으로 움직이는 걸 보면머리 속에 신기하다는 단어밖에 떠오르지 않는다. 4주차다음주가 마지막 주인데 무엇을 배울지 궁금하고,반드시 25일 중간 점검 전에 밀린 과제 포함 모든 미션을 완료하겠다.또 보너스 미션도 금요일에 마무리 하고 싶다.

[인프런 워밍업 스터디 클럽 1기_디자인] 두번째 발자국

두번째 발자국배운 내용Inputbutton, checkbox, radio button, switch, labeltext field, text area, selected Displayavatar, accodion, badge, tooltips, dividerchip, card, table 5/7 8일차component 파트의 첫날button - 일반적인 버튼checkbox - 누르면 체크 표시가 뜨는 네모난 버튼radio button - 동그란 버튼switch - 스위치 버튼label - 버튼이나 다른 곳에 자주 쓰이는 텍스트이름 정해주고 properties 세팅하는게 서툴러서 힘들었지만 결과를 보니 뿌듯했다,5/8 9일차갑자기 몸살 감기가 걸려서 하루 밀리게 됨 5/9 10일차텍스트 박스 같이 글자를 입력할 수 있는 ui를 만들었다.text field - 일반적인 텍스트 입력할수 있는 바text area - text field보다 더 넓은 공간selected - 라디오, 체크박스가 선택되었을때 달라지는 ui대부분이 default, hover, press, focus, disabled, error 순으로 가서 점점 적응이 빨라졌다.그리고 이전에 등록했던 컬러 베리어블을 사용하면서 미리 등록하면 정말 편하다는걸 느낌.5/10 11일차display 컴포넌트를 시작한 날.처음 봤을 땐 간단해 보였지만 막상 해보니 제일 시간이 오래 걸렸던 날이다.avatar - 텍스트, 사진, 아이콘으로 만든 프로필accodion - 접고 펼 수 있는 컴포넌트badge - 카톡 알람 같이 오른쪽 상단에 있는 점, 999+tooltips - 메세지 같은 튜토리얼 바divider - 중간을 나누는 stroke이때 properties, 간격, 정렬 등 여러가지가 많이 꼬여버려 정리하는데 어려움을 느꼈다. 5/11 보충하루 밀린 과제를 마무리한 날하루씩 밀리면서 생각했던 건, 지금 커리큘럼의 하루 일정이 내가 소화할 수 있는 적절한 양이라는걸 알게됨chip - 간결하게 속성을 표시하는 uicard - 만능으로 쓰이는 카드 table - 헤더랑 셀로 만들어진 표개인적으로 table 만들때 쓴 한글더미 플러그인은 정말 마음에 들었다 느낀 점 + 아쉬운 점, 다음주는?전체적인 내용이 비슷비슷해서 초반은 좀 힘들었지만 후반에는 수월하게 진행된 주.중간에 아파서 하루가 밀렸는데 다시 따라잡기 힘들다는 걸 느낌.input에서 보너스 미션을 못한 게 아쉽다. -> 다음 주에 시간이 남으면 추가적으로 할 예정. 특히 컴포넌트를 만들고 결과물을 봤을 때 뿌듯함이 굉장히 컸었다. 다음 주는 밀리는 날 없이 또 빼먹는 거 없이 완벽하게 할 것이다

[인프런 워밍업 스터디 클럽 1기_디자인] 첫번째 발자국

첫번째 발자국지난 일주일 동안의 나의 행적과 앞으로의 목표 및 소망 4/26 OT8시에 구글 미트에 모여 피그잼으로 ot를 진행하였다.지식 공유자이자 이번 클럽의 멘토이신 볼드님의 소개로 시작된 ot는피그잼으로 다른 러너분들의 지원 동기, 매일 계획, 끝나고 자신에게 줄 선물 등다양한 생각과 다짐을 들었고, 이번 클럽의 전체적인 진행 방식과 보상에 대해 들었다.그 중 나를 가장 자극 했던건 우수 러너들에게 주어지는 보상으로,꼭 열심히 활동해서 우수 러너가 되겠다는 목표가 생기는 순간이였다. 4/29 1일차디자인 토큰과 베리어블, 그리고 디자인 시스템과 베리어블 이름에 대해 배우는 시간이였다.전문적인 지식을 처음 접하는 나에겐 하나같이 다른 나라 언어처럼 들렸다.하지만 시간을 들여 천천히 또 반복적으로 들어보니 하나 둘 씩 이해가 되기 시작했다.매번 새로운 개념을 보며 불을 발견한 원시인처럼 강의에 빠지게 시작하고 앞으로의 강의가 기대가 된다. 4/30 2일차컬러 베리어블을 등록했던 날.강의에서는 3개의 구조, primitive, theme, sematic을 위주로 설명해주었다 색상 베리어블 구조, 이름 짜보기 강의 중 캡쳐위의 사진이 내게 베리어블 구조를 가장 잘 이해하게 해준 사진이다. 처음으로 베리어블을 만들어보면서 느낀건 primitive, theme, sematic 구조를 이해하고 무슨 역할을 하는지만 알아두면기존에 쓰던 style보다 훨씬 편하고 수정도 빠르다는 것을 느꼈다. 미션은 강의를 천천히 다시 봐보며 메모하고 연습도 해보고 수정도 하는 등그 날에만 7번 정도 베리어블을 처음부터 끝가지 만들어보기도 했다. 개인적으로는 이번 일주일 동안 가장 어려웠고 가장 고생한 날인거 같았다.하지만 내가 써본적도 없는 유용한 플러그인도 많이 알아가는 시간이여서 즐거웠고뭔가 전문적인 지식이 쌓인다는 만족감이 좋았다. 아쉬운 점은 theme에서 color scoping 설정을 못했던 게 조금 아쉬웠다.내가 만든 베리어블 sematic 일부분 캡쳐 5/1 3일차타이포그래피, 아이콘, 간격 베리어블 등록 모바일, 데스크탑 등 다양한 상황에 쓰이는 폰트와 크기, 굵기 등을heding과 body로 나눠 간단하게 스타일로 정리해보았다.가장 기억에 남는건 폰트를 한번에 바꿔주는 플러그인이였다그동안 어떻게 한번에 바꿀까 고민이 많았는데 그 고민을 날려주는 플러그인이였다또 새로운 걸 배워서 좋은 경험이였다. 내가 만든 타이포그래피 중 깨지는 desktop heading 캡처항상 아이콘이 필요하면 icon8에서 하나씩 찾아왔는데다양한 아이콘 사이트를 알게 되었고 아이콘을 하나의 면 처리 작업도 해보았다.중간중간에 깨지는 빌런들 때문에 골머리를 앓았던 날이였다.그리고 아이콘이 깨지면 어떻게 해야되는지 질문 드렸는데 너무 친절하게 답변해주셨다!내가 만든 아이콘 중 깨지는 아이콘 일부 캡처 간격 베리어블을 등록하면서 4,8,12로 짝수로 배치해야 되는 이유에 대해 배운 게 가장 큰 거 같다.매번 간격을 아무렇게 배치하던 내게 반성하는 시간이 되었다. 5/2 4일차그림자, 반응형 그리드, 테두리 및 투명도 높낮이를 표현해주는 그림자를 스타일로 만들어보았다.2개의 properties를 주어서 그림자를 표현하고 라이트와 다크일때의 차이도 구분하며 공부했다. 반응형 그리드는 고정형, 반응형 그리고 하이브리드형을 알게 되었다.하이브리드는 보통 왼쪽이 고정, 오른쪽이 반응형으로 만들어진다고 배웠다.각 그리드의 간격 넓이, 마진도 설정해주고 반응형은 어떻게 늘어나는지까지 실습해 보았다. 다른 색이나 값 처럼 투명도나 테두리도 베리어블로 등록해 사용할수 있다는걸 알았다.원래 이런 기능이 없다는거에 놀라기도 했고, 다음에는 어떤 업데이트가 나올지 궁금해지기도 했다. 5/3 5일차스타일 파운데이션 만들기 지금까지 배운 내용을 돌아보며 하나 하나 만들어보니 내가 지금 뭐가 부족한지,또 어떤건 기억이 남는지 등, 지난 날들을 되돌아보며 재밌게 작업했던 기억이 났다. 아침에는 일정이 있어서 저녁 늦게 시작한 까닭에 정리가 조금 지저분 하면서도완벽하게 나온거 같지가 않아 아쉬웠다. 다른 러너분들은 너무 잘 만들어서 비교되기도 했다.. 무사히 1주차를 넘겼구나 하는 안도감도 들었고앞으로 남은 강의도 열심히 들어야겠다는 다짐을 했다. 5/4 특강중간점검때 다시 볼드님과 온라인으로 만나 이번 한 주의 소감과 궁금했던 점을 이야기 하였다.가장 기억에 남는건 저번 아이콘 배울 때 union을 하면 깨지는 현상를 해결하는 앤트맨 방법에 대해 들었다.단순한 방법으로 문제를 해결하는 볼드님의 모습을 보고 프로는 다르구나 라고 생각하게 되었다. 종합전체적으로 아쉬운 점도 많았지만 그래도 하루도 빼먹지 않고 열심히 한 나를 칭찬해주고 싶다.좀 더 열심히 공부해서 실전에서도 쓸 수 있는 실력을 만들고 싶다.