컴포넌트가 좋다는 설명 대신, 실제로 눌러 볼 수 있게 했어요

목록을 크게 만들기보다 같은 요소를 확인하기

이번에는 실제 공개 화면에서 쓰는 소수의 요소부터 보여주기로 했어요. 행동을 이어주는 링크, 필요한 안내, 본문 속 연결을 카탈로그와 문서에서 함께 사용했어요. 예시 화면에만 있는 모양이 아니라 다른 공개 페이지에서도 같은 모습과 동작으로 읽히게 하려는 선택이었어요.

이렇게 하면 방문자는 컴포넌트의 이름을 외우기 전에 하는 일을 볼 수 있어요. 카탈로그에서 본 다음 행동이 문서에서도 같은 방식으로 나타나고, 안내문이 어느 부분에 놓이는지도 비교할 수 있어요. 원칙을 설명한 문장과 실제 쓰는 장면 사이에 한 단계가 생긴 거예요.

탐색도 좁혔어요. 개요와 현재 볼 수 있는 요소, 사용 장면을 중심으로 이동하게 했어요. 제공하지 않는 기능까지 넓은 메뉴에 담으면 방문자는 없는 내용을 찾다가 돌아와야 해요. 현재 확인 가능한 범위를 먼저 읽고 실제 문서로 이어지도록 했어요.

설명과 실제 예시가 따로 있으면 나중에 둘 중 하나만 바뀔 수도 있어요. 문서에서는 한 가지 동작을 말하는데 예시에서는 다른 곳으로 이동하면 방문자는 무엇을 기준으로 읽어야 할지 알기 어려워요. 이번에는 공개 문서에서 사용하는 요소를 그대로 예시에서도 읽을 수 있도록 했어요.

확인할 상태를 무리하게 늘리지 않은 이유도 있었어요. 목록이 길어질수록 준비한 제품처럼 보일 수 있지만, 설치할 방법이나 실제 사용 범위가 아직 없으면 기대를 더 크게 만들어요. 소수의 연결이 실제로 동작하는지 확인하는 편이 당시 제공 범위를 더 정확하게 설명했어요.

이는 전체 카탈로그를 만들 필요가 없다는 결론은 아니에요. 다음에 요소를 늘릴 때도 같은 질문으로 이어가려는 기준이에요. 그 예시가 어디에서 실제로 쓰이는지, 공개 화면과 문서가 같은 동작을 설명하는지 확인할 수 있어야 목록의 크기에도 의미가 생겨요.

실제 연결이 있는 예시인지 확인했어요

모양이 보이는 것과 눌렀을 때 연결되는 것은 달라요. 예시 링크가 같은 목적지로 중복해서 나오는지, 실제 문서로 갈 수 있는지, 카탈로그 안의 선택과 현재 위치가 맞는지를 확인했어요. 준비된 예가 아무 곳으로도 이어지지 않는 장식이 되지 않게 하려는 확인이었어요.

큰 화면과 작은 화면에서 페이지의 읽는 순서도 살폈어요. 참고한 화면의 넓은 목록을 그대로 채우기보다 우리에게 있는 자료를 같은 크기에서 비교했어요. 헤더는 기존 구조를 유지했으므로 참고 화면과 다른 점도 있었어요. 닮은 정도보다 공개한 내용과 탐색의 관계가 우선이었어요.

당시 카탈로그는 소수의 컴포넌트만 담았어요. 공개 패키지와 설치 안내, 전체 상태 모음까지 제공한 것은 아니었어요. 그 빈칸을 예시 명령이나 임시 이름으로 채우지 않았어요. 화면에 준비된 것보다 더 많은 기능을 사용할 수 있다는 기대를 만들 필요가 없었어요.

이번 수정은 디자인 시스템의 크기를 보여주는 일보다 설명을 확인할 수 있는 작은 장면을 만드는 일이었어요. 방문자는 좋다는 문장을 읽는 데서 멈추지 않고 실제 모습과 연결을 볼 수 있게 됐어요. 더 많은 요소를 공개하는 다음 단계도, 목록을 채울 수 있는가보다 실제 사용 장면이 있는가에서 시작해야 했어요.