분류 전체보기 (24) 썸네일형 리스트형 피그마 - UI 만들기>컴포넌트 [ 버튼 컴포넌트 ] *참고 : 챕터 3-8- 컴포넌트를 분석할 때는 컴포넌트의 형태보다 정의와 뜻에 집중하자- 버튼 컴포넌트란 액션에 해당하는 컴포넌트이다 (누름으로써 중요한 동작 수행하는 요소) 1. 행동 유도성 (Affordance)1) 상호작용이 가능한 물체는 상호작용이 가능하다는 시각적인 단서를 제공해야 한다 > 즉, 버튼을 설계 할때는 누를 수 있다는 시각적인 힌트를 충분히 드러내야 한다2) 행동을 유도하는 속성을 행동유동성 = 어포던스라고도 한다3) 심미적인 완성도보다 버튼의 목적을 먼저 생각해서 설계해야 한다 >모든 UI를 설계할 때 UI의 개념과 목적을 최우선으로 고려하자 2. 버튼의 구조1) 컨테이너 (Container) : 안에 있는 요소를 감싸고 있는 프레임 -버튼의 높이는 컨테이.. 2026.07.31-톤앤매너 리서치 & 와이어프레임 제작 [톤앤매너 & 와이어프레임 제작]-톤앤매너 : 디자인이 주는 전체적인 분위기와 느낌-와이어프레임 : 본격적인 시각 디자인(컬러, 폰트, 이미지 등)을 입히기 전에, 화면의 구조, 레이아웃, 정보 배치를 설계하는 설계도 : 오직 선(Wire)과 상자(Frame) 중심의 무채색으로 구성하는 것이 특징 1. 만들 랜딩페이지와 비슷한 결의 브랜드&서비스 찾기 (톤앤매너 리서치)-각각 어떤 톤앤매너를 사용하는지, 색감+폰트,+사진 스타일 등 정리해보기1)2)3) 2. 랜딩페이지 레퍼런스 탐색-레이아웃, 섹션 구성 순서, 정보량 관찰*참고 사이트 1) 랜드북 https://land-book.com/ Landbook - website design inspiration galleryFind the best hand-p.. 피크마 - 폰트스타일 만드는 법 (plugin 활용) 1. 커뮤니티 > styler 검색 > plugins 클릭 > styler 클릭 후 북마크 2. 서체 Pretendard> 크기/행간 Title(14px, 16px, 18px / 135%), Body( 14px, 16px, 18px / 150%)> plugins > styler > Generate Styles3. 6개의 스타일 생성 완료4. 좌측 패널 창에 Text Styles 생성 피크마 - 컬러스타일 만드는 법 (plugin 활용) 1. 피그마 커뮤니티 > coolors 검색 > plugins > collors 클릭 2. 북마크 선택 3. 작업창 빈 공간에 마우스우측버튼클릭 > plugins > saved plugins에 coolors가 있는 것을 볼 수 있다 4. coolors를 이용해서 3가지 컬러 선택 > 10단계로 색을 나눠본다 5. 색상별 레이어명 지정 > 전체 선택 후 > plugin > styler > Generate Styles 클릭*레이어명 : 스타일명 / 수치 6. 30개의 스타일 생성 완료 7. 좌측 패널창에 Styles 생성 피크마 기초 개념 *코드는 디자인을 어떻게 읽을까?- 디자인을 코드로 변환 > 코드는 디자인을 레고 처럼 쌓는다 (코드는 기본적으로 네모난 박스 영역을 만든다 = 박스모델) > 웹과 앱은 코드를 읽고, 디자인으로 바꿔서 화면을 보여줌- 즉, UI를 설계할 때는 코드로 변환할 수 있는 구조로 만들어야 하고, 그 구조를 위한 기능이 프레임 [프레임(Frame)] ctrl+alt+g- 피그마 디자인의 기본 단위- 코드 블록을 만드는 기능이자, 실제 화면으로 인식하는 개체 (=실제 코드로 바꿀 수 있는 개체)- 프레임은 다른 개체나 프레임을 넣을 수 있기 때문에 컨테이너(Container)라고도 불린다* 컨테이너 (Container = 코드 블록) : 패딩, 보더, 마진으로 구성됨 (개체를 패딩으로 감싸 컨테이너 만들때 오.. 2026.07.30-나만의 랜딩페이지 주제 정하기 & 피그마 기초 다지기 오늘은 과제가 2개가 있었는데 시간이 너무 부족한 것 같다.....4시간이 이렇게 짧을 줄이야,, 피그마 기초 다지다가 시간이 끝났는데 못한 부분들은주말이나 시간이 날때 틈틈이 해서 써 나가도록 하겠다... [벤치마킹]-벤치마킹 : 다른 사례를 관찰하며 좋은 점을 배우는 것홈페이지에 들어갔을 때 가장 먼저 눈에 들어오는 화면(첫 화면)은 어떤 모습인지스크롤을 내리면서 어떤 순서로 정보가 나오는지 (예: 브랜드 소개 → 제품 특징 → 후기 → 구매 버튼)어떤 콘텐츠 유형이 있는지 (사진, 영상, 아이콘, 숫자 데이터 등) 1. 평소 관심 있던 브랜드 1) 디스커버리 https://www.discovery-expedition.com/ (1) 첫화면 : (2) 정보 순서 : (3) 콘텐츠 유형 : 2.. 피그마 구성 * 피그마는 팀단위로 결제를 진행한다고 한다 * 좌측Recents : 최근 작업 파일Teams : 내 계정이 속한 팀과 파일 목록 (팀명 옆에 Free : 무료 버전)Drafts : 연습파일Starred : 즐겨 찾는 파일Explore Community : 피그마 커뮤니티-각종 UI키트, 목업, 일러스트레이션, 디자인 시스템 등 다양한 디자인 자료와 작업을 더 효율적으로 만들어주는 플러그인 및 위젯도 찾아볼 수 있다. -피그마 커뮤니티 자료는 다른 사람들이 작업한 자료(서드파티-3rd-party ; 제3자)이기 때문에 무료, 유료가 섞여있다.- 사용 전 저작권이나 라이선스, 가격을 확인하는 것이 좋다.- 혹시나 문제가 생겼을 경우에는 피그마가 아닌 제작자에게 직접 문의해야한다. *상단 (작업 중인 파일들.. 피그마 앱세팅 피그마는 UI 협업 툴이자, 디자인이 필요한 모든 영역에서 유용하게 사용할 수 있는 툴이다.( 언제나 어디서나 사용 가능, 디자인부터 개발까지 올인원, 강력한 커뮤니티, 쉬운학습 ) 제품을 만들 때는 크게 기획 > 디자인 > 개발 > 테스트 및 출시의 과정을 거치는데피그마를 통해 디자이너를 중심으로 개발자와 기획자, 마케터 등 모든 직군들이 같은 화면을 보며 작업할 수 있다. [피그마 세팅]① 홈페이지 접속 : http://www.figma.com Figma: The collaborative canvas for design, code, and AIFigma is the canvas where design, code, and AI come together. From first idea to shipped .. 이전 1 2 3 다음
