# 점진적 향상을 통한 견고한 프론트엔드 구축

> Clean Markdown view of GeekNews topic #16992. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=16992](https://news.hada.io/topic?id=16992)
- GeekNews Markdown: [https://news.hada.io/topic/16992.md](https://news.hada.io/topic/16992.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2024-09-30T09:57:10+09:00
- Updated: 2024-09-30T09:57:10+09:00
- Original source: [gov.uk](https://www.gov.uk/service-manual/technology/using-progressive-enhancement)
- Points: 1
- Comments: 1

## Topic Body

### 견고한 프론트엔드를 구축하는 방법: 점진적 향상

- **HTML로 시작**
  - 정부 서비스는 HTML만으로도 기능적이어야 함
  - HTML 레이어는 내결함성이 있어, 오래된 브라우저에서도 작동 가능
  - 올바른 시맨틱 마크업을 사용하고 문서 구조를 논리적으로 구성해야 함

- **CSS 사용**
  - CSS를 사용하여 서비스를 스타일링할 수 있음
  - CSS 레이어는 개별 선언을 무시할 수 있는 내결함성이 있음
  - 'CSS-in-JS'와 같은 기술은 피해야 함

- **JavaScript 사용**
  - JavaScript는 상호작용 요소를 추가하는 데 사용됨
  - JavaScript 레이어는 내결함성이 없으며, 오류가 발생할 수 있음
  - 브라우저 API에 대한 기능 감지, 폴리필 포함, 트랜스파일링 등을 통해 호환성을 높일 수 있음
  - JavaScript는 HTML과 CSS를 보완하는 역할을 해야 함

- **JavaScript 대안**
  - JavaScript 없이도 사용자 요구를 충족할 수 있는 간단한 솔루션을 고려해야 함
  - 대안으로 데이터 테이블 표시, 데이터 내보내기, 그래프를 이미지로 사전 렌더링 등이 있음

- **클라이언트 측 JavaScript 프레임워크 사용**
  - 복잡한 사용자 인터페이스가 아닌 경우 프레임워크 사용을 피해야 함
  - 프레임워크 사용 시 코드베이스 크기 증가, 성능 문제, 타사 코드 의존성 등의 문제가 발생할 수 있음
  - 프레임워크 사용 시 각 사용자 인터페이스를 별도의 컴포넌트로 설계해야 함

- **CSS 또는 JavaScript가 로드되지 않거나 실행되지 않는 이유**
  - 네트워크 오류, 브라우저 확장 프로그램, 타사 공급업체 다운타임, DNS 조회 실패, 브라우저 업데이트로 인한 버그 등이 원인일 수 있음
  - 일부 사용자는 브라우저 기능을 의도적으로 끌 수 있음

- **단일 페이지 애플리케이션(SPA)**
  - 단일 페이지 애플리케이션으로 서비스를 구축하지 말아야 함
  - SPA는 접근성을 저해하고, 페이지 간 이동 시 포커스 처리 문제, 뒤로/앞으로 버튼 사용 불가 등의 문제가 발생할 수 있음

- **서비스 테스트**
  - JavaScript 또는 JavaScript 프레임워크에 크게 의존하는 구성 요소는 다양한 브라우저와 장치에서 작동해야 함
  - 접근성을 위해 테스트해야 함

- **사례 연구 및 관련 가이드**
  - 점진적 향상을 사용하는 이유
  - 다양한 장치를 위한 디자인
  - 프론트엔드 성능 테스트 방법
  - WCAG 2.2 이해

### GN⁺의 정리
- 점진적 향상은 HTML, CSS, JavaScript 순으로 웹사이트를 구축하는 방법임
- 이 방법은 서비스의 내결함성을 높이고, 다양한 브라우저와 장치에서 작동 가능하게 함
- JavaScript는 보완적인 역할을 해야 하며, 대안 솔루션을 고려해야 함
- 단일 페이지 애플리케이션은 접근성 문제로 인해 피해야 함
- 서비스 테스트는 다양한 환경에서의 접근성을 보장해야 함

## Comments



### Comment 29484

- Author: neo
- Created: 2024-09-30T09:57:10+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=41686715) 
- JavaScript 프레임워크를 사용할 때는 사용자에게 어떤 이점이 있는지 증명할 수 있어야 함
  - 오프라인에서도 데스크탑 앱처럼 작동할 수 있는 앱이라면 싱글 페이지 애플리케이션(SPA)으로 만드는 것이 좋음
  - 예시로 Photopea, Google Docs/Sheets, tldraw 등이 있음
  - 인터넷 연결이 필요하고 여러 페이지가 필요한 앱이라면 브라우저가 내비게이션을 처리하도록 하는 것이 좋음

- SPA의 단점으로 지적된 사항들
  - 보조 기술 사용자들이 페이지 이동 시 컨텍스트 변화를 인지하지 못함
  - 페이지 이동 시 포커스를 처리하지 못함
  - 브라우저의 뒤로 가기 및 앞으로 가기 버튼을 사용할 수 없음
  - 네트워크 연결이 끊길 경우 오류에서 복구할 수 없음
  - 하지만 이러한 문제들은 SPA에서도 해결할 수 있음

- 인터넷 전체가 이 조언을 따랐으면 좋겠음

- 간단한 솔루션을 우선시해야 함

- Linux가 목록에 없는 이유가 궁금함

- 많은 사람들이 이 접근 방식을 좋아하는 것 같음
  - 왜 일반적인 트렌드는 불필요하게 JavaScript와 React 같은 프레임워크를 사용하는지 궁금함

- HTML과 서버에서 미리 가져온 데이터를 사용하고, 클라이언트에서 할 수 있는 작업은 클라이언트에서 처리함
  - 최소한의 CSS와 바닐라 JS를 사용함
  - 동료들에게는 구식으로 보일 수 있지만, 아무것도 놓치지 않음

- 많은 SPA가 문제가 있지만, 모든 SPA가 문제가 있는 것은 아님
  - VitePress와 SolidJS 같은 예시를 보면 잘 작동함
  - JS를 사용하지 않는 사람은 거의 없음
  - 저사양 기기에서도 JS를 처리하는 데 문제가 없음
  - 접근성 문제는 SPA 사용 여부와 관련이 없음
  - Svelte는 접근성 경고 기능도 내장되어 있음

- 서버 사이드 렌더링도 무조건 좋은 것은 아님
  - 클라이언트 사이드 JavaScript 프레임워크를 사용할 때는 주의가 필요함
  - 코드 베이스가 커지고, 클라이언트 측에서 처리해야 할 작업이 많아져 성능 문제가 발생할 수 있음
  - 서드파티 코드에 의존하게 되어 유지보수가 어려워질 수 있음
  - JavaScript 프레임워크를 사용할 때는 사용자에게 어떤 이점이 있는지 증명할 수 있어야 함
  - 부정적인 영향을 인지하고 완화할 수 있어야 함
  - HTML과 CSS만으로 구축할 수 없는 부분에만 프레임워크를 사용해야 함
  - 각 사용자 인터페이스 부분을 별도의 컴포넌트로 설계해야 함
  - JavaScript가 로드되지 않더라도 페이지의 나머지 부분은 정상적으로 로드됨