도면 위와 아래에서 같은 평형을 고를 수 있도록 버튼을 두었다. 이후 아래쪽은 눌러도 움직이지 않는다는 지적이 이어졌다. 위의 것을 아래로 그대로 복사하라는 요청에는 눈에 보이는 버튼뿐 아니라 실제 선택 동작도 같아야 한다는 뜻이 있었다. 겉모습을 두 군데에 넣는 것만으로 하나의 기능을 공유한 것은 아니었다.
최종 보완 코드와 앞선 선택 코드를 함께 읽어보니, 선택 상태를 어디서 읽고 어떤 시점에 연결하는지가 중요했다. 여러 버튼을 하나의 도면 상태에 연결하되, 슬라이더가 늦게 준비되더라도 클릭 시 실제 인스턴스를 찾아야 했다. 모바일에서는 위쪽 버튼만 남기는 별도 표시 규칙도 있었다.
선택 상태는 하나이고 조작 위치는 여러 곳이다
상단에서 특정 타입을 골랐는데 하단은 이전 타입을 선택한 모양으로 남으면 방문자는 어떤 도면을 보고 있는지 헷갈린다. 각 버튼이 자기 상태를 따로 저장하기보다 현재 도면을 보여주는 구성 요소의 상태를 읽어 함께 갱신해야 한다. 코드에서 위아래 버튼을 같은 인덱스로 연결하고 선택 표시를 맞추는 부분은 이 책임을 다룬다.
이 원칙은 도면에만 해당하지 않는다. 상품 옵션, 사진 목록과 목록 필터도 같은 선택을 여러 위치에서 조작할 수 있다. 다만 다른 화면에서 독립적으로 고르는 값까지 강제로 하나로 합치지는 않는다. 여러 조작부가 실제로 같은 자료를 제어하는지부터 확인한 뒤 상태의 주인을 정한다.
한 번 준비되지 않았다고 계속 멈춘 버튼으로 남기지 않는다
앞선 코드에는 초기화 시 슬라이더 인스턴스를 읽고, 아직 없으면 돌아가는 구조가 있다. 버튼이 화면에 있어도 해당 시점에 기능의 준비가 끝나지 않았다면 연결이 성립하지 않을 수 있다. 나는 파일의 존재와 초기화 순서를 같은 검사로 취급하지 않는다. 필요한 프로그램이 나중에 붙는 경우도 설명할 수 있어야 한다.
최종 보완 소스는 클릭할 때마다 현재 요소의 슬라이더를 찾는다. 상태 동기화에서도 실제 인스턴스를 읽고 새로 확인된 인스턴스에는 변경 이벤트를 연결한다. 이는 소스에서 확인한 대응 구조다. 이 글을 작성하며 당시 모든 휴대전화에서 늦은 초기화 상황을 재현해 확인한 것은 아니다.
버튼 번호와 현재 도면 번호를 같은 기준으로 맞춘다
반복 슬라이더는 화면상의 복제 위치와 실제 자료의 번호가 다를 수 있다. 보완 코드에는 가능한 경우 반복 이동용 메서드를 사용하고, 선택 표시에는 실제 인덱스를 읽는 처리가 있다. 사진이 움직였다는 사실만으로 버튼과 도면이 같은 타입을 가리킨다고 볼 수 없다는 점이 중요하다. 앞뒤 이동과 직접 선택의 상태도 함께 맞춰야 한다.
이 코드가 사용하는 메서드와 인덱스는 해당 프로젝트의 슬라이더 연결에 속한다. 다른 라이브러리에 그대로 붙이면 같은 결과를 보장할 수 없다. 재사용할 때는 실제 자료 ID와 화면 내부 위치를 명시적으로 연결하는 편이 좋다. 선택한 자료를 출력해 비교하면 애니메이션에 가려진 불일치를 찾기 쉽다.
자동 넘김과 사용자의 선택이 경쟁하지 않게 한다
실제 보완 코드에는 선택할 때 자동 넘김을 멈추는 처리가 있다. 방문자가 방금 고른 도면이 곧 다른 것으로 넘어가면 선택 결과를 읽기 어렵다. 내 목적은 클릭 효과를 늘리는 것보다 사용자가 고른 자료를 안정적으로 읽을 수 있게 하는 것이었다. 언제 자동 동작을 다시 시작할지는 별도의 사용 흐름에서 정할 일이다.
클릭 처리에는 기본 동작과 다른 연결의 중복 반응을 제어하는 부분도 있다. 이런 개입은 해당 페이지 구조를 확인한 뒤 써야 한다. 여러 코드가 같은 클릭을 받는 사이트에 무조건 복사하면 필요한 다른 동작까지 막을 수 있다. 버튼 한 개를 고치는 일도 주변 프로그램이 어떤 책임을 갖는지 읽어야 안전하게 이어진다.
화면별 버튼 수와 기능의 확인은 구별한다
사용자는 모바일에서는 위에만 버튼을 두자고 정했다. 이것은 작은 화면에서 반복 조작부를 줄이는 표시 결정이다. 상하단 모두 동작하도록 만든 PC 구조와 모순되지 않는다. CSS로 아래 버튼을 숨겼다면 숨은 버튼만이 아니라 위쪽 선택과 현재 도면, 선택 표시가 여전히 연결되는지 확인해야 한다.
실제 검수에서는 위에서 선택한 뒤 아래 표시를 보고, 아래에서 선택한 뒤 도면을 확인한다. 준비가 늦은 상황과 자료가 바뀐 상황도 별도로 본다. 이번 글은 당시 요청과 두 버전의 소스를 대조한 제작기다. 독자에게 남기고 싶은 방법은 같은 버튼 모양을 반복하는 데서 멈추지 않고, 하나의 상태와 여러 조작 위치의 관계를 검사하는 것이다.