Bitmap Project Phase1

Bitmap Project는 하드웨어 의존성이 높은 프로젝트입니다. 하드웨어 의존성이 높은 프로젝트에서의 고려사항등을 공유하고자 합니다.

칩 성능

하드웨어를 기반으로 하는 프로젝트의 경우 MCU(Micro Controller Unit)와 같은 IC 칩의 퍼포먼스 확인을 우선합니다. 칩의 퍼포먼스에 따라서 사용할 수 있는 레이어 수와 블렌딩 그리고 그래픽 좌표를 정의합니다. 퍼포먼스가 낮은 칩의 경우 x,y 좌표를 픽셀 단위로 사용하는 것이 아닌 byte와 같이 데이터 용량을 기준으로 사용하기도 합니다. 이러한 칩의 특성으로 고려해 이미지를 배치하고 그릴 수 있게 설계해야 합니다.

폰트

폰트는 제품의 인상, 사용성, 브랜드 신뢰도에 직접적인 영향을 주는 핵심 요소입니다. 제품에 따라 폰트 파일을 임베딩하거나 웹의 경우 웹폰트를 사용합니다. Chip에 따라 저사양 MCU나 디스플레이 장치에서는 벡터(Vector) 렌더링이 부담되기 때문에 Bitmap 폰트를 사용하거나 폰트 파일 없이 BMP 이미지를 사용합니다.

안티앨리어싱

안티앨리어싱은 픽셀 경계의 들쭉날쭉한 부분을 부드러운 색상으로 표현하여 시각적으로 매끄럽게 보이도록 하는 기술입니다. 예를 들어, 검은색 배경에 동일한 굵기와 밝기의 여러 흰색 선을 표현할 때, 직교 형태가 아닌 선들은 미세한 회색으로 혼합되어 사람이 인지하기에 동일한 밝기와 두께의 선으로 인식되도록 합니다.

1. Vector: 선의 위치를 부동 소수점으로 정의, GPU가 화면 해상도에 맞춰 최적화된 sub-pixel blending을 적용합니다.
2. Bitmap Anti-Aliasing: 비트맵 선을 고정된 픽셀 격자에 회색으로 혼합하여 선의 두께를 표현합니다.
3. Bitmap Aliasing: 비트맵 선이 고정된 픽셀 격자에서 계단 현상(Jaggies)을 보입니다.

도트 작업하기

도구 정하기

웹 엔진 기반의 Figma는 안티앨리어싱 해제 기능을 제공하지 않습니다. 비트맵 편집 프로그램인 포토샵에서는 벡터 폰트의 안티엘리어싱을 해제할 수 있습니다.

벡터 폰트가 비트맵으로 변환될 때, 작은 글자 크기의 경우 벡터 폰트에 정의된 힌팅 정보에 따라 픽셀 그리드에 맞춰지지만, 이는 비트맵 환경에서의 최적화된 표현과는 다릅니다.

포토샵에서 12x12 픽셀 공간에 12pt 벡터 폰트를 4가지 굵기로 적용하고 안티앨리어싱 옵션인 "Font smoothing"을 "None"으로 설정한 결과입니다.

획이 사라지거나 의도와 다른 굵기로 표현되는 것을 확인할 수 있습니다. 이러한 점을 고려하여 UI/UX 설계 및 GUI 개발 효율성을 높이기 위해 Figma를 사용하여 개발한 후, 최종적으로 GUI Assets 파일 포맷을 변경하는 방식으로 결정했습니다.

디자인 시스템

컴포넌트, 스타일 가이드, 아이콘, 색상, 타이포그래피 등을 포함하여 재사용 가능한 UI 자산의 집합을 체계화합니다.Atomic design 형태로 화면 유형을 만들어 화면 유형을 컴포넌트로 관리하며 설계와 GUI를 통합해 효율성을 높입니다. 폴더와 파일명 구조화(Asset Management Structure)해 개발팀과의 자원구조를 일원화합니다.

도트작업

자동화(Batch)를 사용해 전처리 작업을 합니다. 비트맵 전환 시 획이 뭉치거나 사라지는 현상을 최소화하고 최종 산출과 유사한 형태의 도트 작업 이미지를 준비합니다.

최종 결과물은 직교 형태를 유지하고 획의 굵기를 일정하게 제작하여, 글꼴 본래의 형태보다는 기하학적인 특징을 강조합니다. 포토샵에서 펜 도구를 사용해 획의 굵기가 일정한 직교 형태로 도트 작업을 합니다. 포토샵에서 도트 작업 창을 복제한 프리뷰로 실제 화면에서의 느낌을 확인하면서 도트 작업을 합니다.

마치며

유연하게 설계된 디자인 시스템을 사용해 효율적인 관리로 인터랙션 설계, GUI, Prototype을 개발 관리할 수 있었습니다. 실물 디스플레이 크기로 종이에 출력해서 정보량을 확인하고 Chip의 성능 확인과 풍부한 경험을 높이기 위해 Figma variable을 사용해 슬라이딩 애니메이션을 Prototype을 만들었으나, 하지만 아쉽게도 구현하지는 못했습니다. 도트 작업에 앞서 비트맵 폰트 제안과 도트 작업 시 어려움 등을 공유해 공감대를 만들었습니다.