본문 바로가기

기록

 (53)
[새싹x코딩온] 웹 퍼블리싱 과정 7주차 - 3 | Component Component 메인 컴포넌트가 변경될 때 인스턴스 컴포넌트가 변경되지 않게 하려면 detach instance를 적용하면 된다. 메인 컴포넌트는 detach를 할 수 없으니 복사해서 인스턴스 컴포넌트를 만든 후 detach를 해야 한다. component set 컴포넌트를 여러개 잡으면 컴포넌트 세트로 만들 수 있다. component property component property를 만들려면 이름을 blue = button lg r5 이런 식으로 설정한다. 여기서 blue는 name이고 button lg r5은 value이다. component property를 만들면 어떤 버튼을 만들더라도 클릭 한 번으로 component property를 설정한 버튼스타일로 변경할 수 있다. component..
[새싹x코딩온] 웹 퍼블리싱 과정 7주차 - 2 | 피그마 심화 피그마 심화 그리드 시스템 그리드란? 격자나 바둑판 모양의 눈금을 의미한다. 디자인 레이아웃에 규칙을 부여하는 수단으로 디자인이 동일한 그리드 규칙을 가지게 되면 일관된 UI를 갖는다. breakpoint breakpoint란 반응형 웹에서 사이즈가 변화하는 지점이다. (변곡점) xs (extra-small) : 0px sm (small) : 600px md (medium) : 900px lg (large) : 1200px xl (extra-large) : 1536px 그리드는 웹사이즈, 테블릿사이즈, 모바일사이즈로 나누면 되는데 태블릿 환경일 때는 column값을 6 또는 8로 두고 작업하고 모바일 환경일 때는 column값을 4로 두고 작업한다. container는 보통 1200px을 사용한다. 아래..
[새싹x코딩온] 웹 퍼블리싱 과정 7주차 - 1 | 피그마 실습 피그마 실습1 : 피그마 로고 똑같이 만들어 보기 1. 직사각형을 만들고 radius를 알맞게 설정한다. 2. 스포이드 도구로 해당 색상을 추출하여 색을 채운다. 피그마 실습2 : 다양한 도형 만들어 보기 첫번째 도형 : 도형을 더블클릭해 나오는 점을 조절하여 만든다. 세번째 도형 : 두 개의 정사각형을 겹쳐 exclude selection을 적용한다. 네번째 도형 : 별 모양 도형을 만들어 꼭짓점 개수를 8개로 설정하고 ratio 점을 조절한다. 여섯번째 도형 : 원 네 개를 겹쳐 union selection을 적용한다. 일곱번째 도형 : 원을 만들어 sweep 점을 조절한다. 아홉번재 도형 : 삼각형 두 개를 만들고 subtract selection을 적용한다. 피그마 실습3 : 컬러 디자인 시스템 ..
[새싹x코딩온] 웹 퍼블리싱 과정 6주차 - 3 | 포토샵 - 펜툴, 피그마 입문 펜툴 펜툴은 패스를 생성하는 툴이다. 색상이 비슷하거나 이미지의 품질이 낮은 경우 패스를 직접 만들고 그 만들어진 패스를 영역으로 바꿔다가 사용한다. 사용 방법 펜툴 도구를 선택하고 처음 시작점을 찍는다 - 다음 점을 찍으면 이전 점과 연결된 선이 그어진다. - 마지막에는 처음점과 이어지게 점을 찍는다. 둥글게 선을 긋고 싶으면 다음점 찍을 때 드래그해서 원하는 선이 나오게 한다. 선의 방향이 이상하면 alt를 누르면서 방향점을 조정한다. 곡률 펜 도구를 사용하면 드래그하지 않아도 곡선으로 그어진다. 피그마 피그마란? 어도비 산하의 웹 기반 UI/UX 디자인 및 프로토타이핑, 협업툴이다. 2021년 UX tools에서 실시한 UI툴 랭킹에서 UI 디자인, 핸드오프, 디자인 시스템 등 거의 모든 항목에서 ..
[새싹x코딩온] 웹 퍼블리싱 과정 6주차 - 2 | 포토샵 심화 포토샵 심화 타이포그래피 텍스트를 가독성이 좋도록, 미적으로 감각있게 배열하는 방법이다. 폰트와 서체 서체와 폰트는 의미가 다르다. 서체는 폰트군 집합을 대표하는 이름이고 폰트는 서체 내에서 다양하게 정의된 스타일을 구분하는 것이다. 세리프와 산세리프 세리프 문자 획 끝에 작은 장식이나 선 또는 꼬리가 나와 있는 형태이다. 부드러운 느낌이 들어 책 같은 인쇄물에 쓰인다. 산세리프 문자 획에 어떠한 장식도 없이 깨끗한 선으로 구성되어 있는 형태이다. 메인 문구와 같이 강조할 때 쓰인다. 여백 네거티브 스페이스(negative space)라고도 하는 여백은 텍스트나 이미지를 둘어싸고 있는 빈 영역을 의미한다. 그래픽 요소 사이에 충분한 공간을 더하면 복잡해지는 것을 피하고 명확해질 수 있다. 여백이 없으면 ..
[새싹x코딩온] 웹 퍼블리싱 과정 6주차 - 1 | 포토샵 기초 포토샵 기초 Photoshop 어도비 포토샵이란? 1988년 Adobe에서 개발하고 출시한 래스터 그래픽 편집기이다. 이미지 작업을 할 때 범용적으로 사용하고 픽셀을 이용하여 이미지를 만들기 때문에 래스터 기반 아트에 적합하다. 래스터(Raster)란? 컴퓨터에서 화상 정보를 표현하는 한 가지 방법이다. 점을 나열해서 표현하고 해상도가 떨어질 수 있다. 이미지를 2차원 배열 형태의 픽셀로 구성하고, 이 점들의 모습을 조합, 일정한 간격의 픽셀들로 하나의 화상 정보를 표현하는 것이다. Illustrator 어도비 일러스트레이터란? Adobe에서 개발한 벡터 그래픽 기반 편집기 및 디자인 소프트웨어이다. 벡터(Vector)란? 완벽하게 부드러운 선을 만드는 데 사용되는 점이다. 최대 900%까지 확대할 수 ..
[새싹x코딩온] 웹 퍼블리싱 과정 5주차 - 3 | UI/UX, 디자인시스템 UI / UX란? UI - User Interface - 어떤 제품이나 소프트웨어를 사용하게 되는 소비자가 제품과 서비스를 이용할 때 처음 접하게 되는 매개물이다. - 흔히 ui 디자인이라고 하면 아이콘, 색감, 타이포그래피 등으로 보여지는 시각 디자인을 의미한다. UX - User eXperience - 유저의 경험을 의미하며 유저가 서비스나 제품을 직접 사용하여 느끼는 것이다. - ux 디자인은 이용을 하는 이용자가 편리하고 만족하게끔 ui를 디자인하는 것을 의미한다. UI 디자인 UX 디자인 직관적이고 심미적으로 만족스러운 시각적/대화형 인터페이스를 구축한다. 사용자의 문제를 식별하고 해결한다. 제품 개발 프로세스를 뒤따른다. 제품 개발 프로세스에 선행된다. 시각적 대화형 요소를 디자인한다. 사용자..
[새싹x코딩온] 웹 퍼블리싱 과정 5주차 - 2 | :root, 라이브러리 가상 클래스 :root - 웹 문서에서 가장 상위에 해당하는 태그이다. - 문서에서 쓰일 기본적인 스타일을 지정할 수 있다. 사용방법 1. :root 가상클래스 선택자 내부에 --변수명이라는 변수를 만들어서 css 값을 넣어준다. 2. 변경할 선택자 내부에 var(--변수명)을 입력하면 해당 스타일로 변경할 수 있다. 유용한 라이브러리 Swiper.js 웹 페이지 내의 요소를 슬라이드 할 수 있는 기능을 효율적으로 만들어준다. https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions a..

티스토리툴바