hmk run dev

프론트엔드의 표준 (HTML, CSS, 크로스브라우징, 브라우저퍼포먼스, 웹 접근성) 본문

Front-End

프론트엔드의 표준 (HTML, CSS, 크로스브라우징, 브라우저퍼포먼스, 웹 접근성)

hmk run dev 2024. 9. 29. 16:04

프론트엔드 개발의 중요성

프론트엔드프런트엔드 개발은 웹 애플리케이션이나 웹사이트의 ‘얼굴’입니다. 사용자가 처음 만나는 부분이기 때문에, 프런트엔드 개발의 품질은 사용자의 첫인상에 직접적인 영향을 미치죠. 하지만 왜 그렇게 중요한 걸까요? 몇 가지 예시를 통해 살펴보겠습니다.

 

 

 

1. 사용자 경험(UX)

사용자가 웹사이트를 방문했을 때, 그들이 어떻게 느끼는지가 중요합니다. 예를 들어, 여러분이 좋아하는 온라인 쇼핑몰에서 상품을 검색할 때, 결과가 빠르게 나타나고, 디자인이 깔끔하며, 직관적으로 탐색할 수 있다면, 그 경험이 얼마나 긍정적일까요? 반면, 느린 로딩 속도와 복잡한 내비게이션으로 인해 불편함을 느낀다면, 아마도 다시 방문하고 싶지 않을 겁니다. 이처럼 프런트엔드 개발은 사용자 경험을 극대화하는 데 필수적입니다.

 

2. 브랜드 이미지

 

프론트엔드 개발은 브랜드 이미지와 직결됩니다. 많은 스타트업이 초기 단계에서 웹사이트 디자인에 신경을 많이 씁니다. 예를 들어, 애플의 웹사이트는 세련되고 현대적인 디자인으로 유명합니다. 사용자들은 이러한 비주얼에 매료되고, 자연스럽게 브랜드에 대한 신뢰도를 높이게 됩니다. 반면, 디자인이 어지럽고 구식인 웹사이트는 브랜드 신뢰도를 떨어뜨릴 수 있습니다.

 

3. 접근성과 포괄성

 

프런트엔드 개발은 웹 접근성을 보장하는 데 중요한 역할을 합니다. 모든 사용자가 웹 콘텐츠에 접근할 수 있도록 설계된 웹사이트는 포괄적인 사회를 만드는 데 기여합니다. 예를 들어, 시각장애인을 위한 스크린 리더를 지원하는 웹사이트는 그들이 정보에 접근할 수 있도록 도와줍니다. 이러한 접근성은 단순한 의무를 넘어, 더 많은 사용자가 웹을 이용할 수 있게 만드는 중요한 요소입니다.

참고 - MDN 웹 접근성 지침(WCAG)

 

표준 준수의 필요성

웹 표준을 지키면 어떤 장점이 있을까?

브라우저와 OS와 관련 없이 하나의 코드로 모든 플랫폼을 대응할 수 있어

개발자에겐 개발의 효율성을

기업 입장에선 서버 비용 절감과 운영의 효율성을 가져다줄 수 있습니다.

 

그 외에도,

 

1. 검색엔진 최적화(SEO)

의미를 가진 시멘틱 태그를 사용하는 등 표준을 지켜 웹 페이지를 만들면 크롤러 봇이 좀 더 이해하기 쉬워집니다.

이는 웹페이지가 검색 결과 순위에서 더 높은 우위를 가져갈 수 있도록 합니다.

 

2. 개발자가 더 이해하기 쉬운 코드

웹 크롤러에게 사이트를 더 쉽게 이해할 수 있게 할 수 있을 뿐만 아니라 사람도 의미를 가진 통해 만들어진 구조를 더 이해하기 쉽습니다.

역시 개발자의 생산성을 높여 줄 수 있습니다.

 

3. 접근성 향상

웹 표준을 준수하면 웹 접근성이 크게 개선됩니다. 모든 사용자가 웹 콘텐츠에 접근할 수 있도록 설계된 웹사이트는 정보에 대한 평등한 접근을 보장합니다. 예를 들어, 시각장애인을 위한 스크린 리더 지원, 청각장애인을 위한 자막 제공 등은 다양한 사용자들이 웹을 보다 편리하게 이용할 수 있게 해 줍니다.

더욱이, 웹 접근성은 단순한 선택이 아니라 법적인 책임이 될 수 있습니다. 많은 국가에서 웹사이트 접근성에 대한 법적 요구 사항이 있으며, 이를 준수하지 않으면 소송이나 벌금 등의 법적 문제가 발생할 수 있습니다.

 

HTML 표준

