사진의 가장자리는 균일하지 않다. 밝은 부분은 배경에 섞이고 어두운 부분은 강한 경계가 된다. 아바타를 겹치면 이미지 사이의 접점도 생긴다.
나는 개별 이미지의 마감을 먼저 다듬고 그룹의 폭, 분리 방식과 진입점을 정한다. 바깥 링과 안쪽 윤곽은 서로 다른 일을 맡는다.
이 글은 원문을 재구성하고 확장했다. 표본의 수치는 해당 조건의 값이며 모든 화면에 적용하는 규격이 아니다. 시리즈의 맥락과 도구는 다음 글에서 확인할 수 있다: 총론.
이미지와 경계
이미지 안쪽에 연한 윤곽 얹기
이미지 바깥 가장자리의 내용은 한쪽이 거의 흰색이고 다른 쪽은 아주 어두울 수 있다. 패널에 넣으면 밝은 부분은 바탕색과 섞이고 어두운 부분은 스스로 강한 경계를 만든다. 나는 안쪽 윤곽(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, 네 명이면 네 개를 보여 준다. 사진을 불러오지 못해도 이니셜이나 기본 도형이 같은 크기를 차지한다. 숫자와 이미지 때문에 원이 갑자기 커져서는 안 된다.
전체 명단이 필요할 때는 아바타 그룹 전체로 참여자 목록을 열고, 여유 있는 곳에서 이름을 읽게 한다. 겹친 작은 원마다 클릭 영역을 넓히면 서로 덮기 쉽다. 목록에서 조작 행을 분리하면 키보드로 열고 닫거나 초점을 되돌리는 동작도 명확해진다. 조작 시편에서 표면, 배치, 인원, 이미지 실패 상태를 바꿔 바깥 고리와 안쪽 선의 역할을 각각 살펴볼 수 있다.
안쪽 선은 사진을 마감하고, 바깥 고리는 이웃을 나누며, 초과 인원 입구는 전체 목록으로 이어진다. 세 역할을 나누어 확인하면 인원이나 배경이 달라져도 식별과 조작에 필요한 공간을 지킬 수 있다.