HTML & CSS

피그마 작업환경 세팅 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. … 더 읽기

웹디자인 타이포그래피 10가지 팁 웹에서 제공되는 정보의 95% 이상은 문자로 되어 있다 좋은 폰트를 사용한 웹디자인은 유저가 내용을 읽기 쉽게 하는 반면, 좋지 않은 폰트를 사용한 웹디자인은 유저의 흥미를 잃게 만들 수도 있습니다. Oliver Reichenstein은 그의 저서 <웹 디자인의 95%는 타이포그라피다>에서 다음과 같이 이야기합니다. 타이포그라피를 최적화하는 것은 가독성, 접근성, 사용 편의성을 포함한 전체적인 그래픽 밸런스를 … 더 읽기

색상을 성공적으로 고르는 방법 디자인에서 색상을 성공적으로 활용하려면 알아두어야 할 점들을 배워보세요. 색상 이론, 색상 의미, 색상 모드를 이해하고 작품에 잘 어울리는 팔레트를 선택하세요. 여러분께서는 의도적으로든 아니든 늘 색상을 결정합니다. 보통 본능적으로 색을 결정하지만, 실제로는 색채 이론이라는 이 모든 것을 설명하는 과학 분야가 있습니다. 색채 이론은 서로 다른 색이 어떻게 관련되어 있는지와 여러 색채 조합과 … 더 읽기

아이트래킹이란? 아이트래킹(Eye tracking)은 사람의 눈동자가 자연스럽게 움직이는 패턴을 측정하여 인지과학, 마케팅, 인간-컴퓨터 상호작용, 의학 등 다양한 분야에서 응용되고 있는 기술입니다. 웹디자인에서 아이트래킹은 사용자 경험(User Experience)을 향상시키기 위한 분석 도구로 많이 활용됩니다. 사용자가 웹사이트에서 어디를 먼저 ��는지, 어느 부분에서 더 집중하는지, 어떤 링���를 가장 많이 클릭하는지 등을 측정하여 사용자 중심의 디자인을 구축하는 데 큰 도움이 됩니다. … 더 읽기