예림

✅ 241018˙ 디자인카타 레퍼런스 3가지 ˙ 팀 노션 작성 ˙ 피그마 활용법(1) 1주차, 2주차 📋학습 내용  개인 공부 시간에 열심히 강의를 들어서 1주차 2주차 완강하고 숙제도 제출했다!!  아직까지는 사전캠프 강의랑 많이 다르지 않아서 어렵지 않았다고 생각했는데 2주차 숙제의 4번 문제를 틀렸다...😵😨   2주차 문제는 영상을 보고 피그마로 똑같은 형태를 만들기였고,오토레이아웃+리사이징으로 만들어내는 게 답이었지만 나는 컨스트레인트로 풀었다.사실 모양은 똑---같이 나와서 이것도 정답으로 인정되지 않을까? 싶어서 질문방에 올리려고 캡처하는 중에그만 답이 아닌 이유를 발견해버리고 말았다.....................  4번 문제의 영상 속에는 분명히 패딩 값이 있음을 표시하는 작대..

✅241025· 강의 복습 + 실습· 팀 프로젝트 피드백 반영해서 개선해보기· WIL· KPT 📋3주차 실습에 variant기능 추가해보기  텍스트필드 컨테이너 만들기     컨트롤 컴포넌트 - 체크박스 만들기     컨트롤 컴포넌트 - 라디오 만들기     팀 프로젝트 피드백 반영해서 수정해보기 피드백 정리· 컨셉 도출 과정이 좀 더 자세했으면 좋겠다· 좀 더 디테일한 디자인 요소가 필요함· 디자인 가이드 더 상세하게(글자 크기, 자간 등)·줄 간격이 타이트함 ▼ 피드백을 반영해서 개선      ❇️WIL이번 주는 첫 미니 프로젝트로 팀원들과 팀 소개 페이지 제작 프로젝트를 진행했다. 프로젝트 시작 단계에서 팀 이름인 '출발'에서 시작해 목표에 도달하기 위한 여정이라는 컨셉을 도출했고, 메인 페이지,..

✅241024· 각오 페이지 피드백 반영해서 수정하기· 작업물 합치기· 발표 자료 준비하기📋팀 프로젝트 - 팀 소개 페이지 제작 프로토타입 - 클릭하면 사진 넘어가게 만들기 프레임을 복사해서 navigate to로 넘기는 방법이 가장 쉽겠지만, 다른 팀원들 작업물과 합쳐야하기때문에 다른 방법을 알아보기로 했다 화면 전체가 넘어가는 것 말고 딱 사진부분만 바꾸고 싶어서 고민하다가 사진 크기에 딱맞는 프레임을 만들어서 한 장씩 올려보기로.. 사진이 넘어가는 것 처럼 보이긴 하지만 레이어가 쌓이는 모습도 같이 보이는 문제 발생 이것저것 시도해보다가 포지션을 수동으로 맞출 수도 있다는 사실을 알게됨오버레이 될 위치를 manual 기능으로 딱 맞게 맞추면 ❇️TIL 피그마에서 '오픈 오버레이' 기능을 이용해 클..

✅ 241023· 각오 페이지 수정· 페이지 합치기· 3주차 복습  📋3주차 복습파운데이션 : 컴포넌트를 구성하는 기초재료색상을 10단계로 만든느 이유 : 중간에 50단위 색상 추가하기 쉬움, 알아뵈 쉬움1:3:6 = 포인트 컬러 : 세컨더리 컬러 : 백그라운드 컬러 컬러스타일 피그마에 등록하기    폰트 사이즈12 Body-xsmall / 14 Bdoy-small / 16 Body-medium / 18 Body-large / 20 Body-xlarge20px 이상일 때 4px씩 차이나게 하는게 일반적일반적인 행간 값 : 굵고 큰 폰트(제목) - 120% ~ 135%, 본문 - 135% ~ 170% 폰트 스타일 추가    마스터 컴포넌트 : 원본 / 마스터 컴포넌트를 복사하면 인스턴트가 생성됨인스턴스 ..

✅241022강의 · 2주차 복습 팀프로젝트· 컬러 정하기 · 역할분담 · 맡은 부분 진행하기📋2주차 복습 오토레이아웃레이어를 코드 블록처럼 쌓는 핵심 레이아웃 기능컨테이너는 개체와 패딩으로 이루어짐컨테이너를 얼마만큼의 간격으로 몇 개 쌓을 건지를 편하게 만들 수 O  Frame1: 프레임이 아닌 텍스트 위에 바로 오토레이아웃 적용한 경우 → 패딩 값이 자동으로 생김Frame2: 텍스트에 프레임을 씌운 경우 Frame3: 프레임이 있는 개체를 오토레이아웃을 만든 경우  → 패딩 값 자동으로 생기지 X 오토레이아웃은 레이어를 쌓아 내려가는 개념이기 때문에내부 프레임의 레이어 순서가 일반적인 순서와 정반대임  컨스트레인트 : 오토레이아웃 안에 있는 자식 컨테이너가 움직이는 조건 값 Constraints L..

