Stairno 1. 공용 디자인 패키지

로드맵 1단계. 모든 Stairno 사이트가 똑같은 모양을 쓰게 만드는 작업이다. 전체 그림은 Stairno 0. 전체 로드맵에 있다.

한 줄 요약

허브 사이트 안에 박혀 있던 "모양"(색, 글꼴, 헤더, 푸터, 버튼)을 별도 부품 상자로 꺼냈다. 이제 새 사이트는 이 상자를 가져다 쓰기만 하면 허브와 같은 모양으로 시작한다. 꺼내는 동안 허브 화면은 1픽셀도 바뀌지 않았다.

1. 시작점: 허브 stairno.com

1단계 전에 허브가 먼저 있었다. 10월 17일 하루 동안 만들어 공개한 소개 사이트다.

• 만든 도구: Astro로 페이지를 미리 만들어 두고, Cloudflare Pages에 올렸다. 로그인도 DB도 없는 정적 사이트다
• 디자인: 흑백만 쓴다. 밤하늘과 계단을 작은 점(도트)으로 그리고, 별이 계단을 올라간다. 제목 글자도 점이 모여서 만들어진다. 글꼴은 Pretendard
• 기능: 한국어와 영어 전환, 라이트와 다크 테마 전환(처음엔 컴퓨터 설정을 따른다), 모바일 대응
• 문서: 이 작은 사이트도 계획서, 요구사항 명세서, 설계 명세서, 테스트와 배포 문서를 먼저 썼다

2. 문제: 사이트가 넷이면 모양도 넷이 된다

10월 18일에 "모든 Stairno 사이트는 허브와 똑같이 생긴다. 사이트마다 색이나 헤더를 따로 두지 않는다"고 정했다.

그런데 허브의 모양은 허브 코드 안에 섞여 있었다. 새 사이트를 만들 때마다 그 코드를 복사해 오면 어떻게 될까?

1. 처음엔 넷 다 똑같다
2. 허브에서 헤더 버튼 하나를 고친다
3. 나머지 셋에도 똑같이 고쳐야 하는데, 하나를 까먹는다
4. 몇 달 뒤 사이트마다 조금씩 다르게 생겼다

그래서 모양을 한 곳에서만 관리하기로 했다. 그게 공용 디자인 패키지 @stairno/ui(레포 stairno-ui)다.

3. 무엇을 떼어 냈나

안 떼어 낸 것도 있다. 점으로 그린 글자와 밤하늘 애니메이션은 허브만의 첫인상이라 허브에 남겼다. 계정 센터 같은 화면에서 점 글자가 떠다니면 오히려 방해가 된다.

공용 부품은 "무엇을 보여줄지"를 모른다. 헤더는 "메뉴 항목을 받아서 그린다"까지만 알고, 메뉴에 뭐가 들어갈지는 쓰는 사이트가 정한다. 그래야 허브의 메뉴와 계정 센터의 메뉴가 달라도 같은 헤더를 쓸 수 있다.

4. 어떻게 나눠 쓰나: 버전 이름표

다른 사이트는 이 패키지를 GitHub 레포에서 바로 설치한다. 이때 반드시 버전 이름표(태그)를 붙인다.

npm install github:seren-wib/stairno-ui#v0.2.2

이름표 없이 설치하면 "설치하는 그 순간의 최신 코드"가 들어온다. 그러면 허브는 어제 코드, 계정 센터는 오늘 코드를 쓰게 되고, 누가 버전을 올린 적도 없는데 어느 날 모양이 바뀐다. 이름표를 붙이면 사이트마다 "나는 v0.2.2를 쓴다"가 기록되고, 모양을 바꾸고 싶으면 그 사이트에서 이름표를 올리는 변경을 따로 한다.

모양을 바꾸는 순서는 항상 같다.

1. stairno-ui를 고치고 테스트한다
2. 새 버전 이름표를 붙인다
3. 각 사이트에서 의존성을 새 버전으로 올린다

5. 확인: 1픽셀도 안 바뀌었나

이 작업의 성공 조건은 "허브가 아무것도 안 바뀐 것처럼 보인다"였다. 코드는 크게 옮겼는데 화면은 그대로여야 한다. 확인은 세 겹으로 했다.

1. 결과 파일 비교. 바꾸기 전과 후의 허브를 각각 만들어서 결과물을 비교했다. HTML은 스크립트 들여쓰기만 달랐고, CSS는 같은 규칙 두 덩어리가 하나로 합쳐진 것만 달랐다. 규칙 내용은 같았다
2. 스크린샷 비교. 라이트·다크 × 데스크톱(1280px)·모바일(360px) × 한국어·영어·404 페이지, 총 12장을 찍어서 전후를 픽셀 단위로 비교했다. 12장 전부 0픽셀 차이였다
3. 동작 확인과 테스트. 테마 버튼 누르기, 선택 기억, 스크롤하면 헤더가 바뀌는 것, 언어 링크를 직접 눌러 봤다. 자동 테스트는 허브 118개, 패키지 43개가 통과했다

10월 18일 새벽에 stairno-ui v0.1.0을 내고, 허브가 그걸 쓰게 바꾼 변경을 머지했다. 로드맵 1단계 끝.

6. 이후: 계정 메뉴를 더하다

같은 날 오후, 3단계를 하다가 패키지에 부품을 하나 더 넣었다. 계정 메뉴다.

원래는 "허브에는 로그인 관련 화면을 하나도 두지 않는다"고 정했었다. 그런데 계정 센터를 만들고 보니, 브랜드의 첫 화면인 허브에서 "내가 로그인돼 있나", "계정 센터는 어디로 가나"가 안 보이는 게 불편했다. 그래서 결정을 바꿨다. 허브에도 헤더 오른쪽에 동그란 계정 버튼 하나를 두되, 계정 화면과 결제는 여전히 허브에 두지 않는다.

이 버튼은 허브, 계정 센터, 앞으로 만들 사이트에 똑같이 들어가야 하니까 당연히 공용 패키지에 만들었다.

• 로그인한 상태: 버튼에 이름 첫 글자. 누르면 이름, 이메일, "계정 관리", "로그아웃"이 있는 카드가 열린다
• 로그인 안 한 상태: 사람 모양 아이콘. 누르면 "로그인", "가입"
• 허브처럼 서버가 없는 사이트: 브라우저가 공용 API에 "지금 로그인한 사람 누구야?"를 직접 물어본다. 3초 안에 답이 없거나 실패하면 그냥 로그인 안 한 상태로 보여 준다
• 키보드만으로도 쓸 수 있게: 열면 첫 링크로 초점이 가고, Esc나 바깥 클릭이면 닫히고 초점이 버튼으로 돌아온다(접근성)

이 부품을 만들고 확인할 때는 README의 안내대로 연습용 사이트를 새로 하나 만들어서 메뉴를 붙이고, 로그인/로그아웃/허브 방식 × 라이트·다크 × 데스크톱·모바일로 16장을 찍어 봤다.

7. 남은 것

• 첫 화면이 글꼴을 기다린다. Pretendard 글꼴 설정 파일을 받는 동안 화면 그리기가 0.9초쯤 멈춘다. 계정 센터 로그인 화면의 Lighthouse 성능 점수가 영어 91점, 한국어 81~85점으로 목표(90점)에 못 미친 주원인이다. 글꼴을 기다리지 않고 먼저 그리게 바꾸는 일이 stairno-ui에 이슈로 남아 있다

다음 글: Stairno 2. 계획서와 다른 도메인 로그인 실험