株式会社フォーク 공식 사이트를 전면적으로 리뉴얼했습니다.
심플한 디자인과 함께 프론트엔드 및 백엔드에 선진적인 기술을 도입하여, 보기 쉽고 쾌적하게 이용할 수 있는 웹사이트를 목표로 했습니다.
리뉴얼 포인트는 다음과 같습니다.
표시 속도 개선
최근 전환율과 직결되는 웹사이트 성능을 높이고 싶거나, 리뉴얼 시의 지표로서 Lighthouse에서 높은 점수를 얻고 싶어 하는 의뢰가 늘고 있습니다. 이번 리뉴얼에서는 Lighthouse 퍼포먼스 점수가 95 이상(※1)이 되도록 설계 및 구현을 진행했습니다.
※1 데스크톱(1280x720) 측정 기준. 사용자 환경에 따라 점수는 변동될 수 있습니다.
업데이트 작업의 간소화
일반적인 CMS는 전문 지식이 없어도 웹사이트 업데이트가 가능하지만, 커스터마이징에 시간이 걸리거나 관리 화면의 속도가 느려진다는 의견이 있습니다. 이번 리뉴얼에서는 Google 스프레드시트를 통해 간편하게 업데이트할 수 있는 구조를 만들고, 데이터 포털과 폼 기능을 활용하여 퍼포먼스와 보안을 동시에 확보했습니다.
기술적 시도에 대하여
PWA
본 웹사이트는 PWA(Progressive Web Apps)로 구축되어, 스마트폰 앱처럼 설치가 가능하며 오프라인에서도 웹사이트를 이용할 수 있습니다.
Firebase 플랫폼
Google의 모바일 및 웹 애플리케이션 플랫폼인 Firebase를 활용하여, GitHub과 연동된 운영·스테이징·개발 CI(지속적 통합) 환경을 구축했습니다. 주로 Hosting·Functions·Cloud Run·Firestore(데이터베이스)·Storage·RemoteConfig(A/B 테스트) 등을 활용하여, 고부하 대응 인프라 구축을 단기간에 저렴한 비용으로 실현했습니다.
스프레드시트와 마크다운을 통한 데이터 관리
콘텐츠 업데이트를 위해 별도의 관리 화면을 두지 않고, Google 스프레드시트에 마크다운 형식으로 텍스트를 입력하면 브라우저에서 즉시 HTML로 변환하여 표시합니다. 이 변환에는 WebAssembly(markdown-wasm)를 사용하여 기존 JavaScript 실행 방식보다 대폭 속도를 높였습니다.
Firestore 번들을 통한 정적 배포
위의 콘텐츠 데이터는 데이터베이스인 Firestore에 저장되어 있지만, 배포 시에는 매번 읽어오지 않고 사전에 정적 데이터 파일(bundle)을 생성함으로써 로딩 속도 향상과 보안 강화를 도모했습니다.
Web 컴포넌트
프론트엔드는 Google이 주도하여 개발 중인 Lit 라이브러리로 Web 컴포넌트를 제작하여, 웹사이트의 고속화와 코드 간소화, 높은 유지보수성을 실현했습니다.
BudouX 🍇 를 이용한 자동 텍스트 줄 바꿈
본 웹사이트는 반응형 디자인을 지원하므로, BudouX 라이브러리를 사용하여 디바이스 화면 너비에 따른 최적의 텍스트 줄 바꿈 처리를 자동으로 수행합니다.
DX화 추진 사업 안내
콘텐츠와 관련하여, 작년부터 시작한 DX화 추진 사업의 서비스 내용과 사례를 게시하며, 기존의 웹 프로덕션에서 디지털 솔루션 컴퍼니로 한 걸음 내디뎠습니다. 새로운 株式会社フォーク의 행보를 기대해 주시기 바랍니다.