홈/카테고리/디자인·소재

CATEGORY 09

디자인·소재

화면을 설계하고 사진 글꼴과 색을 고르는 곳
사이트 바로가기를 누르면 해당 공식 홈페이지가 새 탭에서 열립니다

제작 도구와 소재 출처를 구분하세요

화면 설계와 프로토타입에는 Figma, 간단한 시각 자료 제작에는 Adobe Express를 살펴보세요. 사진과 영상은 Unsplash·Pexels, 글꼴은 Google Fonts, 색 조합은 Coolors에서 탐색할 수 있습니다. 소재를 쓸 때는 해당 파일에 적용되는 이용 조건을 확인하세요

자주 궁금한 이용 방법

화면 설계와 이미지 편집 도구는 언제 구분하나요

버튼과 화면 흐름을 설계하려면 여러 화면을 연결하고 구성 요소를 재사용할 수 있는 도구를 살펴보세요. 사진의 색이나 부분을 수정하는 일은 이미지 편집 작업입니다. 입체 모델을 만들거나 렌더링하려면 별도의 3D 작업 환경이 필요할 수 있습니다. 최종 결과물이 무엇인지 먼저 정하면 익숙한 도구에 모든 작업을 억지로 맞추지 않아도 됩니다

아이콘을 모아서 쓸 때 무엇을 맞추면 좋나요

여러 출처의 아이콘을 섞으면 선 굵기와 모서리 및 시각적인 크기가 달라질 수 있습니다. 가능하면 한 계열에서 선택하고 같은 표시 크기에서 균형을 비교하세요. 아이콘만으로 뜻이 분명하지 않다면 짧은 글자 설명을 함께 두는 것이 좋습니다. 내려받을 때는 필요한 파일 형식과 해당 아이콘의 사용 조건을 확인하세요

사진이나 색상만으로 디자인을 고르면 어떤 문제가 있나요

보기 좋은 이미지라도 글자가 올라갔을 때 잘 읽히지 않을 수 있습니다. 실제 제목과 본문을 배치해 명도 차이와 여백을 확인하세요. 색으로만 상태를 표현하면 차이를 구분하기 어려운 사용자가 있을 수 있으므로 문구나 모양도 함께 사용하는 편이 좋습니다. 작은 화면과 확대 화면에서도 필요한 정보가 사라지지 않는지 살펴보세요

이 분야를 더 편하게 이용하는 법

웹에 올릴 이미지 크기와 형식 고르기

이용 가이드 읽기

문서와 웹사이트에 사용할 글꼴 비교하기

이용 가이드 읽기

디자인 시안을 다른 사람에게 전달하는 법

이용 가이드 읽기