Mastodon 클라이언트, 숨겨진 디테일을 파헤치다

개발자는 Svelte의 컴포넌트 스코핑 시스템을 활용하여 Capitalized 클래스 명명 규칙을 적용하고, `cssHash` 설정을 통해 프로덕션 빌드에서 이를 존중하도록 했다. 또한, 프라이빗 멤버 변수 컨벤션을 따른 `_underscored` 클래스와 CSS 모듈을 위한 `lowercase-dashed` 클래스를 사용하며, 번들 사이즈와 DOM 구조의 간결성을 추구한다. 이는 개발자 경험(Developer Experience)과 DOM의 깔끔함(Neat DOM)을 동시에 고려한 설계다.

Svelte의 자식 컴포넌트 스타일링 부재 문제를 해결하기 위해 커스텀 전처리기를 도입했다. 이를 통해 `Timeline-item`과 같이 부모 컴포넌트(`Timeline`)에 종속된 스타일링을 적용할 수 있다. 또한, 생성된 클래스 이름이 JavaScript에서 접근 가능하므로, `Status-clickable`처럼 JavaScript 상호작용을 위한 마커(Marker for JavaScript Interactivity)로도 활용된다는 점이 주목할 만하다.

모바일 우선(Mobile-First) 디자인 대신, 데스크톱 사용을 중심으로 반응형 디자인을 구현했다. 사이드바 버튼 텍스트가 화면 밖으로 나가는 시점을 기준으로 아이콘 전용 모드(Icon-only Mode)로 전환되며, 이는 JavaScript 대신 CSS로 처리된다. 탭 순서(Tab Order)의 약간의 불안정성은 있지만, CSS만으로 UI 전환을 구현하려는 시도가 돋보인다.

이미지, 비디오, 오디오 등 다양한 미디어 첨부 파일 렌더링 시, 특히 비디오와 오디오의 최소 너비(Minimum Width) 설정은 Firefox 미디어 컨트롤러의 볼륨 슬라이더 표시를 위한 것이다. 여러 첨부 파일은 캐러셀로 처리되며, 스크롤바를 통해 항목 수를 암시하고 첫 번째 항목의 최대 너비를 조절하여 추가 항목 존재를 알린다. CSS Grid를 활용한 개선 가능성을 언급하며, 현재 구현은 다소 해킹(Hacky) 방식임을 인정한다.

이미지 클릭 시 나타나는 라이트박스에서 가로 스크롤 구현은 상당한 난제였다. 특히 마우스 휠 스크롤 시 발생하는 입력 끊김(Input Stutter) 현상을 해결하기 위해 JavaScript를 사용했으나, 완벽한 해결책을 찾지 못했다. CSS만으로는 이 문제를 해결하기 어렵다는 점을 토로하며, 사용자 경험(User Experience)과 구현의 복잡성(Implementation Complexity) 사이의 균형점을 찾으려는 노력이 엿보인다.