프로젝트 준비

서비스 디자인에 대하여

폴더

프로젝트 진행 시 사용하는 폴더 구조입니다. 브랜딩과 디자인 시스템을 적용한 서비스의 경우 작업 파일에 많은 디자이너와 개발자가 접근하게 되기 때문에 동일한 규칙으로 정리해 혼란을 최소화합니다. 각 폴더 내부는 원본(Resources) 재료(Assets) 작업 (.sketch, .psd 등) 결과물 (_export)로 이뤄집니다.

  

Project-Name: 프로젝트 이름

Documentation: 프로젝트에 연관된 모든 종류의 문서 (word,ppt,hwp)

External Works: 프로젝트 내 리소스를 활용한 외부 업무 (마케팅, 홍보, 인쇄용 파일)

Repository-OS: 플랫폼별 디자인 및 코드

Resources: 문서와 디자인에 사용될 수 있는 모든 외부 소스

_assets: 실제 코딩 시 사용하는 디자인 요소

_exports: 페이지 스크린샷 및 이미지

gui: GUI 작업 파일

디바이스

스마트워치, 스마트폰, 타블렛, 노트북, 데스크탑, TV, AI 스피커 등 사용자가 사용하는 제품들은 다양해지고 있습니다. 한정된 스크린에서 표시하는 시각언어 중심의 인터랙션에서 음성 언어 중심의 AI 스피커, 공간성과 깊이가 적용된 VR 인터랙션이 발전하고 있습니다.

단위

스마트폰, 모니터, 티비 등 스크린의 크기나 픽셀 밀도가 같지 않기 때문에 기본 단위는 곱하거나 나누어도 정수가 될 수 있는 짝수를 사용합니다. 짝수 중에서도 8 포인트 그리드 시스템이 널리 쓰이고 있습니다.
iOS의 경우 375, 750 등 8로 나뉘지 않기 때문에 그리드를 완벽하게 적용하긴 어렵습니다.
(2pt나 4pt는 단위가 너무 작아 8pt로 작업하는 것이 효율적이었습니다)

PT, DP, PX

px를 기본 단위로 디자인하면 스크린마다 다른 픽셀 밀도(PPI = 1inch 공간 안에 표시되는 픽셀 수)의 차이로 인해 크기가 작아지는 현상이 있습니다. iOS Android에서는 어떤 화면에서도 같은 크기로 보이도록 pt와 dp 단위를 사용합니다. 그래픽 디자인 툴은 보통 1px = 1pt로 설정되어 따로 설정을 변경할 필요는 없습니다.

스크린 사이즈

시각 인터랙션은 스마트폰과 PC를 중심으로 이뤄집니다. 서비스가 지원할 디바이스 중 가장 작은 스크린을 기준으로 PT,DP 단위로 작업하며 디바이스의 밀도(Density)만큼 곱해져 실제 디바이스에 표시됩니다. 작은 화면을 기준으로 디자인된 파일에서 사용한 에셋이 실제 디바이스에서는 큰 픽셀로 표시되기 때문에 각 밀도에 맞도록 에셋을 크게 만듭니다. 주로 iOS를 기준으로 x1 x2 x3 으로 에셋을 내보내며 안드로이드에서 함께 사용할 수도 있습니다.