로그스톤 샵 LogStone Shop TIL 1
KeyBloom을 파는 스토어를 세우며 정한 것들.
서버를 두지 않는다는 선택
미리 구워 두면 운영이 사라진다
스토어를 정적 사이트로 만들었다. 방문자가 올 때마다 서버가 페이지를 만드는 게 아니라, 배포할 때 모든 페이지를 HTML로 구워 두고 그걸 그대로 내려준다.
얻은 것은 운영이 없다는 점이다. 서버가 없으니 죽을 서버도, 매달 나갈 서버비도, 트래픽이 몰릴 때 늘릴 것도 없다. 1인 사업에서 이건 기능 하나보다 크다.
대가는 하나다. 화면에 나가는 값이 바뀌어도 다시 굽기 전까지는 옛 화면이 그대로 있다. 가격이나 재고처럼 시시각각 변하는 걸 파는 가게라면 안 맞고, 우리처럼 값이 며칠에 한 번 바뀌는 제품 소개에는 맞는다. 이 경계를 알고 고르면 된다.
값이 바뀌면 배포가 필요하다는 걸 일정에 넣는다
“가격 바꿔 주세요”가 파일 하나 고치고 끝이 아니라 배포까지 가야 반영된다. 몇 분이면 되지만, 몇 분이라는 걸 모르고 약속하면 곤란해진다. 정적 사이트를 고른 순간 배포가 곧 발행 행위가 된다.
언어를 늘릴 때 비용이 생기는 자리
문구를 화면에서 떼어 두면 언어 추가가 싸진다
영어와 한국어를 같이 낸다. 페이지를 통째로 복제하면 언어가 늘 때마다 화면 수가 배로 늘고, 나중에 문구 하나 고치려면 두 곳을 고쳐야 한다. 한 곳을 빠뜨리면 그때부터 두 언어가 다른 말을 한다.
그래서 화면은 하나만 만들고 문구만 언어별 사전으로 분리했다. 언어를 하나 더 붙이는 일이 사전 하나 추가로 끝난다.
여기서 배운 건 번역 자체가 비용이 아니라는 것이다. 비용은 같은 말이 여러 곳에 흩어져 있을 때 생긴다. 이건 언어에만 해당하는 얘기가 아니어서, 뒤에 제품이 늘고 정책 문서를 다룰 때도 같은 방식으로 갔다.
남의 서비스에 화면을 맡길 때
남이 그려 주는 UI는 남의 사정에 흔들린다
페이지에 유튜브 재생목록 영상이 여러 개 뜨게 하라고 했는데, 열어 보니 영상 하나만 나와 있었다. 고치라고 했더니 원인은 페이지 코드가 아니라 그쪽 임베드(남의 사이트 화면을 우리 페이지에 끼워 넣는 방식)가 조건에 따라 다르게 동작해서였다.
붙이는 방식을 바꿔 해결했다. 목록 UI를 유튜브에 맡기지 않고, 영상 정보만 받아 와서 카드는 우리가 그렸다. 결과가 예측 가능해졌다.
판단으로 남길 것은 이것이다. 외부 서비스에서 데이터만 받아 오면 통제권이 우리에게 있고, 화면까지 받아 오면 그쪽이 바꾸는 순간 우리 화면이 바뀐다. 편한 쪽은 후자지만 값을 나중에 치른다.
무거운 것은 클릭 전까지 그림으로 둔다
영상 재생기를 페이지에 여러 개 심으면 첫 화면이 느려진다. 처음에는 썸네일과 재생 버튼만 두고, 누른 그 자리만 실제 재생기로 바꿨다.
대부분의 방문자는 영상을 누르지 않는다. 누르지 않는 사람에게 비용을 물리지 않는 게 요령이고, 이건 지도·채팅·댓글처럼 무거운 걸 붙일 때마다 그대로 쓰인다.
폰트도 남의 서버에 두지 않았다
폰트 파일은 사이트 안에 넣으라고 했다. 외부 CDN(여러 사이트가 같이 쓰는 파일 배포 서버)에서 불러오면 그쪽이 파일을 바꾸는 순간 내 사이트 글자가 따라 바뀐다. 그 회사 서버가 느린 날엔 글자가 늦게 뜨고, 방문자 정보도 그쪽으로 한 번 나간다. 폰트 파일을 사이트 빌드에 넣어 두면 이 문제들이 같이 사라진다. 용량은 늘지만 한글은 실제로 쓰인 글자 구간만 받아 가는 구조라 체감 차이가 없었다.
디자인을 웹으로 옮길 때
그대로 가져올 것과 바꿔야 할 것이 갈린다
디자인 시안은 1920px 고정 화면 기준으로 온다. 웹은 화면 크기가 제각각이라 그대로 옮길 수 없다.
- 그대로 가져와야 “같은 디자인”으로 보이는 것 — 색, 자간, 굵기, 선 두께, 모서리 처리
- 바꿔야 하는 것 — 고정 픽셀 크기와 배치. 글자는 화면 폭에 따라 늘고 줄게, 가로로 놓인 것은 좁은 화면에서 세로로 접히게
시안을 받으면 “얼마나 똑같이 옮겼나”가 아니라 “무엇을 지켰나”로 보게 됐다. 픽셀을 맞추려다 좁은 화면에서 깨지면 오히려 다른 디자인이 된다.
한 화면만 다른 톤으로 가야 할 때
제품 페이지는 다크모드에서도 밝은 톤을 유지해야 했다. 화면마다 색을 새로 칠하는 대신, 그 페이지에서만 색 값들을 통째로 덮었다.
원리는 이렇다. 색을 부품마다 박아 두면 예외를 만들 때 부품을 다 뜯어야 하고, 색을 이름으로 모아 두면 이름의 값만 바꾸면 된다. 나중에 부품이 늘어도 예외 처리는 그대로 작동한다.
이미지는 원본을 두고 결과만 줄인다
이미지가 무거우면 페이지가 느리게 열리니 최적화하라고 했다. 이미지를 미리 압축해서 넣는 대신 원본을 넣어 두고 빌드가 줄이게 했다. 375KB 타일이 4KB로 나갔다. 원본이 그대로 남아 있으니 나중에 크기나 포맷을 다시 정할 수 있다는 게 진짜 이득이다. 원본을 손대는 최적화는 되돌릴 수 없다.