[기술 면접 준비] UI/UX, Styled Components, Semantic HTML

시작

내가 답변 할 수 있고 어느 정도 이해한 질문 몇가지를 정리해 보았고
다른 레퍼런스와 다른 분들의 내용을 참고해서 작성하기도 했다.

✔️ 질문

UI, UX의 개념과 두 개념의 관계에 대해서 설명해 주세요.

✍️ 답변

UI, UX는 사용자와 상호작용하는 서비스 디자인과 관련된 개념입니다.
UI는 사용자가 직접 조작하는 인터페이스 요소들의 디자인이고
UX는 사용자가 서비스를 사용하는 동안 느끼는 총체적인 경험에 초점을 둔 디자인 입니다.
UI는 UX의 일부분으로 좋은 UX를 만들기 위해서는
사용자들이 인터페이스 요소들을 쉽게 사용할 수 있도록 UI 요소들이 잘 구성되어야 합니다.
따라서 사용자에게 제공할 서비스 제작시 UI, UX 둘 다 고려해야 합니다.

• UI - 버튼, 아이콘, 입력 폼 등
• UX - 인터페이스 요소의 사용성, 성능, 접근성 등

✔️ 질문

Styled Components를 사용해 보면서 느낀 장점을 이야기해 주세요.

✍️ 답변

Styled Components는 JavaScript를 이용해 CSS를 작성할 수 있는 라이브러리 중 하나로 CSS 파일 필요 없이 컴포넌트 단위로 스타일링 할 수 있게 해줍니다.

Styled Components를 사용하면서 느꼈던 장점 중
id, class 이름을 짓는데 고민하는 시간을 소요하지 않아도 되는 점 입니다.

CSS파일로 따로 작성할 때는 id, class이름을 다른 요소와 겹치지 않게 작성해야 했지만
Styled Componentds를 사용하면 컴포넌트 단위로 스타일링 하기 때문에 id, class 속성을 사용할 필요가 없습니다.
또한 CSS class 이름 충돌로 인해 스타일 중첩을 방지할 수 있습니다.

마지막으로 템플릿 리터럴로 작성 되어 컴포넌트의 상태에 따라 동적으로 스타일을 만들 수 있습니다. 예를 들어 컴포넌트의 props 값에 따라 버튼의 배경색, 글자색 등을 변경할 수 있습니다.

CSS-in-JS?

CSS-in-JS는 스타일 정의를 css나 scss 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법

✔️ 질문

Semantic HTML의 필요성을 예시를 들어 설명해 주세요.

✍️ 답변

시맨틱 HTML은 HTML요소가 가진 목적이나 역할이 무엇인지 파악하게 해줍니다.

시맨틱 요소엔 header, footer, main, nav 태그 등이 있습니다.
이전에 사용하던 div, span 태그의 경우로도 충분히 작업할 수 있지만
이 요소들은 의미가 없기 때문에 각 요소가 어떤 역할을 하고 있는지 알 수 없습니다.

시맨틱 요소를 사용할 경우 요소의 이름만 보고 해당 요소가 어떤 역할인지 파악하기 쉽습니다. 이를 통해 개발자간의 소통이 원활해 지고, 검색 엔진 최적화, 웹 접근성 향상 시키는데에도 도움이 됩니다.

내가 생각해본 꼬리 질문...?

검색 엔진 최적화?

검색 엔진은 마크업을 사용한 페이지일 수록 검색 랭킹에 영향을 줄 수 있는 키워드로 간주해 검색 결과에서 상위노출될 경우가 많습니다.

웹 접근성이 뭐야?

불편을 겪고 있는 사람들이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장 하는 것입니다.

그럼 div, span은 언제 사용?

div, span의 경우 특별한 의미가 없는, 목적이 없는 스타일링 목적 등인 경우 사용합니다.

✏️ 마치며

기술 면접 준비는 개념에 대해 어느 정도 알고 있다고 생각하고 글로 정리해 보아도
막상 사람들 앞에서 글 없이 말하려고 하니 제대로 말하지 못하고 외웠던걸 생각해 내려고 하니 시선처리도 애매 했다..

혼자 연습해 보는 시간을 따로 가져봐야 겠다.