✅ 241021· 팀 이름 & 팀장 정하기· 팀 노션 만들기· 팀 사이트 컨셉 정하기· 와이어프레임(진행중) 📋피그마로 팀 소개 페이지 제작하기키워드 도출성장, 발전, 도전,발자국,사다리,배터리 새, 지도, 화살표, 나침반, 열린 문▼키워드 묶기배터리 = 차오르다성장, 발전, 도전 = 여정=진행중사다리 = 올라가다화살표, 나침반 = 길열린 문 = 가능성▼키워드 선정발자국 = 성장하고 있는 흔적여행 = 지도, 나침반  키워드 선정 후 아이디어 공유 ❇️ TIL (Today I Learned)본캠프 첫날이라 우선 팀원들과 아이스브레이킹 및 팀 노션 작성 후, 팀 과제인 팀 소개 페이지 제작을 위해 이야기를 나누는 시간을 가졌다. 오늘 회의에서 다양한 아이디어와 관점을 나누며 팀워크의 중요성을 다시 한번 실..

📋3주차 - 7UI 디자인 기본 UI의 분류액션 : 사용자가 행동을 수행할 때 사용(버튼)인풋 : 사용자의 입력을 받을 때인포메이션 : 사용자에게 안내사항 전달(토스트 메시지, 스낵바, 라벨)컨테이너 : 컴포넌트가 결합되어 하나의 덩어리를 이루는 컴포넌트 (카드, 리스트)네비게이션 : 사용자가 페이지 이동할 때 사용 (네비게이션바 앱바, 하단바)컨트롤 : 사용자가 값을 수정할 때 사용(체크박스, 스위치 등) 의사상태(Pseudo State): 컴포넌트의 가상의 상태ex) 버튼에 마우스 올렸을 때 색 바뀌는거*주의* 컴포넌트마다 쓸 수 있는 것과 없는 것이 있음. 📋3주차 - 8UI 만들기 실습(1) 버튼컴포넌트컴포넌트 종류 중 액션에 해당.누름으로써 중요한 동작을 수행하는 요소 버튼 설계 시 유의할 ..

📋 2주차 - 6프레임 리사이징: 프레임 오토레이아웃 후 사이즈가 변경되는 것 Fixed 고정값 | 공통Hug 자식 컨테이너의 크기에 맞춰 조정 | 부모만 쓸 수 있음Fill 부모 컨테이너의 크기에 맞춰 조정 | 자식만 쓸 수 있음 자식이 고정 값이라면 부모는 감쌀 수 밖에 없음.자식이 부모에 맞게 꽉 차야 한다면 부모는 고정될 수 밖에 없음 📋2주차 - 7포지션 이해하기웹사이트 헤더나 앱 하단버튼처럼 위치가 고정된 요소들요소의 위치를ㄹ 고정하거나 스크롤에 따른 위치를 조정할 때 개발에서 포지션이라는 속성을 조정 피그마의 포지션 종류static기본값, 스크롤 하면 같이 움직임fixed스크롤을 하더라도 항상 고정된 위치absolute담겨 있는 부모 컨테이너를 기준으로 고정된 위치sticky스크롤에 따라..

✅ 사전캠프 1018사전강의 1주차-8 ~ 2주차-5 WILKPT 📋 1주차 - 8 도형과 글자 만들기📋 1주차 - 9패스 알아보기📋 2주차 - 2 프레임과 그룹 프레임 : 코드블록을 만드는 기능, 실제 화면으로 인식되는 개체그룹 : 여러개체를 하나로 묶어주는 기능 프레임과 그룹 비교 📋 2주차 - 3부모-자식 관계와 레이어 정렬 📋 2주차 - 4오토레이아웃 기능: 레이어를 쌓고 프레임을 배치하고 정렬하는 기능- 개체를 패딩으로 감싸 컨테이너를 만들 때 사용- 컨테이너를 간격에 맞게 규칙적으로 정렬해주는 기능 📋 2주차 - 5프레임과 컨스트레인트 컨스트레인트: 오토레이아웃 안에 있는 개체들이 움직이는 방식을 제한: 부모 컨테이너의 크기가 변할 때, 자식 컨테이너는 어디를 기준으로 변할까?를 정..

📋 1주차 - 3해상도 : 디스플레이의 선명한 정도 / 디스플레이 안에 들어가 있는 픽셀의 수   · 1920*1080 디스플레이는 가로 줄에 픽셀 1920개 세로 줄에 1080개 있음해상도와 픽셀의 관계· 화면 사이즈가 커질수록 픽셀 한 칸의 크기도 커진다 ·  면적당 픽셀 수가 많을수록 해상도가 높아짐 ·  일반적으로는 화면 사이즈가 커질수록 해상도도 높다 ·  8*8 해상도는 4*4 해상도 보다 4배 더 높다 1배수 디자인 디바이스마다 맞는 디자인을 일일이 다 만들지 않음   → 기준이 되는 사이즈 하나를 정해서 디자인일반적인 1배수 디자인 사이즈 = 사람들이 가장 많이 쓰는 사이즈내가 만들 앱이 안드로이드를 쓰는 사람이 많이 쓸 앱이라면 안드로이드를 기준으로함 *권장하는 1배수 사이즈*아이폰 3..