UI 컴포넌트

피그마 인터페이스 설계 1. 와이어프레임에 아이콘 넣기 1-1. 준비 <li> 시작 프레임으로 이동합니다. (05-인터페이스/1.아이콘넣기) </li> <li> 플러그인을 설치합니다. (Iconify) </li> <li> 순서대로 진행합니다. </li> 1-2. 아이콘 넣기 <li> 그림과 같이 아이콘을 겹쳐 놓습니다. </li> <li> 색상 복제 적용: 피그마의 색상 HEX 코드를 복사하여 Iconify의 color 입력 상자에 붙여넣은 후 아이콘을 적용해봅니다. </li> <li> 하단 탭바의 … 더 읽기

피그마 기능심화 1. 카드UI 만들기 <li> 프레임을 두 개 그립니다. 하단 프레임은 Alt + 드래그 드랍으로 복제 후 크기를 줄입니다. </li> <li> 두 개의 프레임을 한번 더 프레임 그룹으로 묶습니다. </li> <li> 프레임의 이름을 그림처럼 변경합니다. </li> <li> 표시된 순서대로 체크하여 모서리를 둥글게 만듭니다. </li> 1-1. 프레임 VS 그룹 같은 작업을 그룹으로 해봅니다. 사각형을 그려서 … 더 읽기

피그마 인터페이스 예제 Info: 예제파일 다운로드: https://url.kr/5qeozf 1. 캔버스와 페이지 그리고 레이어 1-1. 캔버스 속성 설정 <li> 배경색 변경하기 </li> <li> 측정자 표시하기 우측 패널에서 설정: 좌측 패널 홈버튼에서 설정: </li> 2. 화면 명칭 좌측 패널 메인 메뉴 툴바 파일명 우측 패널 탭 버튼 3. 좌측 패널 3-1. 레이어 <li> 툴바에서 프레임(Frame) 클릭 </li> <li> … 더 읽기

피그마 작업환경 세팅 1. 프로그램 설치 1-1. 온라인 회원가입 피그마(Figma) 공식사이트에서 회원가입을 합니다. 피그마 공식사이트 1-2. 로컬 프로그램 설치 피그마는 브라우저에서도 사용 가능하지만, 로컬 프로그램(데스크톱 앱)을 설치하면 더 안정적으로 사용할 수 있습니다. 1-3. 피그마 미러링 OS에 맞는 앱을 다운로드합니다. 피그마 다운로드 페이지 Warning: 앱 설치 후 로그인 시 웹에서 로그인한 계정정보와 같아야 프로토타입 문서의 시뮬레이션이 … 더 읽기

해상도와 그리드 시스템 1. 해상도와 래스터화 해상도(Resolution)와 ppi(pixels per Inch) 해상도란 TV, 모니터, 스마트폰 등 디스플레이 장치에서 화면을 이루는 각각의 면이 몇 개의 픽셀로 이루어져 있는가를 나타내는 것입니다. 해상도는 이미지의 가로와 세로에 몇 개의 화소(픽셀)가 있는지를 뜻합니다. 화소(픽셀)가 적은 30×30보다 100×100 해상도에서 더욱 또렷하게 보입니다. 화소(픽셀)가 많으면 많을수록 더 세밀하게 이미지를 표현할 수 있기 때문입니다. … 더 읽기

아이콘 디자인 이론 1. 한 가지 스타일을 고수하기 아이콘을 디자인하기 전에 스타일 방향을 생각해보세요. 스타일 방향은 모든 아이콘의 특정한 굵기, 색상, 아름다움을 유지하게 하는 것 그 이상입니다. 스타일 방향은 또한 아이콘이 있을 곳 및 사람들이 어떻게 이 아이콘을 마주하게 될지를 고려하는 것도 포함합니다. 애플리케이션 인터페이스 아이콘 디자인은 큰 포스터용 아이콘 디자인과는 다릅니다. 아이콘 스타일 방향을 … 더 읽기

디자인을 향상하는 데 도움이 되는 6가지 비주얼 체계 규칙 1. 색상으로 초점 맞추기 디자인 구성의 모든 요소처럼 색상 선택은 독자에게 전반적인 디자인이 전달되는 방식에 아주 큰 영향력을 미칩니다. 색상을 의도적으로 사용하여 독자들이 처음으로 볼 초점을 만들 수 있습니다. 색상이 전략적으로 적용되면 헤드라인, 타이틀, 이름, 다른 중요한 디테일이 강조됩니다. 이 요소들이 독자가 처음으로 확인해야 할 내용이며 … 더 읽기

조형요소 모든 조형의 최소 단위로 더 이상 나눌 수 없는 것을 말합니다. 크기를 갖고 있지 않고 선의 끝과 시작, 선들이 만나거나 교차하는 곳 등에 존재하며 위치를 표시합니다. 공간에 한 점을 두면 집중력이 생기고, 중심에 있음으로써 주목성과 안정감이 생깁니다. 각 점을 가깝게 함으로써 면을 느끼게 합니다. 두 점을 가깝게 떼어 놓으면 선의 효과가 생깁니다. 두 점을 … 더 읽기

모바일 디자인 – 버튼 버튼(Button)은 사용자가 데이터를 전송하거나 기능을 실행하도록 하는 명령 컨트롤(imperative control)입니다. 버튼의 가장 큰 특징은 사용자가 터치했을 때 즉각적으로 명령을 실행시키는 점입니다. 버튼의 특징 버튼은 어포던스(Affordance)가 있어야 한다 버튼은 다른 컨트롤과 달리 누르는 행위를 유발하는 특징(어포던스)이 있습니다. 사용자가 텍스트 필드 같은 입력 컨트롤로 정보를 입력하고 선택 컨트롤로 항목을 선택한 후 버튼을 누르면 … 더 읽기

스타일 가이드 만들기 1. 스타일가이드 제작전 준비 1-1. 리디자인할 프로젝트의 콘셉트 정의 프로젝트의 무드보드에서 콘셉트 선정 (형용사적인 단어 하나만, 주조색 1개) 1-2. 디자인 콘셉트 정의 프로젝트를 시작하기 전에 범위, 스타일, 시각적 방향 및 목소리 톤을 정의하는 스타일 가이드가 있으면 프론트엔드 개발자에서 디자인 팀, 프로젝트 관리자, 연구원에 이르기까지 모든 팀원에게 도움이 됩니다. 2. 스타일가이드 제작 2-1. … 더 읽기