하단 버튼을 문구에 맞게 고쳐 달라는 요청을 처음 읽으면 버튼마다 알맞은 너비를 주면 될 것처럼 보인다. 그러나 이어진 정정은 두 버튼을 같은 크기로 하라는 것이었다. 또 특정 디자인 밖에서도 재사용해야 했다. 내가 공통으로 만들 것은 고객의 연락처 자체가 아니라, 서로 길이가 다른 두 문구를 담는 틀이었다.
원래 공통 모듈에는 더 긴 문구를 기준으로 두 버튼의 너비와 높이를 맞추는 CSS와 기존 요소에 클래스를 붙이는 작은 연결 코드가 남아 있다. 화면의 공통 규칙과 사이트의 실제 연락값을 분리한 구조다. 이 구분 덕분에 버튼 모양을 정리하는 작업이 다른 고객의 링크를 가져오는 작업으로 번지지 않게 할 수 있었다.
문구에 맞춘다는 요구를 같은 크기라는 조건과 함께 읽는다
짧은 문구는 작은 버튼, 긴 문구는 큰 버튼이 되는 방식도 내용에 맞춘 구현이다. 하지만 이 작업의 요구는 같은 틀이었다. 그래서 각각의 문자열 길이로 폭을 계산하는 대신 두 열이 같은 공간을 나누고 같은 높이로 늘어나게 했다. 길이가 다른 문구가 나란히 있어도 조작 영역의 기준은 같게 두었다.
기록의 CSS는 내용에 맞춘 그룹 너비에 화면 제한을 함께 둔다. 작은 화면에서는 긴 이메일처럼 끊어지기 어려운 문자열도 줄을 바꿀 수 있게 한다. 한 줄을 고집하면서 화면 밖으로 밀어내면 방문자는 두 번째 행동을 놓칠 수 있다. 같은 크기를 만드는 일에는 최대 너비와 줄바꿈이라는 조건도 들어간다.
같은 틀이 실제 링크를 만들어 내지는 않는다
연결 코드는 원래의 a와 button 요소를 읽고 필요한 클래스를 붙인다. 링크 주소나 클릭 함수를 바꾸는 코드는 없다. 기존 색상도 연락처 모듈의 공통 값으로 덮지 않는다. 전화, 이메일, 등록처럼 버튼이 연결하는 행동은 해당 사이트의 설정과 기존 기능이 맡고, 이 모듈은 그 행동을 담는 표시 영역을 맡는다.
버튼이 하나뿐이면 두 번째 연락처를 만들어 채우지 않는다. 비어 있는 열도 예약하지 않는 구조다. 없는 접수 기능을 모양을 맞추기 위해 새로 추가하면 고객은 작동하는 통로라고 생각할 수 있다. 공통 모듈의 완성도는 두 개를 무조건 보이는 데 있지 않고, 실제로 있는 행동을 일관된 기준으로 보여 주는 데 있었다.
기존 스크롤 모션과 버튼 크기의 주인을 나눈다
원래 하단 바에는 스크롤할 때 움직이는 별도의 모션이 있었다. 공통 CSS가 위치를 맞추려고 transform을 다시 쓰면 그 움직임을 덮어쓸 수 있다. 기록의 모듈은 모션을 기존 코드가 관리한다는 표시가 있으면 해당 위치 변환을 건드리지 않는 갈래를 두었다. 같은 요소에서도 크기와 움직임은 다른 책임이다.
나는 이 기록을 바탕으로 새 공개 예제를 만들면서 버튼 크기만 다루는 독립 CSS를 작성했다. 고정 위치와 숨김 모션, 실제 연락처는 넣지 않았다. 독자가 자신의 기존 행동을 유지한 채 같은 크기의 틀을 시험할 수 있게 하기 위해서다. 이 예제의 동작을 원래 모든 고객 사이트의 재검수 결과로 바꾸어 설명하지 않는다.
설치와 배포와 실화면 확인은 다른 단계다
원래 설치기는 명시한 정적 폴더에 두 파일을 넣는 작업이다. 그 뒤 템플릿에 연결하고 정본을 봉인하는 순서가 기록되어 있다. 당시 실행 결과에는 공통 파일 연결과 템플릿 코드 검사가 남지만, 사용자에게 맡긴 화면 검수가 자동으로 완료됐다는 증거는 아니다. 파일이 복사된 것과 두 버튼이 실제로 맞게 보이는 것은 따로 확인한다.
새 예제에서는 짧은 문구와 긴 문구, 좁은 표시 영역, 한 개만 남는 상태를 비교할 수 있다. 원래 링크와 클릭 함수가 같은 요소에 남는지도 확인 대상이다. 크기를 검사하는 읽기 전용 함수는 너비와 높이의 수치를 알려 주지만 색상 대비, 접수 성공과 메시지 전달까지 판단하지 않는다. 각 확인이 답하는 질문을 구별해 남긴다.
한 번 고칠 공통 규칙과 매번 확인할 사이트 조건
공통으로 조절할 값은 버튼 간격과 안쪽 여백, 글자 크기, 최소 조작 높이 같은 표시 규칙이다. 실제 문구와 목적지, 사용할 버튼 수와 색상은 사이트마다 달라진다. 오래된 고정 너비나 줄바꿈 금지 규칙이 더 강하게 남아 있다면 통합하는 쪽에서 정리해야 한다. 파일을 붙였다는 이유만으로 기존 스타일 충돌이 사라지지는 않는다.
의뢰자는 버튼이 같은 크기인지뿐 아니라 어느 행동을 남길지, 긴 연락값을 어떻게 읽게 할지 정할 수 있다. 제작자는 그 선택을 공통 모양과 개별 값의 경계에 기록한다. 이 작업에서 얻은 방법은 연락 바를 통째로 복제하는 일이 아니라, 반복해서 고칠 틀을 분리하고 실제 행동은 원래 주인에게 남기는 일이었다.