HTML(하이퍼텍스트 마크업 언어)은 웹 페이지를 작성하는 데 사용되는 기본적인 언어입니다. HTML 표준은 웹 콘텐츠의 구조와 의미를 정의하며, 시맨틱 웹의 기초가 됩니다. HTML 표준을 준수하면 웹 페이지가 더 이해하기 쉽고, 접근성 및 SEO(검색 엔진 최적화)에서 유리한 점을 제공합니다.

1. HTML의 기본 구조

HTML 문서는 다음과 같은 기본 구조를 가집니다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 표준 예제</title>
</head>
<body>
    <header>
        <h1>HTML 표준의 중요성</h1>
    </header>
    <main>
        <article>
            <h2>HTML이란?</h2>
            <p>HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다.</p>
        </article>
        <aside>
            <h3>관련 링크</h3>
            <ul>
                <li><a href="https://www.w3.org/TR/html52/">W3C HTML 표준</a></li>
            </ul>
        </aside>
    </main>
    <footer>
        <p>&copy; 2024 모든 권리 보유</p>
    </footer>
</body>
</html>

 

이 코드에서 보듯이, HTML 문서는 <!DOCTYPE html> 선언으로 시작하며, <html> 요소 내에 <head>와 <body> 요소로 나뉘어 있습니다.

 

2. 시맨틱 HTML

시맨틱 HTML은 웹 페이지의 구조와 의미를 명확히 하기 위해 적절한 태그를 사용하는 것입니다. 예를 들어, <header>, <footer>, <article>, <section> 등은 콘텐츠의 의미를 명확히 하여, 브라우저나 검색 엔진이 페이지를 더 잘 이해할 수 있게 도와줍니

<article>
    <h2>웹 접근성이란?</h2>
    <p>웹 접근성은 모든 사용자가 웹 콘텐츠에 접근할 수 있도록 하는 것입니다.</p>
</article>

 

이 예제에서 <article> 태그는 해당 콘텐츠가 독립적인 내용을 가지고 있음을 나타내며, 이를 통해 검색 엔진은 이 콘텐츠를 별도의 주제로 인식할 수 있습니다.

 

3. HTML 표준 준수의 장점

  • 접근성 향상: 시맨틱 태그를 사용하면 스크린 리더와 같은 보조 기술이 콘텐츠를 더 쉽게 이해할 수 있습니다. 예를 들어, alt 속성이 있는 <img> 태그는 시각 장애인이 이미지의 내용을 알 수 있도록 해줍니다.
<img src="image.jpg" alt="설명 텍스트">

 

  • SEO 개선: 의미 있는 태그 사용은 검색 엔진 크롤러가 페이지를 인덱싱하는 데 도움을 줍니다. 시맨틱 HTML을 활용하면 페이지의 검색 결과 순위를 높일 수 있습니다.
  • 유지보수 용이성: 표준을 준수한 코드는 다른 개발자가 이해하고 수정하기 쉬워집니다. 이는 팀워크와 프로젝트 관리에서 큰 장점이 됩니다.

 

크로스 브라우징

크로스 브라우징(Cross-Browsing)은 웹 개발에서 다양한 웹 브라우저와 디바이스에서 웹 페이지가 일관되게 작동하고 표시되도록 보장하는 과정을 의미합니다. 다양한 브라우저의 엔진 차이로 인해 웹 페이지의 렌더링과 기능이 다르게 나타날 수 있으므로, 크로스 브라우징 문제는 프론트엔드 개발의 중요한 고려 사항입니다.

1. 크로스 브라우징 문제의 원인

  • 브라우저 엔진의 차이: 각 브라우저는 HTML, CSS, JavaScript를 해석하고 렌더링하는 방식이 다릅니다. 예를 들어, Chrome, Firefox, Safari, Edge 등은 동일한 코드를 다르게 해석할 수 있습니다.
  • CSS 및 JavaScript 지원 차이: 특정 CSS 속성이나 JavaScript API가 모든 브라우저에서 지원되지 않을 수 있습니다. 이러한 차이로 인해 웹 페이지의 스타일과 동작이 일관되지 않을 수 있습니다.
  • 뷰포트 및 반응형 문제: 다양한 화면 크기와 해상도에 맞춰 레이아웃을 조정해야 할 때, 브라우저마다 반응형 처리 방식이 다를 수 있습니다.

2. 현대 프론트엔드의 해결 방안

현대 프론트엔드 개발에서는 여러 가지 방법으로 크로스 브라우징 문제를 해결하고 있습니다:

  • CSS 리셋 및 노멀라이즈 사용: 기본 스타일을 초기화하거나 표준화하기 위해 CSS 리셋(CSS Reset)이나 노멀라이즈(Normalize.css)를 사용합니다. 이는 각 브라우저에서 기본적으로 제공하는 스타일 차이를 줄이는 데 도움을 줍니다.
