GN⁺: 점진적 향상을 통한 견고한 프론트엔드 구축
(gov.uk)견고한 프론트엔드를 구축하는 방법: 점진적 향상
-
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는 보완적인 역할을 해야 하며, 대안 솔루션을 고려해야 함
- 단일 페이지 애플리케이션은 접근성 문제로 인해 피해야 함
- 서비스 테스트는 다양한 환경에서의 접근성을 보장해야 함
Hacker News 의견
-
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가 로드되지 않더라도 페이지의 나머지 부분은 정상적으로 로드됨