E민

피그마 강의 | 개인과제 9:00-13:00 50분 학습, 10분 휴식 루틴으로 피그마 활용 2-1 학습, 정리 14:00-18:00 50분 학습, 10분 휴식 루틴으로 개인 과제 시작! 일단 와이어프레임 제작 + 홈화면 살짝 건드리긴 했는데 앞으로 갈 길이 태산이라는~~~~@@ 19:00-21:00 오늘 학습 내용 복습, Summary 작성 과제를 시작해보니까 강의에서 배운 것들 + a ,, 로 해야 하는 부분이 많다는 걸 매우매우 느꼈다 슬랙 질문방을 보니 이건 어떻게 만드셨지? .. 하는 부분들이 많다는 것,, 다른 분들의 뛰어난 실력에 또 한 번 감탄함ㅠ,, 반성해라 나 자신 내일은 진짜 과제 뿌셔버리고 만다. 아 진심.

01. 다양한 환경에서의 UI 차이 1. 웹과 앱의 특성 웹과 앱의 특성 비교 (모바일 웹과 앱) 💡 우리가 아는 사파리, 크롬, 삼성 인터넷 등을 웹브라우저(Web Browser)라고 부름 웹 앱 운영체제 제한 없음 안드로이드와 iOS앱 별도로 준비 접근성 웹브라우저에 주소만 입력하면 가능 앱마켓에서 설치해야 함 업데이트 난이도 업데이트하기 쉬움 앱마켓 심사를 통과해야 가능 인터랙션 및 UI 웹브라우저와 충돌하지 않는 선에서 가능 다양하게 사용할 수 있음 성능 다양한 기기에서 제약 없이 쓸 수 있지만 그만큼 카메라, GPS, 사진 보관함 등 성능 면에서 떨어짐 기기에 특화된 기능을 사용할 수 있지만 다양한 디바이스를 지원하게 만드는 것이 어려움 개인화 푸시나 알림을 제공하기 어려움 푸시 메시지를 보낼 ..

01. 모달 1. 합성 컴포넌트와 컨테이너 컴포넌트 컴포넌트들은 대부분 파운데이션 요소들을 모아 만듦 - 그런데, 파운데이션 요소만으로는 만들 수 없고, 컴포넌트를 모아 또 컴포넌트를 만드는 경우가 있음 - 버튼은 이미 컴포넌트인데, 버튼 컴포넌트에 폰트 스타일, 컬러 스타일, 여백 및 간격, 곡률 등이 합쳐져 다시 컴포넌트가 되어 있음 => 다이얼로그 이런 컴포넌트들을 **합성 컴포넌트(Compound Component)**라고 부름 합성 컴포넌트는 대부분 버튼 컴포넌트에 파운데이션 또는 컴포넌트가 여러개 합쳐진 형태 이런 합성 컴포넌트들은 대부분 특정한 맥락을 담고 있기 때문에, 컨테이너 컴포넌트라고도 부름 컨테이너 컴포넌트에는 바텀시트, 다이얼로그, 리스트, 카드 등 복잡한 구조의 컴포넌트들이 있음..

Over view : 한 주 동안 한 일 피그마 활용1 강의 듣고 강의별 실습 과제 제출, 블로그에 Summary 꾸준히 적기 Keep : 만족하는 부분, 앞으로도 유지하고 싶은 것 강의를 듣고 블로그에 Summary 꾸준히 적는 것은 앞으로 강의가 있을 때마다 꾸준히 적어나가야겠다. 매일 조금씩 쓰고 올리는 것이 조금 귀찮을 때도 있고 분량이 너무 많아서 쓰기 싫을 때도 많지만 ,, 항상 이겨내버림 !! Problem : 아쉽거나 개선이 필요한 부분 강의를 듣고 학습하는 과정이 남들보다 느린 것 같은 .. 느낌적인 느낌? .. 슬랙 질문방 보면 다들 과제하고 있는 것 같은 .. ㅜ ..흑 Try : Keep을 더 잘하기 위한 방법, Problem에 대한 해결책, 당장 시도할 수 있는 action ite..

