📃 프론트엔드 인터뷰 문제 답해보기 #2 DOC TYPE과 다국어 콘텐츠

Jake Seo·2020년 6월 2일

인터뷰-문제-답해보기

목록 보기

2/10

📃 프론트엔드 인터뷰 문제 답해보기 #2 DOC TYPE과 다국어 콘텐츠

Prologue

깃허브를 돌아다니다가 예전에 프론트엔드 개발자 인터뷰 질문이라는 레포지토리를 본적이 있다. 사실 그 당시에는 그냥 스타만 눌러놓고 큰 관심이 없었지만 지금부터 하나씩 풀어보려 한다.

물론 많은 답들이 이미 이 레포지토리에 작성되어 있긴 한데, 작성되지 않은 것들도 있고 내 답이랑 모범답안을 비교하는 것도 좋을 것 같아서 한번 풀어보려 한다.

문제 선정

기존 레포지토리에는 문제의 분류가 아래와 같이 되어있다.

General Questions
HTML Questions
CSS Questions
JS Questions
Accessibility Questions (external link)
Testing Questions
Performance Questions
Network Questions
Coding Questions
Fun Questions

매일 1가지씩 돌아가며 풀 건데, General Questions 항목에서 너무 일반적인 문제는 풀지 않을 것이다. 너무 일반적인 문제의 정의는 사람마다 답이 다를 수 있는 문제이다.

이를테면...

~~What did you learn yesterday/this week? (어제/이번주에 무엇을 배웠나요)~~
~~What excites or interests you about coding? (무엇이 당신을 코딩하고 싶게 만드나요?)~~
~~What is a recent technical challenge you experienced and how did you solve it?(최근에 겪은 기술적인 어려움과 그것을 어떻게 해결했는지 알려주세요)~~

이러한 것들은 답변하지 않는다. 이런 문제는 그때그때 답이 달라질 수 있다.

참고

나의 답변은 높은 확률로 틀릴 수도 있으며, 아니면 맞게 가다가 중간에 이상한 길로 빠질 수도 있다. 댓글에 자신만의 답을 올려주면 매우 고마울 것 같다.

Q1: HTML에서 DOCTYPE은 어떤 역할을 하는가?

원문 : What does a doctype do?

DOCTYPE은 document type의 약어이다. DOCTYPE은 HTML을 나타내주는 DTD(Document Type Definition)로 볼 수 있다.

DTD란 일반적으로 XML에서 문서의 스키마를 정의하는데 쓰인다. 문서의 스키마를 정의한다는 것은 이를테면 이 문서 내부에 사용될 수 있는 엘리먼트와 어트리뷰트를 정의하는 것이라 할 수 있다. 스프링 프레임워크에서는 XML로 Config를 잡아주는 경우가 많은데 이 경우 DTD가 최상단에 선언되는 것을 흔히 볼 수 있다.

보통 HTML 최상단에 작성하는 <!DOCTYPE html>은 이 문서가 html의 형식을 따른다는 것을 미리 알려주어서 브라우저가 quirks mode로 빠지지 않게 하는 역할이다.

여기서 quirks mode란 브라우저가 구시대에 만들어진 웹을 렌더링하기 위한 기능이라고 보면 된다. 인터넷 익스플로러 9 혹은 그 이전 버전에서는 DOCTYPE이 정의되기 이전에 XML 선언부나 무엇이든 작성된 상태라면, 해당 문서를quirk mode로 렌더링하기 때문에 주의해야 한다.

레퍼런스

https://en.wikipedia.org/wiki/Quirks_mode
https://developer.mozilla.org/ko/docs/Web/HTML/Quirks_Mode_and_Standards_Mode
https://developer.mozilla.org/ko/docs/Glossary/Doctype

Q2: 다국어로 만들어진 컨텐츠 페이지를 어떻게 제공할 것인가?

원문 : How do you serve a page with content in multiple languages?

먼저, 다국어 페이지의 일반적인 목적은 '다양한 국가에서 들어오는 이용자들에게 각 국가에 맞는 컨텐츠를 보여주는 것에 있다.'라고 가정하겠다.

이용자가 우리에게 제공하는 최소한의 정보로 그들의 국가를 파악하고 그 국가에 맞는 언어로 페이지를 보여줄 수 있으면 그게 최상일 것이다.

그렇다면 2가지가 잘 되어야 하는데, 첫번째로는 이용자의 국가를 판별하는 것, 두번째는 다국어로 된 컨텐츠들을 체계적으로 제공하는 방법이 있을 것이다.

이용자의 국가를 판별하는 방법

