목록2024/10 (26)
공부하는 진희
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bKC0cd/btsKfbPve55/OwgnzDlJfssHEF0HS1qkNk/img.png)
오늘은 본 캠프 첫 날사전캠프를 잘 마무리 해서 새로운 팀에서도 문제 없겠다 생각했지만여전히 첫만남은 너무 어려워...! 본캠프 때 팀장 안하고 싶어서 사전캠프 때 팀장한건데... 이번에 또 팀장을 맡게 되었다. 사실 팀장을 맡는 이유는... 뭐 하나 뛰어난게 없어서 더 책임감을 가지고 더 많이 배우기 위함인데 내가 팀장하겠다고 하면 괜히 팀원들이 기대하는게 있을까봐 부담돼 팀원들에게 여러번 강조한다."뭘 잘해서 팀장 하는건 아니에요ㅠㅠ" 마침 오늘 중간에 우리팀으로 합류하신 분이 피그마 4년차 경력자였다. 그래서 팀 과제 첫 시작이 순..조로웠다(?) 다만 피그마 경력자이신 만큼 이번 캠프가 본인과 맞지 않다고 중간에 나가시긴 하셨다😥과제 : 팀 소개 페이지 만들기웹/앱 : 웹팀원들과 함께 피그마로..
Facts (사실,객관)강의 완강컴포넌트 만들기 실습클론 만들기 실습사전캠프에서 우선순위를 제대로 파악하지 못해 아티클 스터디, 개인 과제 하는데 시간을 많이 투자함Feelings(느낌,주관)마지막 주에 강의를 몰아서 듣느라 마음이 조급했다. 또한 강의 볼 때에는 제법 잘 따라했는데 혼자 하려니까 어려워서 당황하기도 했다. 또한 여러 컴포넌트를 만들어서 하나의 앱 화면을 만드는게 흥미로웠다. Findings(배운 것)강의 반복 시청, 연습을 하다보니 프레임, 컴포넌트, 오토레이아웃, 합성 컴포넌트 등 레고처럼 쌓아 올리는게 무슨 말인지 이해했다. Future(미래) KPT Keep사전캠프에서 부터 너무 힘들면 어쩌나 걱정을 했는데 걱정보다 수월했고 끝까지 해낸게 보람차다.좋은 팀원들 덕분에 매일 서로..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/MWaHm/btsJ9MPRjcA/XYOrpqcK4hgsoAQBkIA040/img.png)
Today I Learned ! 컴포먼트 + 컴포먼트합성 컴포먼트 중 하나, 내비게이션에 해당하는 컴포먼트Text 입력 -> Auto Layout -> 복사 -> Create Component Set -> 포로퍼티 속성값 입력 -> Active (on/off)-> Stroke 추가 on/off 에 맞는 스타일로 변경 -> 인스턴스로 복제둘 다 선택 -> Auto Layout -> 컴포넌트 만들기 -> 복제 -> Nested Instance 클릭인스턴스로 복제
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bgCGUB/btsJ7Nb7l2d/Q4eKDjxrkECIUYEjPM6xAk/img.png)
Today I Learned ! 가상의 상태에서 컴포넌트의 유연성을 높이는 다양한 속성 Variant (변형) : 컴포넌트의 여러 버전마스터 컴포넌트 선택 -> 프로퍼티스 + -> 배리언츠 클릭 -> 속성값 입력 -> 버튼 수정-> Auto Layout 으로 자동 정렬 - Priority : Primary (중요버튼) / Secondary (덜 중요한 버튼) / Tertiary (회색조 버튼)- Size : Largre (Title/18) / Small (Title/14) -> 패딩값, 래디어스 조정 (4배수)- State : 호버값 (마우스를 버튼에 올려놓았을 때) Default / Pressed (명도 진하게)Boolean (참/거짓) : 컴포넌트의 특정 요소를 보이거나 ..
Today I Learned !파운데이션을 조합해서 만든 UI의 구성품 (UI 블록) 원본이자 기준이 되는 컴포넌트수정 : 마스터 컴포넌트를 수정하면 인스턴스들에 자동으로 반영됨.일관성 : 디자인 요소를 일관되게 유지할 수 있게 도와줌마스터 컴포넌트의 복제본마스터 컴포넌트의 속성을 물려받지만, 개별적으로 수정할 수 있음.다만 인스턴스를 수정할 경우, 마스터 컴포넌트에서 수정 사항이 있을 경우 반영되지 않음!
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/ATSEO/btsJ8mZcx3k/bO2Lyp1KWvUY51UxMKQDjK/img.png)
Today I Learned !피그마 실습하기 UI를 구성하는 기초 재료Color / Radius / Spacing / Font / Icon 디자인에서 사용할 색상을 모아두는 팔레트① Primary Color (포인트컬러)② Background Color (배경색)③ Secondary Color (서브컬러) / Tertiary Color (서브서브컬러) 컬러정하기커뮤니티 -> Coolers 검색 -> Open it (즐겨찾기) -> Plug-in 열기 -> 색상 Pick컬러칩 만들기Rectangle 만들고 복사 -> 선택한 색상 Hex 코드 복사&붙여넣기음영 단계 만들기10개 복사 & 붙여넣기로 만든 후 HSL 명도값에 +-10 씩 수정하여 단계 만들기스타일 추가하기이름 변경 Primary/50, 10..