카드와 버튼, 차트가 모두 갖춰진 인터페이스도 자세히 보면 신경 쓰이는 부분이 남아 있다. 패널 테두리가 지나치게 무겁거나, 이미지 가장자리가 갑자기 사라지거나, 숫자가 바뀔 때 옆 글자를 밀어내거나, 메뉴가 이전 동작을 계속 재생하는 식이다. 여기서 말하는 ‘AI 같은 인상’은 아직 다듬지 못한 이런 관계에 있다.
나는 깨끗한 흰색을 바탕으로, 가까이 봐야 층이 드러나는 절제된 인터페이스를 좋아한다. 윤곽은 알아볼 수 있고 그림자는 표면에 가깝게 붙어 있어야 한다. 글자와 아이콘, 여백에는 공통된 리듬이 있고, 조작 피드백도 손의 움직임을 따라와야 한다. 이 선택들이 함께 성립할 때 섬세함이 생긴다.
아래에서는 직접 만든 예시로 하나씩 나누어 본다. 회백색은 이 시편의 배색이며 수치도 이번 선택에 한정된다. 도해의 치수는 원래 CSS 픽셀을 기준으로 하고 부분 확대에는 배율을 따로 적었다. 이미지를 누르면 전체 출력을 볼 수 있지만, 선과 글자의 무게를 판단할 때는 실제 표시 크기로 돌아와야 한다.
경계와 두께
같은 윤곽을 더 가늘게
내가 가장 신경 쓰는 것은 패널이 어디서 시작하는지 보이면서도 가장자리가 딱딱한 틀처럼 느껴지지 않는 것이다. 이 시편은 바깥 윤곽을 ring에 맡긴다. 흐림이 없는 바깥 그림자로 표면을 한 바퀴 두르고, 깊이는 다른 그림자로 표현한다. 또렷한 가장자리는 유지하면서 폭과 불투명도를 따로 조정할 수 있고 레이아웃 공간도 차지하지 않는다.
여기서 hairline은 같은 ring을 가늘게 만드는 것을 뜻한다. 첫 도해는 확산값(spread)만 1 px에서 0.5 px로 바꾼다. 어두운 색, 12% 불투명도, 바탕색과 크기는 그대로 두고 깊이 그림자도 넣지 않았다. 폭이 절반으로 줄어들면 윤곽의 시각적 무게도 줄어든다.
가늘게 만든 뒤, 선명도를 결정하기
선을 가늘게 만든 다음에는 불투명도를 조금 높여 식별성을 보완할 수 있다. 두 번째 도해는 0.5 px를 고정하고 12%와 18%만 비교한다. 형태와 채움, 그림자는 같다. 오른쪽은 더 선명하면서도 가는 윤곽의 성격을 유지한다.
나는 0.5 px, 12%의 무채색 어두운 ring을 이 불투명 표면의 출발점으로 삼았다. 18%는 불투명도 보정의 효과를 살펴보기 위한 값이며 모든 요소에 그대로 쓰지는 않는다. 큰 패널, 흰 선택 면, 유리가 가로지르는 배경은 서로 다르므로 필요한 경계의 강도도 다르다. 선폭을 절반으로 줄였다고 불투명도에 일정한 배수를 곱해야 하는 것은 아니다.
0.5 px도 어디에 쓰는지에 따라 다르다. border-width는 장치 픽셀에 맞춰 정렬되지만, box-shadow의 소수 spread는 픽셀을 부분적으로 덮어 표현될 수 있다. 둘을 같은 그리기 방식으로 보면 안 된다. 이 시편의 WebKit 1× 검사에서는 0.25 px ring의 직선 가장자리가 식별할 수 있게 그려지지 않았고, 0.5 px도 좌우 무게가 고르지 않은 경우가 있었다. 가늘게 다듬은 뒤에도 원래 크기와 픽셀 밀도, 확대·축소를 함께 확인해야 한다.
윤곽을 따라 명암 나누기
윤곽의 무게는 형태를 따라 달라질 수도 있다. 앞의 ring은 전체 둘레가 같은 농도였지만, 여기서는 가장자리 대비(edge contrast)를 형태에 따라 분배한다. 어떤 부분은 조금 물러나고 다른 부분은 또렷하게 마무리된다. 나는 이 차이를 좁은 가장자리에 남겨 두고 중앙 표면은 조용하게 유지하는 편을 좋아한다.
이 시편의 경계 폭은 0.5 px로 고정했다. 왼쪽은 전체 둘레에 12% 불투명도를 쓰고, 오른쪽은 6%에서 18% 사이로 분포시켰다. 표면 채움과 크기, 뒤쪽 도형은 같다. 밝은 면에는 어두운 윤곽을 써서 왼쪽 위는 연하게, 오른쪽 아래는 조금 무겁게 만들었다. 변화는 직선과 모서리를 함께 따라간다.
여기서는 마스크 합성(mask compositing)으로 중앙을 비우고 바깥의 좁은 고리만 남겨 그 안에 그라데이션을 그렸다. 앞의 ring처럼 외형을 정하는 역할은 유지하고, 명암 분포는 그라데이션에 맡긴 것이다. 뒤쪽의 비스듬한 회색 띠는 표면을 똑같이 비쳐 보인다. 가장자리를 바꾸면서 카드 전체까지 어둡게 덮지는 않았다.
어두운 시편에는 밝은 윤곽을 쓰고 명암의 방향도 뒤집었다. 왼쪽 위는 조금 밝고 오른쪽 아래로 갈수록 연해져 빛이 들어오는 방향을 일관되게 암시한다. 나는 바탕면과 함께 보면서 형태를 설명할 정도로만 윤곽을 남기고, 전체 둘레에 같은 무게의 밝은 선을 쌓지 않는다.
고정된 콘텐츠 면은 균일하고 연한 ring으로도 외형을 안정시킬 수 있다. 방향에 따른 변화는 재질을 암시할 필요가 있는 소수의 떠 있는 면에 더 어울린다. 모든 카드가 같은 모서리를 강조하면 가장자리가 콘텐츠의 주의를 빼앗는다.
윤곽은 형태를, 부드러운 그림자는 거리를
Ring이 외형을 잡았으니 깊이 그림자(depth shadow)는 조금 물러나도 된다. 여기에는 두 층을 더했다. 가까운 그림자는 1 px 이동, 2 px 흐림에 −1 px spread로 폭을 좁혔다. 먼 그림자는 3 px 이동, 8 px 흐림에 −3 px spread로 범위를 제한했다. 불투명도는 각각 4%와 2%다.
가까운 그림자는 접촉을 설명하고, 먼 그림자는 어두운 부분을 바탕면으로 부드럽게 돌려보낸다. 이 감쇠(falloff)는 ring과 함께 봐야 한다. 아래쪽이 짙은 선으로 뭉치면 대개 가까운 그림자의 무게나 범위를 조정해야 한다. 전체 둘레가 회색으로 흐려지면 먼 그림자가 너무 넓게 퍼졌는지 확인한다. 나는 표면이 바탕에 붙어 있고 가장자리 바깥은 금방 깨끗해지는 편을 선호한다.
불투명 표면에는 안쪽 빛(inner light)을 기본으로 두르지 않는다. 흰색에 가까운 패널은 이미 충분히 밝고, 조금 어두운 트랙에 흰빛까지 얹으면 딱딱한 밝은 선이 드러나기 쉽다. 먼저 윤곽과 바탕색, 그림자로 층을 만들고, 밝은 가장자리는 재질을 설명해야 하는 부분에 남긴다.
어두운 표면은 먼저 명도로 구분하기
어두운 면으로 바꿀 때는 먼저 위쪽 표면을 조금 밝힌다. 도해의 바탕면은 #171717, 카드는 #242424이며 여기에 0.5 px, 12%의 흰 ring을 더했다. 검은 깊이 그림자는 아래에 따로 놓았다. 표면의 차이가 먼저 카드를 드러내고 가는 선이 윤곽을 보완한다.
표면과 감싸는 구조
비슷한 흰색에도 각자의 역할을
표면의 위계(surface hierarchy)는 명도의 역할부터 나눌 수 있다. 이 밝은 시편의 캔버스는 #F7F7F7, 외곽 셸은 거의 중성인 #F1F1F2, 콘텐츠 면은 #FCFCFC이며 흰색은 일부 조작 면에 남겨 두었다. 색 편향은 아주 적다. 차이는 드러나는 면적과 함께 봐야 한다. 좁은 회색 고리와 넓은 회색 바탕의 무게는 같지 않다.
글자는 여전히 주종이 명확해야 한다. 이름과 숫자, 현재 선택 항목은 어두운 색으로 안정시키고 설명은 한 단계 뒤로 물린다. 나는 표면이 조용하길 바라지만, 정보를 읽을 때까지 눈을 가늘게 뜨고 찾게 하고 싶지는 않다.
그라데이션을 평면으로 부드럽게 되돌리기
표면에 약간의 명암 변화가 필요할 때는 그라데이션이 어떻게 시작하고 바탕색으로 돌아가는지 본다. 이징 그라데이션(eased gradient)은 공간 안에서 변화하는 속도를 조정한다. 평면에 가까워질 때는 천천히, 중간에서는 더 빠르게 변해 시작과 끝을 쉽게 알아차리지 못하게 한다. 화면 자체는 정지해 있다.
이 비교는 같은 무채색을 사용한다. 최대 불투명도는 모두 16%, 변화 범위는 패널의 20%에서 80% 사이다. 왼쪽은 일정한 속도로 0까지 줄이고 오른쪽은 이징 분포를 쓴다. 양쪽 모두 색상 정지점 33개를 쓰며 불투명도의 적분값도 같다. 명암의 분포만 바꾸었고 전체 무게까지 함께 줄이지는 않았다.
도해의 선형 그라데이션은 평면에 닿는 순간 변화 속도가 갑자기 멈춘다. 이징 분포는 그 근처에서 점차 느려진다. 어두운 비교에서도 같은 관계를 유지해 약한 밝기가 짙은 회색으로 천천히 돌아가게 했다.
여기서는 중간 색상 정지점으로 매끄러운 함수를 근사했다. 실제 CSS는 여전히 인접한 정지점 사이를 선형 보간한다. 16%는 차이를 관찰하기 위한 시편의 값이다. 깨끗한 흰 인터페이스에 넣을 때는 면적에 따라 무게를 낮추고, 좁은 마스크의 페이드나 재질 전환에 한정한다. 이 비교는 감쇠가 평면에 닿는 부분을 설명하며, 정지점 수를 모든 밴딩 문제의 해결책으로 보지는 않는다.
좁은 틈과 콘텐츠 여백은 따로 재기
감싸는 구조에는 두 종류의 안쪽 여백(padding)이 있다. 외곽 셸에서 패널까지의 좁은 틈과 패널에서 콘텐츠까지의 여백이다. 여기서는 각각 8 px와 24 px다. 앞의 값은 이음새의 긴밀함을 정하고, 뒤의 값은 제목과 정보 행을 여유 있게 배치한다.
바깥 ring은 레이아웃 공간을 차지하지 않는다. 패널은 그대로 8 px의 안쪽 여백에 놓이고, 0.5 px ring이 바깥쪽 틈으로 그려진다. 따라서 직선 부분에 실제로 드러나는 셸은 약 7.5 px다. 콘텐츠의 24 px는 패널 표면 경계에서 재며, 물리적 테두리 한 겹을 다시 빼지 않는다.
모서리도 같은 간격을 따라가기
이 등간격 예시의 중첩 반지름(nested radii)은 R24, 8 px 안쪽 여백, R16이다. 두 표면의 원 중심이 같아 틈이 모서리를 돌아갈 때도 연속성을 유지한다. 이 뺄셈 관계는 도해처럼 등간격이고 물리적 테두리가 없는 기하에 한정된다. 모든 컨테이너의 고정 공식으로 삼을 필요는 없다.
패널이 바깥으로 0.5 px ring을 그리면 그려진 바깥 가장자리의 반지름은 R16.5다. 표면 자체는 여전히 R16이며 콘텐츠도 원래 표면 경계에서 시작한다. 레이아웃을 재는지 실제 그려지는 범위를 보는지, 어느 가장자리를 다루는지 구분해야 한다.
휘어지는 정도도 직선과 이어지게
반지름은 모서리가 차지하는 크기를 정한다. 접점에는 다른 문제도 있다. 직선에서 곡선으로 들어갈 때 휘어지는 정도가 어떻게 바뀌는가다. 원호는 직선과 접선 연속성(tangent continuity)을 이룰 수 있어 방향은 이어진다. 하지만 직선의 곡률은 0이고 원호에 들어서는 순간 일정한 휘어짐으로 바뀐다.
곡률 연속성(curvature continuity)은 이 변화까지 다룬다. 오른쪽의 3차 베지어 곡선은 접점에서 곡률을 0으로 내려 휘어지는 정도가 직선으로 이어지게 한다. 양쪽의 외접 크기, 채움, 선과 32 px 모서리 범위는 고정했다. 관찰하는 것은 모서리 곡선뿐이다.
양쪽에서 32 px가 뜻하는 바는 다르다. 왼쪽은 R32 원호지만 오른쪽은 곡선이 어디서 휘기 시작하는지만 나타낸다. 하나의 원 중심이나 고정 반지름은 없다. 오른쪽은 이 시편의 단순화된 베지어 모델이다. 중첩 컨테이너에 쓸 때는 안팎 곡선 사이의 좁은 틈을 다시 확인해야 하며, 원 반지름의 뺄셈 관계를 그대로 쓸 수 없다.
나는 전체 윤곽 안에서 다시 본다. 오른쪽은 접점이 연속적이지만 휘어짐이 더 집중돼 원호보다 각진 모양이다. 어울리는지는 비례와 여백, 이웃 요소를 함께 봐야 한다. 여기서는 접점을 해체해 설명하는 데 쓰고, 마지막 전체 작업 공간에는 원래의 원호 모서리를 유지했다.
이미지 안쪽 가장자리 마감
이미지 안쪽에 연한 윤곽 얹기
이미지 바깥 가장자리의 내용은 한쪽이 거의 흰색이고 다른 쪽은 아주 어두울 수 있다. 패널에 넣으면 밝은 부분은 바탕색과 섞이고 어두운 부분은 스스로 강한 경계를 만든다. 나는 안쪽 윤곽(inset outline)으로 무게가 다른 이 가장자리들을 조금 정돈하는 것을 좋아한다.
여기서는 이미지 안쪽에 1 px, 불투명도 10%의 순수한 검은 윤곽을 덮었다. 크기와 크롭, 모서리는 바꾸지 않았다. 윤곽이 원래 픽셀과 겹치므로 밝은 부분에서 변화가 더 쉽게 보인다. 이 선은 이미지의 마감을 설명하고, 바깥에는 컨테이너를 별도로 둘 수 있다.
어두운 컨테이너에서는 폭과 불투명도가 같은 순수한 흰 윤곽으로 바꿔 가장자리의 어두운 부분에 아주 얇은 경계를 만들었다. 두 도해는 같은 창작 이미지를 써서 가장자리에 집중할 수 있게 했다.
이미지 자체는 R12이고 그 둘레의 8 px 바탕은 R20 컨테이너가 감싼다. 안쪽 윤곽은 이미 크롭된 이미지 안에 그려져 추가 공간을 차지하지 않는다. 바깥 컨테이너의 간격은 원래 레이아웃대로 계산한다. 이 처리는 완전한 직사각형 경계가 있는 사진과 스크린샷, 그림에 더 어울린다. 투명 로고나 불규칙한 일러스트에는 원래 윤곽이 숨 쉴 공간을 남겨도 좋다.
아바타를 겹치기 전에, 줄어드는 공간부터
여러 참여자를 보여 줄 때는 나란히 놓거나 일부를 겹칠 수 있다. 아바타 그룹(avatar group)은 누가 있는지 설명하고, 아바타 스택(avatar stack)은 겹침으로 전체 폭을 줄인다. 나는 촘촘한 정보 행에서 스택을 사용한다. 각 얼굴을 식별해야 한다면 나란한 배치와 이름에 더 많은 공간을 줄 수 있다.
이 비교에는 직접 만든 가상 인물 사진 세 장을 썼다. 원형 틀은 모두 32 px이며 왼쪽은 이웃 간격 6 px, 오른쪽은 겹침 8 px다. 사진과 크롭, 이미지 안쪽 선, 바깥 분리 고리 2 px를 모두 고정했다. 두 그룹의 시작점과 세로 중심도 각 표시 영역 안에서 같다.
세 개의 레이아웃 폭은 108 px에서 80 px로 줄어든다. 바깥 분리 고리는 레이아웃 공간을 차지하지 않지만 좌우 끝에 각각 2 px씩 더 그려지므로 실제 그려진 범위는 112 px와 84 px다. 이 수치는 같은 크기의 원 세 개와 물리적 테두리가 없는 이 도해의 구성에 한정된다. 컨테이너에 넣을 때도 바깥 고리가 잘리는지 확인해야 한다.
어두운 버전도 같은 배치를 쓰고 가장자리만 놓인 표면에 맞춘다. 이것은 배치를 해체해 보는 개념 비교다. 마지막 작업 공간은 원래부터 스택을 사용했으며, 예시를 위해 행 전체를 키우지 않고 22 px 아바타와 5 px 겹침을 유지했다.
바깥 분리와 이미지 안쪽 선의 역할 나누기
겹친 사진 두 장은 경계에서 하나로 붙어 보이기 쉽다. 바깥 분리 고리(separation ring)는 놓인 표면과 같은 불투명한 색으로 겹치는 부분을 가려 식별할 수 있는 틈을 남긴다. 아바타를 띄우기 위한 장치는 아니다. 나는 이 틈이 바탕면으로 스며들면서 겹친 곳에서 각자의 원호가 보이도록 한다.
그래서 분리 고리도 상태를 따라 바뀌어야 한다. 흰 카드와 선택된 데이터 행, 어두운 표면의 바탕색은 다르다. 고정된 흰 고리를 어두운 면에 놓으면 배경에 속하지 않는 밝은 선이 생긴다. 투명하거나 무늬가 있는 배경에서는 단색으로 아래 내용을 복원할 수 없다. 실제 마스크로 비우거나 겹치지 않게 배치해야 한다. 이 조작 시편은 무늬가 있는 바탕에서 나란히 배치한다.
사진 안쪽에는 앞서 본 안쪽 윤곽을 이어 이미지 안쪽 선(image inner stroke)으로 사진 자체를 마감한다. 아래 양쪽은 스택과 바깥 고리를 같게 두었다. 밝은 버전에서는 1 px, 10% 순수 검은 안쪽 선의 유무만 비교한다. 가는 선을 크롭된 사진 위에 덮었으며, 이미지를 줄이거나 바깥 고리를 두껍게 만들지 않았다.
어두운 안쪽 선 비교에서는 1 px, 8% 흰색을 썼다. 원형 컨테이너의 장식 레이어를 사진 앞에 덮는 방식이다. 불투명 이미지 뒤에 안쪽 그림자를 바로 넣으면 같은 효과가 보이지 않을 수 있다. 나는 이 선이 가장자리 가까이에서만 느껴지고 중앙 얼굴과 크롭은 그대로인 편을 좋아한다.
사람이 많아지면 쓸 수 있는 입구 남기기
보이는 아바타와 실제 인원도 따로 정해야 한다. 이 프로토타입은 네 자리를 남겨 일곱 명이면 세 개와 +4, 네 명이면 네 개를 보여 준다. 사진을 불러오지 못해도 이니셜이나 기본 도형이 같은 크기를 차지한다. 숫자와 이미지 때문에 원이 갑자기 커져서는 안 된다.
전체 명단이 필요할 때는 아바타 그룹 전체로 참여자 목록을 열고, 여유 있는 곳에서 이름을 읽게 한다. 겹친 작은 원마다 클릭 영역을 넓히면 서로 덮기 쉽다. 목록에서 조작 행을 분리하면 키보드로 열고 닫거나 초점을 되돌리는 동작도 명확해진다. 조작 시편에서 표면, 배치, 인원, 이미지 실패 상태를 바꿔 바깥 고리와 안쪽 선의 역할을 각각 살펴볼 수 있다.
글자, 숫자와 광학 정렬
줄바꿈도 구성에 참여시키기
제목의 마지막 줄에 아주 짧은 단어만 남으면 아래 여백이 한쪽으로 기울기 쉽다. 균형 줄바꿈(balanced wrapping)은 주어진 폭 안에서 글자를 재배치해 각 줄의 무게를 가깝게 만든다. 이 비교는 줄 너비 220 px, 문구, 글자 크기와 자간을 고정하고 줄바꿈 방식만 바꾼다.
짧은 설명은 문제가 조금 다르다. 나는 읽을 때 자연스러운 줄 길이를 유지하면서 마지막 줄이 지나치게 외롭지 않은지 본다. 다듬은 줄바꿈(pretty wrapping)은 브라우저가 줄이 바뀌는 지점을 다시 정해 짧은 꼬리 줄을 줄일 여지를 준다. 도해의 문구와 줄 너비도 완전히 같다.
이 선택들은 실제 문구와 함께 봐야 한다. 제목에는 의미상 멈춤이 있고 짧은 글에도 읽기 좋은 폭이 있다. 영어 단어와 번체 중국어 문장부호는 줄을 나눌 수 있는 조건이 다르며 브라우저 결과도 달라질 수 있다. 나는 컨테이너가 합리적으로 늘고 줄 공간부터 마련하고, 좁은 화면과 긴 번역문을 확인한 뒤 balance나 pretty를 쓸지 결정한다.
숫자가 갱신돼도 각 자리는 안정적으로
타이머가 11:11에서 08:08로 바뀔 때 글리프 폭이 다르면 숫자열 전체의 무게가 달라진다. 고정폭 숫자(tabular figures)는 각 숫자가 같은 폭을 차지하게 한다. 갱신되는 값과 카운터, 훑어봐야 하는 숫자 열에 어울린다.
양쪽 모두 Geist를 쓰고 글자 크기와 내용도 같다. 숫자 기능만 비례폭에서 고정폭으로 바꾸었다. 도해의 작은 표시는 별도의 고정폭 글꼴을 쓰지만 주된 숫자는 같은 글꼴 안에서 비교한다.
자릿수가 늘어날 공간도 미리 마련하기
고정폭 숫자가 각 자리를 안정시켜도 9에서 99, 다시 100으로 늘면 글자 수가 많아진다. 도해는 양쪽 모두 고정폭 숫자를 켰다. 오른쪽은 세 자리 폭을 먼저 확보하고 오른쪽으로 정렬해 뒤의 설명이 같은 자리에서 시작하게 했다.
세 자리 폭은 이 카운터의 예상 범위다. 천 단위 구분 기호나 음수 부호, 더 큰 값이 들어오면 공간을 다시 마련해야 한다. 날짜와 카운트다운, 백분율도 각각 가장 긴 형식이 있다. 나는 숫자가 확보한 범위 안에서 변하고 주변 글자와 조작은 안정적으로 남게 한다.
금액을 소수점에 맞춰 정렬하기
한 열의 금액을 빠르게 비교하려면 표시 정밀도와 숫자 폭, 정렬 방향을 함께 정해야 한다. 이 도해는 음수를 포함하고 소수점 이하 두 자리와 고정폭 숫자를 고정한 뒤 금액의 정렬 방향만 바꾼다. 오른쪽으로 맞추면 소수점과 일의 자리도 같은 선에 놓인다.
단위는 별도의 가벼운 열에 두고 금액과 일정한 거리를 유지한다. 여기서 소수점이 맞는 것은 표시 정밀도가 같기 때문이다. 같은 열에서 소수 자릿수를 섞어야 한다면 정수부와 소수부를 다시 나누어 배치해야 한다. 음수 부호도 숫자 안에 남겨야 하며 정렬을 위해 생략하면 안 된다. 고정폭 숫자는 출발점이다. 실제 글꼴의 커닝도 배열에 영향을 줄 수 있으므로, 나는 설정을 켰는지만 보지 않고 같은 양수와 음수로 확인한다.
중앙에 놓은 뒤, 보이는 형태를 보기
광학적 중앙 정렬(optical centering)은 보이는 형태의 무게를 다룬다. 오른쪽을 가리키는 삼각형은 면적이 왼쪽에 치우쳐 있어 외접 상자를 중앙에 놓아도 왼쪽으로 보일 수 있다. 여기서는 버튼을 고정하고 같은 도형을 오른쪽으로 1 px만 옮겼다. 이 값은 도해의 삼각형에 해당하며 다른 아이콘은 다시 봐야 한다.
글자 상자를 맞춘 뒤, 글자의 높이 보기
텍스트의 레이아웃 범위에는 글꼴이 위아래에 남기는 공간이 포함되며 보이는 글자는 그중 일부만 차지한다. Flex 레이아웃으로 버튼의 중앙에 놓아도 글자가 조금 높거나 낮아 보일 수 있다. 도해는 같은 Save, 같은 글꼴과 줄 높이를 사용한다. 왼쪽은 글자 상자를 유지하고 오른쪽은 대문자 높이와 기준선을 따라 위아래를 다듬은 다음 같은 높이의 버튼에 넣었다.
텍스트 박스 트리밍(text-box trimming)은 이 공간을 글꼴의 경계에 맞춰 다룬다. 도해의 가는 모서리 표시와 중심선은 차이를 보기 위한 것이다. 실제 선택에서는 글자의 어센더와 디센더, 옆 아이콘까지 확인해야 한다. 번체 중국어와 가나, 한글은 각 글꼴의 보이는 글자에 맞춰 다시 판단해야 한다. 영어의 cap/baseline 값으로 모든 언어의 광학 정렬을 대신할 수는 없다. 트리밍을 지원하지 않는 환경에서는 원래의 글자 상자 레이아웃을 유지한다.
아이콘 쪽 여백은 보이는 무게에 맞춰
글자에 화살표를 더하면 화살표 주위의 빈 공간도 묶음 전체의 무게에 영향을 준다. 여기서는 글자와 도형, 사이 간격과 위아래 안쪽 여백을 고정하고 아이콘 쪽 가로 안쪽 여백만 16 px에서 14 px로 줄여 조금 더 긴밀하게 묶었다.
2 px는 이 화살표와 문구의 조정량이다. 채워진 아이콘이나 다른 글꼴을 쓰거나 아이콘을 글자 앞에 놓으면 전체 형태를 다시 봐야 한다. 아이콘이 자기 캔버스 안에서 이미 치우쳤다면 원본 도형을 먼저 바로잡아 버튼에 추가하는 보정을 줄일 수 있다.
작은 아이콘의 선폭은 다시 판단하기
획의 굵기(stroke weight)도 아이콘 크기와 함께 줄이기만 해서는 안 된다. 이 14 px 폴더는 왼쪽에서 24 px 원본의 1.5 px 선을 같은 비율인 0.875 px로 줄였고, 오른쪽에서는 1.25 px로 조정했다. 도형 크기는 그대로 두고 최종 획만 바꾼 것이다.
나는 실제 크기에서 선 끝과 모서리, 내부 여백, 옆 글자를 함께 본다. 이 아이콘에 필요한 무게가 더 복잡한 다른 형태에도 맞는 것은 아니다.
작은 레이블에도 고유한 자간을
모두 대문자인 영어 레이블은 숫자나 제목 가까이에 놓이는 경우가 많다. 글자들이 붙으면 작은 글자가 무거운 한 덩어리로 보일 수 있다. 자간(tracking)을 조금 넓히면 분명한 리듬을 유지하는 데 도움이 된다.
이 시편은 10 px, 굵기 500, 같은 대문자 레이블을 고정하고 자간 0과 0.05 em만 비교한다. 아래 내용과 레이블 사이 간격을 비롯한 나머지는 그대로다.
나는 글자 크기와 굵기, 문구 길이를 함께 본다. 이 대문자 레이블은 약간의 숨 쉴 공간이 어울리지만 번체 중국어의 작은 제목과 일반 본문은 보이는 밀도가 다르다. 역할마다 알맞은 무게가 필요하고 전체 텍스트 위계는 여전히 단순해야 한다.
간격, 요소와 상태
정보를 같은 시작점에 맞추기
간격의 리듬(spacing rhythm)은 반복되는 관계에서 나온다. 도해의 행 높이는 64 px, 아이콘과 글자 사이는 12 px, 패널 안쪽 여백은 24 px다. 이름과 설명, 구분선이 글자 시작점을 공유하고 아이콘은 자기 영역에 남는다. 열 머리글은 내용 묶음 전체의 시작점에 맞춰 열의 범위를 설명한다.
묶음 안은 가깝게, 묶음 사이는 여유 있게
같은 시작점은 내용을 정돈하고 근접성(proximity)은 관계를 드러낸다. 여기서는 두 내비게이션의 글자와 행 높이, 묶음 안의 8 px 간격을 유지하고 묶음 사이만 8 px에서 24 px로 늘렸다. Workspace와 Personal의 구분이 더 쉽게 읽힌다.
24 px는 이 콘텐츠 묶음의 쉼이며 모든 내비게이션에 그대로 넣을 필요는 없다. 작업 공간이 촘촘해도 묶음은 알아볼 수 있어야 한다. 구분선을 넣는다면 콘텐츠의 시작점을 따라 배치한다. 나는 간격으로 관계를 먼저 설명하고 어디에 선이 더 필요한지 결정한다.
트랙과 선택 면을 함께 보기
분할 선택 컨트롤(segmented control)의 트랙은 끊김 없이 유지하고, 흰 선택 면은 자신의 ring과 짧은 그림자로 현재 위치를 가리킨다. 이 시편은 트랙에 아주 연한 안쪽 그림자만 주었다. 흰 면은 앞서 본 윤곽과 두 층의 깊이를 이어 쓰고 안쪽 빛은 더하지 않았다.
트랙은 R14, 안쪽 여백 4 px, 선택 면은 R10이다. 큰 패널과 마찬가지로 4 px는 레이아웃 거리다. 0.5 px ring이 바깥으로 그려지면 직선 부분에 드러나는 회색 바탕은 약 3.5 px다. 나는 부품이 끼워진 느낌을 좋아하지만 선택 면을 높이 띄울 필요는 없다.
같은 조작 묶음에는 이음새 하나만
공유 이음새(shared seam)는 날짜와 화살표를 하나의 외형으로 감싸고 내부에는 1 px 구분선 하나만 둔다. 독립된 두 윤곽이 맞닿는 부분에서 겹쳐 짙어지지 않게 한다. 선은 틀의 위아래에서 각각 8 px 물리고 끝을 조금 둥글게 했다. 조작 영역을 나누는 선이므로 외곽까지 닿을 필요는 없다.
눌러도 내용은 움직이지 않게
지속되는 선택과 짧은 누름 상태(pressed state)는 역할이 다르다. 선택은 현재 위치를, 누름은 지금의 동작을 알려 준다. 도해는 눌렀을 때 바깥 깊이를 연한 안쪽 그림자로 바꾸고 흰색을 #F5F5F5로 조금 낮춘다. Ring과 아이콘, 글자, 요소 전체의 크기는 바꾸지 않는다.
진행 트랙에도 감싸는 구조를
얕게 들어간 트랙(recessed track)은 같은 관계를 작게 줄인다. 높이 6 px, R3의 바깥 트랙에 1 px 안쪽 여백을 두고 높이 4 px, R2의 채움을 넣었다. 75%는 안쪽 여백을 뺀 사용 가능한 너비를 기준으로 계산하며 끝 주변에도 바탕색 한 겹을 남긴다.
여기서는 트랙의 안쪽 위 가장자리에 짧고 어두운 그림자만 남기고 채움의 위 가장자리에는 아주 약한 재질의 밝기를 두었다. 몇 픽셀짜리 부품에 국한된 역할이므로 모든 불투명 패널의 흰 안쪽 빛으로 확장하지 않는다.
작은 아이콘에도 누르기 쉬운 범위를
보이는 아이콘 크기와 클릭 영역(hit area)은 따로 정할 수 있다. 도해의 닫기 기호는 16 × 16 px를 유지하지만 버튼 영역은 44 × 44 px여서 손가락과 포인터가 닿을 공간을 마련한다. 보조 상자는 도해에만 표시한다.
44 px는 이 시편의 선택이다. 조밀한 도구 모음에 넣을 때는 이웃 조작과의 간격과 클릭 영역이 서로 겹치지 않는지도 함께 봐야 한다. 아이콘은 작아도 주위에는 합리적인 조작 공간이 필요하다.
조용한 표면에서도 초점은 드러나게
키보드 초점(keyboard focus)은 지금 조작할 요소를 알려 주므로 알아볼 만큼 분명해야 한다. 양쪽 버튼의 ring과 채움, 크기는 유지하고 오른쪽에는 버튼과 3 px 떨어진 2 px 윤곽을 추가했다. 표면의 가는 선은 계속 형태를 설명하고 초점은 위치를 분명하게 가리킨다.
나는 절제된 표면을 좋아하지만 조작 위치도 한눈에 보이길 바란다. 초점 윤곽은 주위 바탕색과 함께 확인하고 패널의 클리핑과 이웃 컨트롤도 살펴야 한다. 선택과 누름, 초점은 각자 역할이 있으므로 동시에 성립할 수 있다.
동작 피드백
상태가 바뀌면 아이콘도 부드럽게 연결하기
저장에서 저장 완료로 바뀌면 아이콘과 글자가 함께 결과를 알려 준다. 이 교차 페이드(cross-fade)는 같은 칸에 놓인 두 아이콘의 불투명도만 바꾸고 버튼 너비와 글자 위치는 고정한다. 왼쪽은 즉시 교체하고 오른쪽은 150 ms ease-out으로 연결한다. 어느 예시 버튼을 눌러도 양쪽은 같은 상태로 바뀐다.
나는 이런 작은 동작을 가끔 일어나는 상태 변화에 남겨 둔다. 자주 바꾸는 탭이나 각 행의 반복 조작에는 더 직접적인 반응이 필요하다. 글자와 아이콘 자체도 현재 상태를 명확하게 나타내야 한다. 누름 피드백에는 앞의 표면 명암과 그림자를 쓰고 내용은 제자리에 둔다.
동작이 끝나기 전에도 다음 입력 받기
패널이 다 열리기도 전에 손은 닫기를 누를 수 있다. 중단 가능한 전환(interruptible transition)은 현재 위치에서 새 상태로 방향을 바꿔 연속 조작을 더 매끄럽게 만든다. 아래 양쪽의 거리와 200 ms 시간, 이징은 같다. 왼쪽은 매번 지정된 출발점에서 다시 재생하고, 오른쪽은 현재 위치에서 새 도착점으로 이어진다.
진행 중에 빠르게 바꿔 패널이 갑자기 위치를 옮기는지 살펴볼 수 있다. 이 시편은 CSS transition으로 상태를 따른다. 타임라인 애니메이션도 별도의 재생 제어로 중단을 처리할 수 있다. 핵심은 실제 조작이 이어지는지다. 동작을 끄면 상태 글자와 정적인 전후 비교는 그대로 남는다.
등장과 퇴장은 사용 시점에 맞추기
처음 나타날 때는 제목과 설명, 조작을 묶어 읽는 순서를 조금씩 펼칠 수 있다. 나갈 때는 이동과 시간의 무게를 낮추고 다음 콘텐츠에 주의를 넘긴다. 나는 이런 리듬을 잠시 멈춰 볼 만한 순간에 남겨 두고, 일상적인 여닫기와 반복 조작은 직접적으로 유지한다.
동작 줄이기 설정을 켜면 이동은 거두고 상태는 분명하게 남긴다. 두 예시는 모두 조작으로 시작하며 처음 불러올 때는 초기 상태에 멈춰 있다. 읽는 동안 언제 비교할지 직접 정할 수 있다.
재질이 만나는 곳
유리에는 구체적인 자리를
나는 약간의 유리 느낌을 떠 있는 도구 모음에 남겼다. 불투명도 72%의 흰색에 가까운 채움, 10 px 배경 흐림(backdrop blur)에 선명한 전경 글자와 아이콘을 더했다. 도구 모음이 컨테이너의 아래 가장자리를 가로질러야 아래 명암이 비쳐 보인다. 주된 데이터 행을 피해서 놓으면 재질에도 실제 경계가 생긴다.
유리는 0.5 px, 6%의 무채색 어두운 ring으로 윤곽을 잡고 안쪽에는 부드러운 미광만 남긴다. 아래의 연한 그림자 세 층은 접촉부에서 24 px 흐림의 바깥까지 이어져 떠 있는 느낌을 넓게 퍼뜨린다. 투명한 표면은 이미 배경의 명암을 빌리므로 불투명 요소보다 ring을 연하게 하고 짙은 경계를 더하지 않는다.
나는 실제로 가로지르는 배경에서 확인한다. 온통 흰 바탕에서는 윤곽만 남을 수 있고 아래가 너무 복잡하면 글자를 방해할 수 있다. 이 시편은 투과와 흐림만 표현하며 실제 굴절을 흉내 내지는 않는다.
이 방식을 Master Design으로 정리하기
이 글에서 다룬 세부 기준을 AI 편집 도구에 설치할 수 있는 디자인 skill인 Master Design으로 정리했다. 경계와 기하, 이미지, 글자, 간격, 상태, 동작, 재질을 주제별로 불러온다. 각 항목은 눈에 보이는 문제와 처리 원리, 적용 조건, 확인 방법을 설명한다. 저장소에는 직접 만든 도해의 원본과 조작 가능한 예시도 남겨 실제 결과와 비교할 수 있다.
기본적으로 프로젝트의 기존 브랜드와 글꼴, 프레임워크, 밀도를 이어 간다. 이 글처럼 깨끗하고 절제된 처리를 원하면 Aron preferences를 명시하면 된다. 반 픽셀 윤곽과 그림자 값은 여전히 시편의 선택이므로 실제 화면에서 판단해야 한다.
npx skills add master-co/design --skill master-design설치한 뒤에는 도구에 ‘$master-design으로 이 인터페이스를 다듬되 기존 브랜드와 밀도를 유지하고, 영향을 받는 상태를 구현하고 확인해 줘’라고 요청할 수 있다. Skill은 선택과 검증을 작업 흐름에 남긴다. 완성도는 실제 콘텐츠와 조작으로 확인해야 한다.
완성된 인터페이스
마지막으로 하나의 완성된 작업 공간으로 돌아온다. 내가 좋아하는 섬세함은 디테일이 서로 이어지면서도 전체가 깨끗하고 차분하게 남는 것이다.
