별은 고정하고, 둘레 글자만 움직이게 했다

움직일 대상을 세 층으로 적어 본다

장식을 하나의 덩어리로 보면 ‘조금 천천히 돌려 달라’는 말로 수정이 끝나기 쉽다. 이 요청에서 필요한 구분은 속도보다 대상이었다. 별의 윤곽은 고정하고, 안쪽의 짧은 안내도 제자리에 두며, 바깥의 영문만 둘레를 따라 이동시킨다. 움직이는 부분을 말로 따로 설명할 수 있어야 구현도 같은 방향으로 나눌 수 있다.

초기 구성에서는 도형을 회전시키면서 안쪽 문구를 세워 두었다. 후속 요청에서는 도형의 회전도 없앴다. 수정 기록에 이 차이를 남겨야 다음 작업자가 이전 회전 효과를 되살리지 않는다.

보이는 별과 글자가 지나는 길을 따로 만든다

현재 생성 코드는 별을 그리는 경로와 둘레 글자가 지나는 경로를 따로 둔다. 별의 윤곽은 보존하고 글자의 길만 조금 바깥으로 넓혀 모서리를 완만하게 만든다. 눈에 보이는 별을 통째로 회전시키는 대신, 별 주변의 경로를 따라 글자의 시작 위치를 바꾸는 구성이다.

여기서 두 경로를 나눈 이유가 중요하다. 별 모양에 날카로운 방향 전환이 있으면 글자가 그 구간에 몰려 보일 수 있다. 글자 간격을 벌리기 위해 별 자체를 둥글게 바꾸면 원래 보존하려던 모양도 달라진다. 수정 기록은 이 충돌을 글자가 지나가는 길에서 다뤘다. 현재 코드의 확대 비율과 모서리 보간값은 그 사례의 조정값이며, 다른 도형과 글꼴에 그대로 맞는 수치로 소개할 수는 없다.

의뢰 단계에서도 ‘별이 돈다’, ‘별 둘레의 글자가 돈다’, ‘원형 띠 전체가 돈다’를 따로 확인할 필요가 있다. 비슷한 설명처럼 들려도 결과 화면은 달라진다. 형태가 고정돼야 하는지, 글자의 방향도 경로를 따라 바뀌어야 하는지부터 정하면 모션의 기준이 선명해진다.

한 바퀴의 이음매에는 두 글줄이 필요했다

닫힌 경로를 따라 한 줄의 글자가 이동하면 경로의 시작과 끝을 지나는 구간도 살펴야 한다. 이 구현은 같은 문구를 담은 두 textPath를 각각의 text 요소에 둔다. 한쪽 시작 위치는 −100%에서 0%로, 다른 쪽은 0%에서 100%로 이동한다. 앞줄이 빠져나가는 자리를 다음 줄이 채우도록 만든 구성이다.

수정 기록에는 두 복사본 중 하나만 움직여 글자가 겹친 문제가 남아 있다. 현재 코드는 다른 애니메이션의 시작 이벤트에만 기대지 않고, 같은 시작 처리에서 두 beginElement를 각각 호출한다. 같은 상태 알림이 반복돼도 이미 시작한 모션을 다시 시작하지 않도록 표시도 남긴다.

이것은 이 사례에서 읽은 코드와 해결 기록이다. 두 줄을 만들었다는 사실만으로 모든 순간의 연결이 자연스럽다고 단정할 수는 없다. 전체 주기를 보며 이음매에서 빈 구간이 생기는지, 글자가 포개지는지, 다시 시작할 때 튀는지를 확인하는 과정이 필요하다. 정지 화면 두 장은 그중 일부 순간만 보여 준다.

글자를 늘이기 전에 실제 문구의 폭을 잰다

둘레 문구를 경로 길이에 맞추는 방법도 바뀌었다. 현재 런타임은 숨겨진 직선 텍스트로 문구의 폭을 측정한다. 문구가 경로보다 길면 글꼴 크기를 조정하고, 들어갈 반복 횟수를 정한 뒤 남는 길이를 글자 간격에 나눠 더한다. 두 글줄에는 같은 계산 결과를 넣는다. 글꼴이 준비된 뒤 다시 측정하는 연결도 있다.

소스 주석에는 움직이는 textPath에 textLength를 주었을 때 글자 간격이 고르지 않았다는 관찰이 남아 있다. 그래서 이 버전은 해당 속성을 지우고 실제 폭과 letter-spacing을 사용한다. 이 기록을 모든 브라우저의 일반적인 결함으로 확대하지 않는다. 확인한 것은 이 구현이 택한 측정 방식과 수정 이유다.

문구가 들어맞는 것과 읽히는 것은 따로 살핀다. 안쪽 문구 역시 주어진 상자에 맞춰 크기를 줄이지만, 긴 설명을 계속 작게 넣으면 핵심을 읽기 어렵다. 중요한 조건은 본문에 두고 장식에는 짧은 말만 남기는 편집이 먼저다. 글자를 바꿨다면 간격과 이음매도 다시 확인한다.

장식의 자리는 제목이 움직일 공간까지 빼고 정한다

모션을 고쳐도 사진 위의 공간 문제는 남는다. 현재 코드는 헤더와 제목, 하단 조작부가 차지하는 경계를 읽어 별을 놓을 공간을 정한다. 제목이 등장하는 중에는 현재 위치와 움직임이 끝난 위치를 함께 고려한다. 하단 연락 영역도 올라오는 중의 모습과 자리 잡은 뒤의 위치를 계산에 반영한다.

