UI/UX 공부기록

10/18 일일 목표📝 웹/앱 클론만들기  📝3주차를 돌아보는 WIL 지난 일주일 동안 가장 인상 깊었던 배움에는 뭐가 있었지? 5주차 까지 강의를 다 들으면서 컴포넌트를 만들어 UI디자인을 배운것이 기억에 남는다.웹/앱 클론을 만들면서 컴포넌트를 하나씩 만들다보니까 강의 들은 것도 기억이 나고, 복습하는 시간이었다.(만드는데 너무 오래걸렸지만 😅)  그리고 HTML에 대해 배운 것도, 개발에 대해서는 아예 모르는데 특강을 들으면서 그래도 조금 기본틀? 정도는 알게 된 것 같아서 나름 뿌듯했다!   그 과정에서 나는 무엇을 깨달았고, 어떤 감정/생각이 들었었지?웹/앱 클론을 만들면서 막히는 부분은 강의를 다시 듣거나, 구글에 검색해서 찾으면서 알아갔다. 혼자서 머리싸매고 생각하는 것보다 팀원들에게 ..

10/17 일일 목표📝 웹/앱 클론만들기특강 듣기   📖 오늘 배운 내용! 기본적인 웹 개발 구조 정리 HTML이란?Hyper Text Markup Language웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 기능을 가진 문서를 만드는 언어  HTML의 구조 1. 웹 사이트를 만들 때 제일 처음으로 써야하는 부분. 2. 우리가 만드는 코드를 감싸는 큰 틀. 내용은 모두 이 안에 들어가야 함 3. 웹사이트에 대한 정보들 (제목, 글꼴, 색상 등) 설정들이 들어감사이트에서는 보이지 않지만 중요한 역할을 하는 내용들이 들어감 4. 웹사이트에서 눈에 보이는 것들이 들어가는 부분.우리가 실제로 보는 컨텐츠들이 이 안에 들어감   태그란?tag는 html에서 웹페이지 구조를 정의하고 다양한 요소들을 표시하..

10/16 일일 목표📝 컴포넌트 만들기   📖 오늘 배운 내용!   두줄 글자 들어갈때 만드는법이 헷갈려서 정리! 1. 메인 타이틀과 추가 설명칸 텍스트 적고 오토레이아웃2. 글자와 맞게 이미지 넣을 프레임 추가3. 이미지 프레임과 텍스트 같이 오토레이아웃 지정4. 아이콘 추가, 배경색 지정    네이게이션 컴포넌트Bottom barNavigation barNavigation drawerNavigation railSearchTabsTop app bar  👩‍🏫 오늘 진행하며 어려웠던 부분 컴포넌트 정리를 하다보니 내가 모르던 부분도 많았다. 위에 설명에 있는 네이게이션 컴포넌트 종류만해도 7가지...다양한 컴포넌트를 정리하고 .. 이해하고 적재적소에 써야한다는 점이 어려웠다  👀 어려웠던 부분을..

10/15 일일 목표📝5주 차 강의 듣기컴포넌트 만들기   📖 오늘 배운 내용! 안드로이드는 360X800, 아이폰은 375X812 가 1배수 사이즈! 히어로 섹션이란?메인 화면의 가장 중요한 상단부분, 중요한 메세지를 전달하는 영역.(주로 배너가 많이 사용됨)  앱 바란?네이게이션의 한 종류앱 상단에 고정되어 있으며 현재 화면의 이름을 알려주고, 이전 화면으로 돌아가거나 현재 화면을 끌수 있도록 해준다.  리스트 컴포넌트란?컴포넌트의 종류 중 컨테이너에 해당하는 컴포넌트동일한 내용과 형태의 정보를 반복적인 패턴으로 보여줄때 사용    프로토타입이란?시제품 이라는 뜻실제 제품을 만들지 않고 테스트를 하는 것 프로토타입을 만드는 이유?제품을 만들어 보지 않고 아이디어를 검증할 수 있다.팀원들과 시각적인..

10/14 일일 목표📝4주 차 강의 듣기   📖 오늘 배운 내용!  프로퍼티(Property)?속성이라는 뜻으로, 디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소들을을 다룰 때 사용.   컴포넌트 프로퍼티?프로퍼티의 종류는 4가지 1) Variants 배리언츠컴포넌트가 가질 수 있는 또 다른 모습을 만들 수 있게 하는 컴포넌트 기능가상의 상태를 만들 때 사용.   2) Boolean 불리언컴포넌트 안에 있는 요소들을 보이게 하거나 안 보이게 하는 속성레이어를 껐다 켰다 할 수 있다.    3) Instance swap 인스턴스 스왑컴포넌트 안에 다른 컴포넌트 인스턴트가 있을 경우 다른 인스턴스로 교체 가능주로 버튼 안의 아이콘, 팝업 안의 버튼을 교체할 때 사용    4) Text컴포넌트 안에..

10/11 일일 목표📝3주차 1~5강 강의듣기개인 과제아티클 스터디 📖 오늘 배운 내용! 파운데이션 이란? UI를 구성하는 구성요소!위의 사진처럼 버튼을 만들기 위해서는 그 안을 구성하는 색상, 폰트 등 기초 재료인 파운데이션이 필요하다 파운데이션의 구성색상서체간격, 여백곡률그리드고도아이콘 컬러스타일이란? 디자인에서 사용할 색상을 모아두는 팔레트!UI에서는 미리 색상을 정해두고 그 안에서 색상들을 사용한다. 기본적으로 2~3가지 색상으로 10단계까지 만들어 사용한다. 가장중요한 색상인 포인트 컬러는 10% 비율로 사용한다. 전체적인 배경은 60%, 나머지를 30%로 채운다.1:3:6 법칙으로 전체적으로 균형을 만들어주고, 사용자가 집중해야 할 부분을 잘 보여준다.   폰트스타일이란? 디자인 시스템에서..