/* Normalize.css의 예시 */
html {
    line-height: 1.15; /* Improved line height */
}

 

  • 모던 CSS와 JavaScript 프레임워크 사용: React, Vue.js, Angular와 같은 프레임워크는 크로스 브라우징 문제를 내재적으로 해결하는 기능을 제공합니다. 예를 들어, 이러한 프레임워크는 다양한 브라우저에서 일관되게 작동하는 컴포넌트 기반의 UI를 제공합니다.
  • Polyfill과 Babel 사용: 최신 JavaScript 기능을 사용하더라도 구형 브라우저에서 문제가 발생하지 않도록 Polyfill을 사용하여 기능을 추가하거나, Babel과 같은 도구를 사용해 ES6+ 코드를 ES5로 변환하여 더 많은 브라우저에서 호환되도록 합니다

 

 

Babel을 통한 트랜스파일링 예시

 

- 트랜스파일링 before

// arrowFunction.js
const add = (a, b) => a + b;

class Person {
    constructor(name) {
        this.name = name;
    }

    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

const john = new Person('John');
john.greet();

 

 

- 트랜스파일링 after

// arrowFunction-compiled.js
"use strict";

var add = function add(a, b) {
    return a + b;
};

var Person = function () {
    function Person(name) {
        this.name = name;
    }

    Person.prototype.greet = function greet() {
        console.log("Hello, my name is " + this.name);
    };

    return Person;
}();

var john = new Person('John');
john.greet();

 

polyfill 예시

- Array.prototype.includes Polyfill

Array.prototype.includes 메서드는 ES2015에서 추가된 기능으로, 배열에 특정 요소가 포함되어 있는지 확인합니다. 이 메서드를 지원하지 않는 브라우저에서 사용할 수 있도록 Polyfill을 추가할 수 있습니다.

// Array.prototype.includes Polyfill
if (!Array.prototype.includes) {
    Array.prototype.includes = function (value) {
        return this.indexOf(value) !== -1;
    };
}

위 Polyfill은 Array.prototype.includes가 존재하지 않을 경우, indexOf 메서드를 사용하여 주어진 값이 배열에 포함되어 있는지 확인합니다.

- fetch polyfill

fetch API는 네트워크 요청을 수행할 때 사용되며, 이를 지원하지 않는 브라우저를 위해 whatwg-fetch 라이브러리를 사용하여 Polyfill을 적용할 수 있습니다. 이 라이브러리는 GitHub에서 제공하며, 간단하게 사용할 수 있습니다.

<!-- HTML에서 Fetch Polyfill을 사용하기 위한 CDN 링크 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/3.0.0/fetch.min.js"></script>

위 코드를 HTML 파일에 추가하면 fetch API를 지원하지 않는 브라우저에서도 이 API를 사용할 수 있게 됩니다.

 

 

그 밖에도 can i use에서 특정 css나 api 등이 어떤 브라우저에서 지원 되는지 확인 할 수 있습니다.

브라우저 퍼포먼스

1. 브라우저 성능의 중요성

  • 사용자 경험: 빠른 로딩 시간과 원활한 상호작용은 사용자 경험에 큰 영향을 미칩니다. 느린 페이지는 사용자의 이탈률을 증가시키고, 브랜드에 대한 신뢰도를 낮출 수 있습니다.
  • SEO: 검색 엔진 최적화(SEO)에도 브라우저 성능이 중요한 역할을 합니다. Google은 페이지 속도를 중요한 순위 요소 중 하나로 간주하며, 느린 웹 페이지는 검색 결과에서 더 낮은 순위를 받을 수 있습니다.
  • 전환율: 전자상거래 웹사이트의 경우, 페이지 로딩 속도가 전환율에 직접적인 영향을 미칩니다. 페이지가 느릴수록 고객이 구매를 완료할 가능성이 줄어듭니다.

 

2. 브라우저 성능 개선 전략

 

1. 리소스 최적화

  • 이미지 최적화: 이미지 크기를 줄이고, WebP와 같은 최신 형식을 사용하여 페이지 로딩 속도를 개선합니다. 또한, 이미지에 대한 지연 로딩(lazy loading)을 적용하여 사용자가 필요할 때만 로드하도록 합니다.
<img src="example.jpg" loading="lazy" alt="Example Image">

 


요즘 많이 쓰이는 Next.js의 경우는 이미지 최적화를 위한 내장 컴포넌트를 제공합니다. 이 컴포넌트를 사용하면 자동으로 크기 조정, WebP 포맷 지원, 그리고 지연 로딩을 구현할 수 있습니다.

import Image from 'next/image';

const MyImage = () => (
    <Image src="/image.jpg" alt="My Image" width={500} height={300} />
);



