# 홈페이지를 리뉴얼했습니다

date: 2022-07-22

> For the complete documentation index, see [llms.txt](https://www.fork.co.jp/ko/llms.txt)



株式会社フォーク 공식 사이트를 전면적으로 리뉴얼했습니다.

심플한 디자인과 함께 프론트엔드 및 백엔드에 선진적인 기술을 도입하여, 보기 쉽고 쾌적하게 이용할 수 있는 웹사이트를 목표로 했습니다.

리뉴얼 포인트는 다음과 같습니다.

### 표시 속도 개선

<lazy-imgix path="img/information/146/lighthouse-score.png" width="340" height="75"></lazy-imgix>

최근 전환율과 직결되는 웹사이트 성능을 높이고 싶거나, 리뉴얼 시의 지표로서 <a href="https://developers.google.com/speed/docs/insights/v5/about" target="_blank">Lighthouse</a>에서 높은 점수를 얻고 싶어 하는 의뢰가 늘고 있습니다. 이번 리뉴얼에서는 Lighthouse 퍼포먼스 점수가 95 이상(※1)이 되도록 설계 및 구현을 진행했습니다.

<small>※1 데스크톱(1280x720) 측정 기준. 사용자 환경에 따라 점수는 변동될 수 있습니다.</small>

### 업데이트 작업의 간소화

<lazy-imgix path="img/information/146/data-portal.png" width="211" height="41"></lazy-imgix>

일반적인 CMS는 전문 지식이 없어도 웹사이트 업데이트가 가능하지만, 커스터마이징에 시간이 걸리거나 관리 화면의 속도가 느려진다는 의견이 있습니다.
이번 리뉴얼에서는 Google 스프레드시트를 통해 간편하게 업데이트할 수 있는 구조를 만들고, <a href="https://marketingplatform.google.com/intl/ja/about/data-studio/" target="_blank">데이터 포털</a>과 폼 기능을 활용하여 퍼포먼스와 보안을 동시에 확보했습니다.

### 기술적 시도에 대하여

#### PWA

<lazy-imgix path="img/information/146/pwa-logo.png" width="180" height="68"></lazy-imgix>

본 웹사이트는 <a href="https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps" target="_blank">PWA(Progressive Web Apps)</a>로 구축되어, 스마트폰 앱처럼 설치가 가능하며 오프라인에서도 웹사이트를 이용할 수 있습니다.

#### Firebase 플랫폼

<lazy-imgix path="img/information/146/firebase-logo-built_white.svg" width="300" height="134"></lazy-imgix>

Google의 모바일 및 웹 애플리케이션 플랫폼인 <a href="https://firebase.google.com/" target="_blank">Firebase</a>를 활용하여, GitHub과 연동된 운영·스테이징·개발 CI(지속적 통합) 환경을 구축했습니다. 주로 Hosting·Functions·Cloud Run·Firestore(데이터베이스)·Storage·RemoteConfig(A/B 테스트) 등을 활용하여, 고부하 대응 인프라 구축을 단기간에 저렴한 비용으로 실현했습니다.

#### 스프레드시트와 마크다운을 통한 데이터 관리

<lazy-imgix path="img/information/146/sheet-love-markdown.png" width="340" height="74"></lazy-imgix>

콘텐츠 업데이트를 위해 별도의 관리 화면을 두지 않고, Google 스프레드시트에 마크다운 형식으로 텍스트를 입력하면 브라우저에서 즉시 HTML로 변환하여 표시합니다. 이 변환에는 WebAssembly(<a href="https://github.com/rsms/markdown-wasm">markdown-wasm</a>)를 사용하여 기존 JavaScript 실행 방식보다 대폭 속도를 높였습니다.

#### Firestore 번들을 통한 정적 배포

위의 콘텐츠 데이터는 데이터베이스인 Firestore에 저장되어 있지만, 배포 시에는 매번 읽어오지 않고 사전에 정적 데이터 파일(bundle)을 생성함으로써 로딩 속도 향상과 보안 강화를 도모했습니다.

#### Web 컴포넌트

<lazy-imgix path="img/information/146/lit-logo.svg" width="160" height="75"></lazy-imgix>

프론트엔드는 Google이 주도하여 개발 중인 <a href="https://lit.dev/" target="_blank">Lit</a> 라이브러리로 Web 컴포넌트를 제작하여, 웹사이트의 고속화와 코드 간소화, 높은 유지보수성을 실현했습니다.

#### <a href="https://google.github.io/budoux/" target="_blank">BudouX</a> 🍇 를 이용한 자동 텍스트 줄 바꿈

본 웹사이트는 반응형 디자인을 지원하므로, BudouX 라이브러리를 사용하여 디바이스 화면 너비에 따른 최적의 텍스트 줄 바꿈 처리를 자동으로 수행합니다.

### DX화 추진 사업 안내
콘텐츠와 관련하여, 작년부터 시작한 <a href="/ko/business#dx">DX화 추진 사업</a>의 서비스 내용과 사례를 게시하며, 기존의 웹 프로덕션에서 디지털 솔루션 컴퍼니로 한 걸음 내디뎠습니다.
새로운 株式会社フォーク의 행보를 기대해 주시기 바랍니다.