▲

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

 (gov.uk)
1P by neo 2달전 | favorite | 댓글 1개

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

  • 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는 보완적인 역할을 해야 하며, 대안 솔루션을 고려해야 함
  • 단일 페이지 애플리케이션은 접근성 문제로 인해 피해야 함
  • 서비스 테스트는 다양한 환경에서의 접근성을 보장해야 함
▲
neo 2달전  [-]
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가 로드되지 않더라도 페이지의 나머지 부분은 정상적으로 로드됨
답변달기