  • CSS 및 JavaScript 압축: CSS 및 JavaScript 파일을 압축하여 파일 크기를 줄이고, 다운로드 속도를 개선합니다. 여러 파일을 하나의 파일로 병합하여 HTTP 요청 수를 줄이는 것도 좋은 방법입니다.

2. 비동기 로딩

  • JavaScript 비동기 로딩: async 또는 defer 속성을 사용하여 스크립트를 비동기적으로 로드하여 페이지의 렌더링 차단을 방지합니다.
<script src="script.js" async></script>

 

3. 캐싱 활용

  • 브라우저 캐싱: HTTP 캐싱을 설정하여 사용자가 페이지를 다시 방문할 때 리소스를 로컬에 저장된 캐시에서 불러올 수 있도록 합니다. 이를 통해 서버 요청을 줄이고 로딩 시간을 단축할 수 있습니다.
Cache-Control: public, max-age=31536000

 

요즘 많이 쓰이는 react-query는 클라이언트 측 데이터 fetching 및 caching을 관리하기 위한 강력한 도구로, 웹 애플리케이션의 성능을 최적화하는 데 매우 유용합니다.

 

코드 예시

import React from 'react';
import { useQuery } from '@tanstack/react-query';

const fetchUsers = async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json();
};

const UserList = () => {
    const { data, error, isLoading } = useQuery(['users'], fetchUsers, {
        staleTime: 5000, // 5초 동안 데이터가 신선하다고 간주
        cacheTime: 10000, // 10초 동안 캐시된 데이터가 유지
    });

    if (isLoading) return <div>Loading...</div>;
    if (error) return <div>Error fetching data: {error.message}</div>;

    return (
        <ul>
            {data.map(user => (
                <li key={user.id}>{user.name}</li>
            ))}
        </ul>
    );
};

export default UserList;

 

코드 설명

  • fetchUsers 함수: 이 함수는 사용자의 데이터를 API에서 가져오는 비동기 함수입니다. 에러 처리를 포함하여 네트워크 요청을 수행합니다.
  • useQuery 훅: 이 훅은 데이터를 fetching하고 상태를 관리하는 데 사용됩니다. 첫 번째 인자로 쿼리 키를 전달하고, 두 번째 인자로 데이터를 fetching할 함수를 전달합니다. 선택적 인자로는 캐싱 전략을 설정할 수 있습니다.
    • staleTime: 데이터를 신선하다고 간주하는 시간 (밀리초 단위)입니다. 이 시간 동안은 같은 쿼리를 다시 요청하지 않습니다.
    • cacheTime: 쿼리의 캐시된 데이터를 유지하는 시간입니다. 이 시간이 지나면 캐시된 데이터가 제거됩니다.

프론트엔드 표준 준수의 장점

 

프론트엔드 표준 준수는 웹 개발의 핵심입니다. HTML과 CSS의 올바른 사용은 일관된 사용자 경험을 제공하며, 크로스 브라우징을 통해 다양한 환경에서도 접근성을 보장합니다.

 

웹 퍼포먼스 최적화는 로딩 시간을 단축시켜 사용자 만족도를 높이고, 웹 접근성 향상은 모든 사용자가 정보에 공평하게 접근할 수 있도록 합니다. 이는 법적 책임을 넘어 기업의 사회적 책임으로 이어집니다.

 

또한, 이러한 표준은 개발자에게도 효율성을 제공합니다. 명확한 구조와 코드 규칙은 유지보수성을 높이고, 팀 협업을 원활하게 합니다.

결국, 프론트엔드 표준 준수는 사용자와 개발자 모두에게 이익을 주며, 더 나은 웹 생태계를 만드는 데 기여합니다.

 

Reference

https://developer.mozilla.org/ko/docs/Web/Accessibility/Understanding_WCAG

 

웹 컨텐츠 접근성 지침 이해하기 - 접근성 | MDN

이 문서에서는 W3C 웹 컨텐츠 접근성 지침 2.0 또는 2.1(이 글에서는 WCAG)에 설명된 권장 사항들을 준수하기 위한 단계들을 이해하는 데에 도움이 되는 간략한 설명을 제공합니다.

developer.mozilla.org

 

'Front-End' 카테고리의 다른 글

커스텀훅을 이용해 리액트 modal 깔끔하게 다루기  (0) 2024.10.26
yarn plugin으로 우아하게 로깅하기  (0) 2024.10.20
WebRTC의 동작원리  (0) 2024.09.25
프론트엔드의 역사  (0) 2024.09.22
프론트엔드 코딩 컨벤션 리마인드  (0) 2024.05.22
'Front-End' Related Articles more
Comments