이 사례는 경계 주변에 여유를 두고, 공간에 맞춰 별을 줄이며, 최소 크기조차 확보할 수 없으면 숨기는 갈래를 둔다. 코드에 있는 여유 16px와 최소 크기 80px는 이 레이아웃의 기준이다. 다른 화면에 적용할 때는 제목의 길이, 실제 글꼴, 사진 높이와 버튼의 등장 방식을 먼저 확인해야 한다.

작은 화면에서 장식을 숨길 수 있으려면 안내의 핵심이 다른 곳에도 있어야 한다. 별 안에만 필수 조건이나 다음 행동을 넣어 두면 장식을 줄이는 결정이 정보 삭제가 된다. 나는 장식을 덜어낸 상태에서도 제목과 설명, 연락할 길이 이해되는지를 적용 기준으로 삼는다.

움직임을 줄이는 설정은 실행 경로에서 처리한다

이 버전의 둘레 글자는 SVG 애니메이션으로 움직인다. 런타임은 prefers-reduced-motion 설정을 읽고 처음부터 줄이기가 선택돼 있으면 애니메이션을 시작하지 않는다. 실행 중 설정이 바뀌면 두 애니메이션을 끝내거나 다시 시작한다. CSS의 도형 회전을 없앤 것만으로 이 동작이 완성되는 구조는 아니다.

기존 시험은 가상의 DOM과 애니메이션 객체를 써서 초기 정지, 두 줄의 시작, 중복 시작 방지, 종료와 재시작을 확인한다. 실제 운영체제의 설정 화면을 바꾸며 본 결과는 별도로 남아 있지 않다. 코드를 읽은 범위와 시험이 확인한 상태 전환을 구별해 적는 이유다.

둘레 글자가 설명을 보태는 장식이라면 멈춘 상태에서도 내용이 성립해야 한다. 움직임을 보지 않아도 본문에서 같은 핵심을 찾을 수 있는지, 멈춘 글줄이 다른 문구를 가리는지는 실제 적용 화면에서 확인할 항목이다.

수정 기록과 화면 검수의 범위를 함께 읽는다

이번 집필에서는 원래 프로그램과 시험을 다시 실행하지 않았다. 생성 코드·스타일·런타임, 기존 시험과 완료 기록을 읽고 버전 근거를 남겼다. 현재 세 구현 파일의 해시는 후속 완료 기록에 적힌 값과 일치했다. 앞선 글의 회전 설명을 그대로 현재 구현이라고 남길 수 없어 같은 글의 수정본으로 연결했다.

과거 기록에는 글자 이스케이프 검사에서 선택자가 의도한 SVG 텍스트를 읽지 못한 실패와, 출력 및 검사 대상을 확인해 고친 과정도 있다. 후속 수정에는 한 글줄만 움직인 문제와 모서리 글자 충돌이 따로 기록돼 있다. 검사 선택자의 문제, 모션 시작의 문제, 시각적인 간격 문제를 각각 다룬 흔적이다.

별도의 화면 검수 보고서는 데스크톱과 모바일 프레임에서 첫 표본과 약 5초 뒤 표본을 비교했다. 그 표본들에서는 중심 문구가 제자리에 보이고 둘레 영문 배치가 달라졌으며, 별과 주요 문구·하단 조작부의 간격을 살폈다. 모바일 프레임의 주소 표기가 달랐던 부분은 별도의 로컬 응답 해시 대조 기록으로 보완돼 있다.

그 결과를 영상의 모든 프레임, 정확한 0초 장면, 물리 휴대폰, 모든 브라우저나 실제 OS 설정까지 검수한 것으로 늘리지 않는다. 이 글도 새 화면 검수를 수행한 보고서는 아니다. 남은 확인 범위를 알아야 다음 담당자가 어디부터 봐야 할지 결정할 수 있다.

다른 화면에 적용할 때 확인할 순서

다른 화면에 적용할 때도 고정할 부분과 움직일 부분부터 정한다. 이어서 새 문구와 실제 글꼴로 간격을 맞추고, 제목과 버튼이 등장하는 동안 겹치지 않는지 확인한다.

이 사례의 재사용 경로는 논의 단계였고 서버에 올린 결과가 아니었다. 하위 경로에 옮길 때 자산 주소를 맞추는 일도 후속 과제로 남아 있다. 여기서 확인한 로컬 구현과 향후 서비스되는 공통 모듈을 구별한다. 기존에 작동하던 묶음을 보관한 상태에서 수정본을 비교하고, 적용 결과를 확인한 뒤 교체해야 한다.

1. 별 윤곽·중심 문구·둘레 글자의 고정과 이동 역할을 따로 정한다.
2. 새 문구와 실제 글꼴로 간격을 다시 계산하고 한 주기의 이음매를 살핀다.
3. 제목 등장 전후, 하단 버튼 등장 전후, 좁고 낮은 화면에서 겹침을 확인한다.
4. 움직임 줄이기를 처음부터 켠 경우와 실행 중 바꾼 경우를 각각 확인한다.
5. 장식을 숨겨도 핵심 설명과 다음 행동이 남는지 보고, 확인한 버전과 남은 범위를 기록한다.