가장 일반적으로는 HTTP 요청 헤더의 Accept-Language 정보 또는 IP로 지역을 판단하는 방법이 있을 수 있다.

단, IP로 지역을 판단하는 것을 메인으로 삼는 것은 반드시 지양해야 한다. 일반적으로 어렵고 신뢰도가 낮다.

물리적으로 해당 국가에 거주하는 사람이어도 다른 언어를 사용하는 사람도 있을 수 있기 때문에 반드시 수동으로도 언어 페이지를 변경할 수 있도록 해주어야 한다.

다국어 컨텐츠를 체계적으로 제공하는 방법

웹 접근성

먼저, 웹 접근성을 위해 HTML의 속성 중 lang에는 해당하는 언어에 맞는 값을 집어넣어야 한다. 예를 들면 한국어는 ko와 같은 값을 넣어야 하며 영어는 en과 같은 값을 넣어야 한다.

이러한 설정은 시각장애인들에게 웹 화면을 읽어주는 웹 리더가 올바르게 동작할 수 있도록 돕기도 한다.

i18n

다국어 컨텐츠를 언어별로 제공할 때는 i18n으로 제공하는 것이 일반적이라고 생각한다. 각 언어별 json 파일(ko.json, en.json, jp.json과 같은 파일)을 구성하고 i18n 라이브러리를 이용하여 언어별 페이지를 제공한다.

언어별 차이에 대한 주의사항

텍스트를 포함한 이미지를 사용하는 것에 대한 주의가 필요하다. 이미지에 텍스트가 포함되면 언어별로 그 이미지에 대한 텍스트를 수정하는 작업은 시간이 매우 많이 필요한 작업이 된다.
글자 수 제한이 필요하다. 종종 한글이나 한자로 짧게 표현되는 글자도 영어나 다른 외국어로 표현하면 길게 표현되어야 하는 경우가 있다.
문화권별 색상에 대한 이해가 다르다. 이를테면 중국에서는 빨간색이 좋은 색으로 쓰이는 반면에, 다른 국가에서는 안 좋은 의미를 가질 수 있다.
날짜와 통화 형식이 다르다. 한국은 2020년 6월 2일과 같은 형식으로 표기하지만, 영어권에서는 일반적으로 June 2 2020과 같은 형식으로 표기한다.
섣불리 문자열을 concat해서는 안된다. 이를테면 "오늘의 날짜는" + ${date} + "입니다"와 같은 접근방식은 좋지 않다. 언어마다 명사 동사 등의 위치가 다르다.
언어를 읽는 방향이 다를 수 있다. 전통적인 일본어는 위에서 아래로, 오른쪽에서 왼쪽으로 읽기 때문이다.

SEO를 고려한 다국어 설정

google을 가정

언어 버전별로 다른 URL을 사용한다. 크롤러는 요청 헤더에 Accept-Language를 설정하지 않고 요청을 전송하기 때문이다. 이를테면 example.com/kr, example.com/en처럼 지정하는 것인데, 가장 최상의 방법은 example.kr과 같이 국가별 도메인을 지원하는 것이다.
한 페이지에 여러 언어를 동시에 사용하는 것을 자제한다. 크롤러는 lang속성과 URL을 통해 언어를 알아보기보다 콘텐츠 내용이 어떤 언어로 표시됐는지에 집중한다.
검색엔진 사이트에 다국어 페이지 등록 요청을 한다. 내 페이지에서 제공되는 언어가 이렇고 어떤 도메인을 통해 제공된다라고 알릴 수 있다.
페이지의 헤드 태그 내부에 <link rel="alternate" hreflang="ko" href="example.kr" />와 같이 hreflang을 제공하여 내가 제공하는 언어가 어떤 것이 있는지 명시할 수 있다.

레퍼런스

https://support.google.com/webmasters/answer/189077
https://support.google.com/webmasters/answer/182192?hl=ko
https://github.com/yangshun/front-end-interview-handbook/blob/master/contents/kr/html-questions.md#doctype%EC%9D%80-%EB%AC%B4%EC%97%87%EC%9D%84-%ED%95%98%EB%82%98%EC%9A%94

Jake Seo

풀스택 웹개발자로 일하고 있는 Jake Seo입니다. 주로 Jake Seo라는 닉네임을 많이 씁니다. 프론트엔드: Javascript, React 백엔드: Spring Framework에 관심이 있습니다.

이전 포스트

📃 프론트엔드 인터뷰 문제 답해보기 #1 성능 개선

다음 포스트

📃 프론트엔드 인터뷰 문제 답해보기 #3 CSS 선택자 특정성

1개의 댓글

한래

2022년 12월 27일

와 정말 좋은 자료네요.

답글 달기