고정 연락 바는 언제든 연락할 수 있게 해 주지만 작은 화면에서는 자료를 가릴 수도 있다. 원래 제작 코드에는 읽는 동안 바를 잠시 숨기고 멈추면 다시 보이게 하는 처리가 남아 있다. 움직임 자체보다 내가 주의해서 읽은 것은 어떤 입력을 읽기로 판단하고 언제 숨기지 않는가 하는 조건이었다.
크기를 맞추는 공통 모듈을 추가하는 순간 이 조건은 더 중요해졌다. 같은 요소에 두 코드가 위치 변환을 쓰면 하나가 다른 하나의 결과를 지울 수 있다. 바의 모양을 정리하면서 기존 읽기 동작을 잃지 않으려면 움직임을 관리하는 코드와 표시 틀의 역할을 먼저 정해야 했다.
읽는 동작과 조작 중인 동작을 구별한다
원래 런타임은 스크롤뿐 아니라 휠과 터치 이동, 이동 키도 읽기 동작의 단서로 삼는다. 그러나 입력 칸이나 편집 가능한 영역에서 누르는 키는 같은 방식으로 처리하지 않는다. 글자를 쓰거나 값을 고르는 중인 사람에게 이동 입력이라고 판단해 연락 바를 숨기는 것은 다른 결과를 낳기 때문이다.
바 안에 포커스가 있는 경우에도 숨기지 않는 갈래가 있다. 키보드로 버튼을 선택한 방문자가 눈앞의 조작부를 잃지 않게 하는 조건이다. 연락 바에 포커스가 들어오면 기존 타이머를 정리하고 표시 상태로 돌린다. 작은 모션에도 사용자가 무엇을 하고 있는지에 관한 구체적인 판단이 들어가 있었다.
숨김 시간은 화면 구조와 함께 읽는다
코드는 스크롤 중임을 나타내는 클래스를 붙이고 이전 타이머를 취소한 뒤 새 타이머를 둔다. 원래 전체 화면 전환이 있는 구조와 일반 스크롤 구조에서 다시 보이는 대기 시간이 달랐다. 그 숫자는 해당 전환과 읽기 조건에 맞춘 값이지 모든 홈페이지의 정답은 아니다. 같은 시간을 복사하기보다 어느 움직임을 기다리는지 먼저 확인한다.
빠르게 입력이 이어지면 이전 표시 복구가 중간에 끼어들지 않아야 한다. 반대로 버튼을 조작하는 동안에는 계속 숨기려는 타이머가 남지 않아야 한다. 나는 움직임이 멋있다는 평가와 이런 상태 전환 검사를 나누어 생각한다. 원래 코드가 가진 의도를 옮길 때도 이벤트와 취소 조건을 함께 남겨야 한다.
크기 CSS가 기존 transform을 덮지 않게 한다
연락 바를 가운데 놓으려는 CSS와 화면에서 바를 내려 숨기려는 CSS는 모두 transform을 쓸 수 있다. 서로 다른 파일에서 같은 속성을 다시 쓰면 버튼 너비를 고치는 작업이 숨김 위치까지 바꾸게 된다. 원래 공통 모듈은 기존 코드가 모션을 관리한다는 표시를 읽어 위치 변환을 피하는 갈래를 두었다.
이 표시는 접수나 연락 행동을 전달하는 API가 아니다. 같은 요소의 표시를 누가 맡는지 알리는 연결 계약이다. 여러 디자인에서 재사용할 때는 기존 모션의 관리 표시와 실제 코드가 일치하는지 확인한다. 표시만 붙이고 아무 코드도 복구하지 않으면 버튼이 다시 나타난다는 보장은 생기지 않는다.
기록된 테스트가 확인한 범위를 지킨다
원래 테스트 파일에는 가상의 DOM과 타이머를 두고 휠 입력 뒤 숨김 클래스가 붙는지, 타이머 함수를 부르면 복구되는지 확인하는 구성이 있다. 이 검사는 이벤트 연결과 상태 전환의 일부를 다루는 코드 검사다. 실제로 시간이 흐르는 브라우저에서 읽는 느낌이나 터치 장치의 움직임을 확인한 결과와는 다르다.
이번 글은 원래 런타임과 테스트 코드를 읽고 책임의 경계를 설명한다. 과거 테스트 파일의 출력 문구만 보고 새로 실행했다고 쓰지도 않는다. 실제 적용 화면에서는 입력 중의 키, 바 안의 포커스, 연속 스크롤과 멈춤을 직접 확인해야 한다. 고정 바가 중요한 문장이나 마지막 조작부를 가리는지도 별도로 살핀다.
사이트에 맞게 움직임을 맡길 곳을 정한다
이미 읽기 모션을 가진 사이트라면 새 공통 모듈은 크기와 간격만 맡길 수 있다. 모션이 없는 사이트에 같은 표시를 붙여서는 안 되고, 필요한 동작을 어디서 관리할지 정해야 한다. 동작을 없애기로 했다면 남아 있는 숨김 클래스와 타이머도 함께 검토한다. 여러 코드가 각자 표시를 복구하는 구조는 다음 수정의 원인을 찾기 어렵다.
내가 남기고 싶은 노하우는 스크롤하면 연락 바를 무조건 숨기라는 취향이 아니다. 읽기와 조작을 구별하고, 같은 속성을 바꾸는 주인을 하나로 정하며, 멈춤과 포커스에서 복구되는 조건을 기록하는 방법이다. 필요 없는 효과를 줄이는 결정도 이 경계를 이해한 뒤에 하면 더 명확해진다.