#05. ttip(띱) - PWA 적용 & 관심 태그 기능 구현

안녕하세요!
대구 로컬 커뮤니티 서비스 ttip을 개발하고 있는 개발자입니다.
오늘은 지난번 작업에 이어서 PWA 적용과 관심 태그 기능 구현 과정을 공유하려고 합니다.

1. PWA 적용

사용자들이 모바일에서 앱처럼 사용할 수 있도록 PWA를 적용했어요.
앱 스토어 없이 홈 화면에 추가만 해도 앱 느낌이 나는 게 PWA의 가장 큰 장점이죠.

 

1-1 mainfest.json

앱 이름, 아이콘, 테마 컬러, 단축 메뉴를 정의했어요.
- short_name: "ttip"
- name: "ttip(띱) 대구를 더 깊이 즐기고 싶다면"
- theme_color: #f97316 (ttip 브랜드 오렌지)
- 단축 메뉴: 맛집 찾기 / 문화행사 / 커뮤니티

 

1-2 Service Worker

캐싱 전략을 상황에 맞게 분리했어요.
- 정적 자산(JS/CSS/이미지) → Cache First (빠른 로딩)
- HTML 페이지 → Network First (항상 최신 내용)
- API 요청 → 항상 네트워크
- 오프라인 시 → 전용 안내 페이지 표시

 

1-3 설치 안내 배너

플랫폼별로 다르게 동작하도록 구현했어요.
iOS Safari의 경우 beforeinstallprompt 이벤트를 지원하지 않아서
"공유 버튼 → 홈 화면에 추가"를 안내하는 커스텀 배너를 직접 만들었고,
Android Chrome은 beforeinstallprompt 이벤트를 감지해서 설치 버튼을 표시했어요.
이미 설치된 경우에는 배너가 표시되지 않고,
닫으면 7일간 다시 표시되지 않도록 localStorage로 처리했습니다.

 

1-4 스플래시 화면

PWA로 앱을 실행할 때 아이콘만 뜨면 심심하기도 하고 로딩 중인지 알 수 없어서
오렌지 배경에 "ttip(띱) / 대구를 더 깊이 즐기고 싶다면" 텍스트가 표시되는
커스텀 스플래시 화면을 만들었어요.
페이지 로드 완료 후 1.2초 표시 → 0.4초 페이드아웃으로 자연스럽게 처리했습니다.
### 앱 아이콘 & 파비콘
오렌지 배경에 흰색 소문자 "t"를 직접 디자인해서 아이콘 세트를 만들었어요.
- icon-32.png (파비콘)
- icon-180.png (iOS 홈화면)
- icon-192.png
- icon-512.png
- icon-maskable-512.png (Android 원형/사각형 대응)

2. 관심태그 기능

게시글에 달린 태그를 구독해서 사이드바에서 바로 접근할 수 있는 기능이에요.

 

2-1 기획

기존에는 태그 페이지까지 들어가야만 구독할 수 있어서 진입 장벽이 높았어요.
사이드바에서 바로 추가할 수 있도록 개선해서 접근성을 높였습니다.

 

2-2 주요 기능

**사이드바 관심 태그 섹션**
로그인한 유저에게만 표시되며,
+ 버튼을 클릭하면 인라인 검색창이 열려요.
기존 태그 자동완성 API를 그대로 재활용해서
250ms 디바운스로 기존에 사용된 태그를 추천해줍니다.
태그를 선택하면 즉시 구독되고, 태그에 마우스를 올리면
× 버튼이 나타나서 바로 구독을 취소할 수 있어요.
**태그 페이지에서도 구독 가능**
태그 클릭 시 /tags/{tag} 페이지로 이동하는데
우측 상단에 구독 버튼이 있어서 태그 페이지에서도 구독할 수 있어요.

---

마무리
PWA 적용으로 모바일 사용자 경험이 많이 개선됐어요.
실제로 홈 화면에 추가해서 사용해보니 앱이랑 거의 차이가 없더라고요.
관심 태그는 자주 찾는 콘텐츠를 빠르게 접근할 수 있게 해줘서
서비스 재방문율에도 도움이 될 것 같아요.
다음 포스팅에서는 메인페이지 전면 개편 과정을 공유할 예정입니다.
궁금한 점이 있으면 댓글로 남겨주세요!
ttip 바로가기: https://ttip.kr

ttip - 대구를 더 잘 알고 싶다면