이 블로그를 폰에 앱처럼 설치할 수 있게 했습니다. 이제 처음 들어오면 화면 아래에 "앱 설치" 안내가 뜨고, 누르면 홈 화면에 아이콘이 생깁니다. 설치한 앱은 주소창 없이 열립니다. 폰에서는 메뉴를 화면 아래 탭바로 옮겼고, 아이콘도 여러 번 다시 그렸습니다.
블로그를 폰에 앱처럼 설치할 수 있게 했습니다
바이브 코딩 프로젝트들의 제작기를 매일 밤 저절로 올리는 블로그입니다.이 프로젝트 소개 →뭘 했다
왜
폰에서 위쪽 메뉴는 엄지가 잘 닿지 않았습니다. 설치 버튼도 처음엔 페이지 맨 아래 링크 하나뿐이라 눈에 띄지 않았습니다. 그래서 첫 방문에 바로 보이는 안내를 사이트 분위기에 맞춰 만들었습니다.
삽질 포인트
설치한 아이콘을 눌렀는데 맨 위에 주소와 닫기 버튼이 달린 줄이 떴습니다. 앱이 아니라 그냥 브라우저 탭으로 열린 겁니다. 알고 보니 안드로이드 크롬은 서비스 워커가 없으면 앱 대신 바로가기만 만듭니다. 바로가기는 홈 화면에 아이콘만 있을 뿐, 누르면 브라우저 탭으로 열립니다. 서비스 워커를 넣어 고쳤고, 인터넷이 끊겼을 때 보여 줄 화면도 같이 만들었습니다. 이미 설치한 바로가기는 지우고 다시 설치해야 앱 창으로 열립니다.
다음 할 것
오늘은 쇼츠도 여러 군데 손봤습니다(아래 소식). 오늘 밤 바뀐 쇼츠가 처음부터 끝까지 저절로 만들어지는지 지켜봅니다.
그 밖의 소식
쇼츠에 설명 그림이 들어갑니다. 쇼츠는 내레이션을 읽는 동안 그 프로젝트 사이트를 녹화한 화면을 보여 주는데, 원인이나 구조를 설명하는 내레이션에는 그 화면이 맞지 않아 상자와 화살표로 그린 그림을 대신 띄우게 했습니다. 커밋 6개
쇼츠 내레이션이 숫자를 제대로 읽습니다. AI 목소리가 "222개"를 "22엉개"로 뭉개고 "열 문제"라고 읽어야 할 "10문제"를 "십 문제"로 읽어서, 목소리로 바꾸기 전에 숫자를 "이백이십이 개"처럼 소리 나는 대로 한글로 풀어 적게 했습니다. 커밋 10개
블로그 주소가 vibelog.space로 바뀌었습니다. 검색 결과와 링크를 공유할 때 뜨는 미리보기, 쇼츠에 넣으려고 사이트를 녹화할 때 여는 주소까지 모두 새 주소를 씁니다. 커밋 2개
원료 · git log
0f28a74쇼츠: 발음 교정에 시각·복합 수사 케이스 추가
1aacaa9쇼츠: 발음용 텍스트를 소리 나는 대로 — 숫자 전부 풀고, 된소리·연음 반영
9dccc10쇼츠: 다이어그램 위에 숫자 카운터가 겹쳐 찍히던 것
b5b47c6쇼츠: 훅이 통째로 하이라이트되던 것 — 강조 분량에 상한
8499670쇼츠: 한글로 푼 숫자와 단위를 붙여 쓴다
14b163b쇼츠: "건"의 특별 대우를 없앤다 — 두 번 헛짚은 발음 교정
b6d52f2쇼츠: 숫자선 값 라벨이 범위 밴드에 걸치던 것 — 밴드 밖으로 뺀다
b79fea6PWA: 서비스 워커 추가 — 설치한 앱이 브라우저 탭으로 열리던 문제
66e2b0c쇼츠: "N건"의 된소리 강제를 뺀다 — 읽을 때 어색했다
a4b2bf2쇼츠: 다이어그램 라벨 줄바꿈 규칙 — 한 글자가 떨어져 나가던 문제