시멘틱웹

시멘틱 웹의 개념을 봐보자.

현재의 인터넷에서 리소스에 대한 정보와 자원 사이의 관계를 온톨로지 형태로 표현해서, 기계가 처리하도록 하는 프레임워크 이자 기술.

 

개념상으로는 이해가 너무 어렵다.

우선, 개념 설명에 나온 온톨로지에 대해 이해를 해보자. 

 

온톨로지란?

지식 공학 및 정보 과학 분야에서 사용되는 개념적인 도구로, 현실 세계의 객체, 개념 그리고 그들 간의 관계를 형식적으로 정의하는 것을 의미.

즉, 온톨로지라는 것은 어떠한 개념을 표현하기 위한 도구라고 생각하면된다. 예를 들어보자 자동차를 생각해보자. 자동차라는 개념은 엔진의 힘을 이용하여 바퀴를 굴러가게하여, 땅위를 움지기게 하는 탈 수 있는 것으로 개념이 표현이 된다. 

조금 더 자세히 파보면, 엔진 + 바퀴를 통해서 개념을 표현한다. 이처럼 엔진이라는 객체, 바퀴라는 객체 이 사이의 관계를 통해서 자동차라는 개념을 표현한다. 이러한 개념을 정의하는 것을 온톨로지라고 한다.

위의 예제에서 봤듯이 온톨로지는 다음과 같은 요소로 구성된다.

 

1. 개체 : 세상에서 실제로 존재하거나 추상적으로 정의된 것.

2. 속성 :  개체의 특성이나 특징을 나타냄.

3. 관계 : 두 개체 간의 연결이나 상호 작용을 나타냄.

 

온톨로지는 이러한 개체, 속성, 관계 등을 형식적으로 정의하고, 이들 간의 의미론적인 관계를 설명하는 도메인에 대한 지식을 표현을 한다. 표현하는 방식은 RDF, OWL이 존재한다. 

 

RDF ( Resource Description Framework ) 

월드 와이드 웹을 위한 메타데이터 모델로서, 정보를 웹상에 표현하고 교환하는데 사용한다. RDF는 자원과 그 자원 간의 관계를 설명하기 위한 표준적인 방법을 제공한다.

주어, 동사, 목적어로 이루어진 삼중 구조를 가진다.

1. 주어 : RDF문장의 주체로, 특정 개체나 개념을 나타냄. 

2. 동사 : 주어와 목적어 사이의 관계를 정의

3. 목적어 : 주어와 관련된 개체나 값.

 

OWL ( Web Ontology Language )

웹 상의 정보를 기술하고 표현하는 데 사용되는 컴퓨터 과학 분야의 표준 언어이다. 정보를 계층적이고 구조화된 방식으로 표현하여 컴퓨터가 정보를 더 잘 이해하고 처리할 수 있도록한다.

OWL은 RDF의 확장으로 설계되었으며 RDF의 데이터 모델을 기반으로 하고 있다. RDF의 삼중 구조를 기반으로 더 상사하고 이론적으로 표현한다. 클래스, 속성, 개체 등의 개념을 사용한다.

 

 

다시 돌아가 시멘틱 웹에 대한 개념을 곱씹어보자.

광범위한 웹에 수많은 정보가 존재하고, 퍼져있는 정보를 명확하게 표현하고 이를 찾아내기 위해 나온 개념이라고 생각이 든다. 

시멘틱 웹의 목표는 웹 상에서 존재하는 다양한 정보를 이론적으로 이해하고 연결하여 더 많은 지식을 추출하고 활용하는  것이다 .이를 통해 웹 상의 정보를 더 효율적으로 검색하고 분석할 수 있다.

 

그렇다면 프런트엔드 개발자로써 시멘틱 웹을 바라봐보자.

내가 개발하고 있는 웹은 누군가에게 정보를 전달하고자한다. 이를 효율적으로 제공을 하고자한다면 시멘틱 웹의 기준을 따라줘야한다. 

어떤 것들이 있을까?

1. HTML의 마크업을 활용한다. 정보를 읽고자 하는 주체는 검색 엔진이다. 기계가 우리의 웹에 접근하여 이해하도록 하기 위해서는 정확하게 개발자가 표현을 해줘야한다.

2. 웹표준 준수

- css, html의 표준을 준수

- 크로스 브라우징 

- 웹 접근성 준수

 

크로스 브라우징에 대해 조금 더 살펴보자.

브라우저의 종류는 매우 다양하다. 크롬, 파이어폭스, 엣지, 사파리 등.. 

다양한 브라우저에서 우리가 만들고 있는 웹은 동일하게 보이고 작동하게 해야 사용자 입장에서 더 좋은 접근성으로 본다. 어떤 브라우저에서는 UI이가 다르고 기능이 안되고 이렇게 되면 사용자마다 다른 경험을 제공하게 될 것이다.

이를 위해 어떤 작업을 해줘야할까?

1. 브라우저 테스트 : 가장 간단 하면서 꼭 필요한 것이다. 모든 브라우저를 한번씩 체크를 해봐야한다.

2. CSS 리셋

3. 폴리필 사용 : 오래된 브라우저에서 지원하지 않는 기능을 변경해주는 라이브러리나 플러그인. 즉, 버전에 따라 호환이 안되는 부분을 폴리필이 이를 호환되게끔 해주는 역할을 한다. 이로써 모든 버전의 브라우저를 호환하도록 도와준다.

 

CSS Reset에 대해 조금더 살펴보자.

웹 브라우저의 기본 스타일을 초기화하거나 재설정하여 모든 브라우저에서 일관된 시작 지점을 제공하는 것이다. 모든 브라우저는 기본적으로 자체적인 스타일 시트를 가지고 있다. 이렇기 때문에 기본적으로 아무 작업을 안한 상태에서 다른 브라우저를 들어가보면, 폰트가 다르는 등의 UI가 다르다는 것을 알 수 있다. 

리셋 방법은 아래와 같다.

1. 외부 CSS 리셋 파일 사용:
   • 외부 CSS 리셋 파일을 다운로드하거나 직접 작성합니다. => Eric Meyer's CSS Reset이나 Normalize.css 외부 리셋 파일 존재.
   • 리액트 앱의 public 폴더에 해당 CSS 리셋 파일을 포함시킵니다.
   • index.html 파일에 외부 CSS 리셋 파일을 <link> 태그를 사용하여 포함시킵니다.
   • 이렇게 하면 모든 리액트 컴포넌트에서 CSS 리셋이 적용됩니다.
2. CSS-in-JS를 사용하여 리셋 스타일 적용:
   • CSS-in-JS 라이브러리 중 하나인 styled-components, emotion 등을 사용하여 CSS 리셋 스타일을 직접 컴포넌트에 적용할 수 있습니다.
   • 스타일드 컴포넌트를 사용하여 글로벌 스타일을 적용하거나, 특정 컴포넌트 내부에서 스타일을 지정할 수 있습니다.
   • 이 방법은 CSS 파일을 외부로 분리하지 않고 자바스크립트 내에서 스타일을 관리하기 때문에 유연성이 높습니다.

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  /* CSS 리셋 스타일 */
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    /* 기타 리셋 스타일 */
  }
`;

const App = () => {
  return (
    <>
      <GlobalStyle />
      {/* 리액트 컴포넌트들 */}
    </>
  );
};

export default App;

 

이와 같이 프런트엔드 개발자는 위와 같은 준수사항을 따르면서 개발을 하여 SEO에 노출이 잘 되도록 노력해보자.