01. 컴포넌트 1. 컴포넌트의 개념 피그마 한정) 컴포넌트는 컨버스 위의 모든 개체 (맥락에 따라 다르게 해석) 즉, 디자인에서 컴포넌트는 파운데이션의 조합을 쌓고 쌓아 만들어지는 구성품 2. 컴포넌트를 분석, 비교할 때 유의할 점 * 컴포넌트의 모양이 아니라 기능이 중요한 이유 -> 분명히 버튼마다 모양도, 색상도 다른데 우리는 같은 버튼으로 인식 Q. 모양도, 색상도 다르지만 모두 ‘버튼’이라고 받아들이는 이유가 무엇일까? -> 버튼의 생김새가 아니라 버튼이 하는 일을 기준으로 생각하기 때문 => UI를 비교하고 공부할 때는 UI의 목적, UI의 기능에 초점을 둬야 함 3. 컴포넌트의 종류 1) 액션 : 사용자가 중요한 행동을 수행할 때 사용 2) 인풋 : 사용자의 입력을 받을 때 사용 3) 인포메..

플러그인에서 고른 색상을 복사해서, 피그마에 사각형을 만들고 각각 배경색으로 넣어 주세요. 각각의 사각형을 10개씩 복제해 주세요. 포인트 컬러 사각형을 눌러서, 색상 피커를 열어 주세요. 💡 명도를 10단계로 나눠볼 거예요. 색상 피커에서 HEX 눌러, 색상 코드를 HSL로 바꿔 주세요 💡 HSL은 Hue(색조), Saturation(채도), Lightness(밝기)로 색을 구분하는 방법이에요. 포인트 컬러 사각형의 L값이 얼마인지 확인해주세요. 🧔🏻 제가 고른 색은 L(밝기)가 47이네요! L값을 기준으로 10씩 빼거나 더해서 사각형들의 색상을 맞춰 주세요 💡 제가 고른 색상을 기준으로, 밝기를 10씩 줄이거나 늘려서 자연스럽게 밝고 어두워지는 색상을 만들 거예요! 🧔🏻 제가 고른 값은 L이 47이므..

피그마 강의 | 특강 9:00 - 13:00 : 50분 학습 10분 휴식 루틴으로 2주차 복습 + 3주차 학습 .. 정리 14:00 - 18:00 : 50분 학습 10분 휴식 루틴으로 3주차 학습 .. 정리 마무리 19:00 - 20:00 : 오늘 학습 내용 복습 이번 튜터님 강의 스타일이 나랑 잘 맞는 것 같아서 강의 듣기가 너무 편-안 하다는.,,ㅎ 중간중간 재치도 .. 큐트하심 !!! 파트마다 내용이 너무 알차고 자세해서 유알못인 나도 너무 잘 이해가 되는 마법 .. 하 감사합니다 튜터님 .,,, 강의에 많은 공을 들이신 것이 아주 잘 느껴짐미ㄷr ..... 그런데.... 이번주 학습 분량이 왜 이럿케 마는가여?ㅜㅜ.. 내일 바로 과제 시작해야 하는데 저,,, 할 수 이쓸까여? 야심한 밤,, 일단 ..

01. 디자인이 코드로 변환되는 과정 1. 디자인을 코드로 변환 2. 코드는 디자인을 레고처럼 쌓음 - 코드는 기본적으로 네모난 박스 영역을 만듦 (박스모델이라고 부름) 3. 웹과 앱은 코드를 읽고, 디자인으로 다시 바꿔서 화면에 보여줌 - UI를 설계할 때는 코드로 변환할 수 있는 구조로 만들어야 함 02. 프레임과 그룹 1. 프레임 Frame 피그마에서 코드 블록을 만드는 기능이자, 실제 화면으로 인식하는 개체 - 프레임은 디자인을 코드로 바꿀 때 개발이 가능한 코드 블록으로 만들어짐 - 박스 모델의 박스 하나하나가 피그마에서 프레임이라는 기능으로 구현되는 셈 - 프레임은 다른 개체나 프레임을 넣을 수 있기 때문에, **컨테이너(Container)**라고도 부름 2. 그룹 Greop 여러 개체를 하나..