스킬 자체의 표현으로
이 스킬은 중세기(mid-century) 스위스 타이포그래피 디자인, 산업용 제조 매뉴얼, 그리고 레트로 퓨처리즘 항공우주/군사 터미널 인터페이스를 결합한 웹 인터페이스를 설계합니다. 엄격한 모듈러 그리드, 극단적인 타이포그래피 스케일 대비, 순수하게 실용적인 색상 팔레트, 그리고 하프톤, CRT 스캔라인, 비트맵 디더링을 포함한 아날로그 열화 현상의 프로그래밍적 시뮬레이션에 대한 완벽한 숙달이 요구됩니다.
목표는 통상적인 소비자용 UI 패턴을 의도적으로 배제하면서, 가공되지 않은 기능성, 기계적 정밀함, 높은 데이터 밀도를 투영하는 디지털 환경을 구축하는 것입니다. 기밀 해제된 청사진처럼 느껴져야 하는 데이터 중심 대시보드, 포트폴리오, 또는 편집형 사이트에 사용됩니다.
산출물
- 엄격한 모듈형 그리드, 극단적인 타이포그래피 스케일 대비, 실용적인 색상 팔레트를 갖춘 웹 인터페이스
작동 방식
- 01하나의 시각적 아키타입을 선택하고 일관되게 유지하십시오
스위스 인더스트리얼 프린트(무거운 산세리프 타이포그래피를 사용하는 고대비 라이트 모드)와 택티컬 텔레메트리 & CRT 터미널(모노스페이스 타이포그래피와 기술적 프레이밍을 사용하는 다크 모드) 중 하나를 선택하십시오.
- 02극단적인 타이포그래피 스케일 대비를 설계하십시오
타이트한 트래킹과 압축된 리딩을 갖춘 플루이드 타이포그래피를 사용하여 매크로 타이포그래피를 대규모로 배치하고, 전부 대문자로 표기하십시오.
- 03하나의 서브스트레이트 팔레트를 일관되게 선택하십시오
탄소 잉크 텍스트가 있는 무광 무산지 문서용지 배경을 사용하는 라이트 모드, 또는 백색 인광 텍스트가 있는 비활성화된 CRT 배경을 사용하는 다크 모드 중 하나를 선택하십시오.
- 04청사진 그리드 아키텍처 위에 구축하십시오
요소들이 그리드 트랙과 교차점에 정확히 고정되는 엄격한 CSS Grid로 레이아웃을 구성하십시오.
- 05아날로그 저하 효과를 적용하십시오
이미지에는 하프톤 및 1비트 디더링, 반복 선형 그래디언트를 통한 CRT 스캔라인을 적용하고, 인터페이스 전반에 통일된 물리적 그레인을 부여하기 위해 기계적 노이즈 필터를 전역적으로 적용하여 물리적 매체의 한계를 시뮬레이션하십시오.