여러가지 활동/프리온보딩 프론트엔드 챌린지

UI/UX와 반응형 웹

홍수성찬 2024. 4. 15. 17:57

2024년 4월 13일 프론트엔드 요약정리

 

UI/UX

  • UI(User Interface): 사용자가 서비스를 이용할 때 마주하는 디자인 요소 (아이콘, 폰트, 간격 등)
  • UX(User Experience): 디자인 요소를 바탕으로 만들어진 서비스를 사용할 때 사용자가 겪는 경험 및 감정

 

UI/UX가 중요한 이유

  • 경쟁력 강화
    • 사용자들은 시장의 다양한 옵션 중에서 가장 사용하기 쉽고 유용한 제품을 선택
    • UI/UX 디자인을 통해 경쟁 서비스와의 차별화 + 더 많은 사용자를 유치
  • 브랜드 가시성 향상
    • 잘 디자인된 UI는 사용자에게 브랜드 정체성을 각인
  • 사용자 개선
    • 직관적인 인터페이스, 명확한 플로우, 효과적인 정보 구성 등을 통해 사용자들은 쉽게 서비스 이용
  • 비즈니스 성과 향상
    • 사용자들의 만족도와 충성도가 높아지면 매출 증가 및 고객 유지율 향상에 유리

 

UX의 사용성(Usability)

  • 제품을 사용하기 편한지 질문
  • UX에서 큰 비중을 차지하며 사용자가 특정 목적을 달성에 도움
  • "사용자 - 서비스" 간 상호작용을 통해 비로소 특정 가능 → 실제 동작 전 정확하게 파악 불가
  • 프론트엔드에서 서비스를 충분히 공감하지 못한다면 사용성은 개선 X
  • 로딩스피너, 무한스크롤과 같은 기능 뿐만 아니라, 리팩토링, 새로운 라이브러리 도입을 하는 것도 큰 관점에서 UX 개선

 

반응형 웹

하나의 웹 사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹 페이지 접근 기법

 

반응형 웹에 필요한 개념

반응형 레이아웃 설계

모바일 세로 (480px) 모바일 가로/태블릿 세로 (768px) 태블릿 가로/노트북 (1024px, 1280px) 데스크탑

 

웹과 모바일 페이지 사이에는 정보 제공력의 차이가 분명히 존재하며, 모바일 레이아웃에서는 특정 영역을 숨기거나 애니메이션에 따라 다르게 표현

 

반응형 웹 장점

  • 간편한 유지보수
    • 과거와 달리 모든 디자인을 하나의 파일에서 작업하여 유지보수 간편
  • 모바일 점유율 증가
    • 국내 스마트 기기 보급 및 사용률 90% 이상으로 모바일로 인터넷을 이용하는 일은 자연스러움(UX)
  • 마케팅 유리
    • 기기에 맞게 최적화된 구조로 웹 사이트를 변경해 보여줌으로써 전달하고자 하는 내용을 효과적으로 전달 가능
    • 여러가지 웹 사이트를 만들지 않아도 되어 비용 측면에서도 상당한 효과 가능
  • 검색 엔진 최적화(SEO) 가능
    • 동일한 웹 사이트가 두 개의 주소를 갖는다면 이를 정확하지 않은 정보로 판단하여 검색 결과에서 제외

 

픽셀 & Viewport & Meta Tag

픽셀(px)

화면을 구성하는 가장 기본이 되는 단위로 보통 'Picture Element' 혹은 '화소'

 

예. 1024x768 해상도 - 수평 1,024개 픽셀, 수직 768개 픽셀이 배치되어 786,432개의 픽셀로 화면 그림

 

Meta Tag - Viewport

웹 페이지에서 사용자의 보이는 영역을 의미하며, 웹 페이지가 뷰포트보다 크면 스크롤하여 나머지 영역 나타냄

<head>
	...
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	...
</head>

 

반응형 레이아웃 설계

가변 그리드

  • 웹 사이트 제작 시 화면의 크기에 관계 없음
  • 자유롭게 늘어나거나 줄어들도록 조절
  • 'px'이 아닌 '%'와 같은 비율 단위 사용
  • '%' 사용 시 부모 너비로 크기 결정
  • (자식 요소의 너비 / 부모 요소의 너비) * 100

 

CSS - 미디어쿼리

  • 미디어 유형과 미디어 특성을 기반으로 동작
  • 유형: 스크린, 프린터, 스피커 등
  • 특성: 속성, 상태, 너비, px 밀도 등
  • 디바이스가 화면 너비 감지
  • 화면 너비에 따라 다른 레이아웃 구현
  • @media 사용

 

Link

  • HTML 의 'link 태그'로 설정
  • CSS 파일을 화면 너비 별로 분리
  • 서로 다른 CSS 참조
  • <link rel="stylesheet" media="(max-width: 480px)" href="mobile.css" />

 

적응형 웹

모바일, 데스크탑 등 각 디바이스 별로 독립적인 탬플릿을 만들어 각각 맞는 페이지를 제작 후 랜딩되는 웹

 

서버사이드에서 클라이언트의 정보를 미리 받아 정해진 화면일 출력하는 것

즉, 클라이언트가 모바일인지 웹 사이트인지 파악 후 리소스를 선택하고 그에 맞는 화면을 나타내주는 형태

 

검색엔진 최적화(SEO)

검색엔진이 어해하기 쉽도록 홈페이지의 구조와 페이지를 개발하여 검색 결과 상위에 노출될 수 있도록 하는 작업

기본적으로 특정 검색어를 웹 페이지에 적절하게 배치하고 다른 웹 페이지에서 링크가 많이 연결되도록 개발

 

→ 검색 엔진이 쉽게 이해할 수 있는 형태로 웹 페이지를 구성하는 과정

 

검색엔진 최적화 방법 10가지

  1. 문법에 맞는 HTML 작성
  2. 구체적인 페이지 제목 생성
  3. 메타 태그 활용
  4. 이미지에 'alt 속성' 기재
  5. 이미지 맵에 중요한 링크 사용 제거
  6. 플래시 전용 페이지 제거
  7. 'anchor 태그'를 활용한 적절한 키워드 배치
  8. 여러 개의 페이지로 나누어진 콘텐츠 검색 최적화
  9. 모든 페이지가 유입 페이지가 되도록 사이트 구성
  10. 'HTTPS' 사용 권장

 

React에서 SEO가 어려운 이유

  1. 검색엔진의 크롤러는 링크를 타고 페이지를 돌아다니며 HTML 파일 읽음
  2. 이러한 작업을 통해 단일 URL마다 색인 생성
  3. 검색 결과로 색인된 페이지 나타냄
  4. SPA는 URL이 한 개지만, 여러 가지 View를 가짐
  5. 이런 경우 다양한 페이지 뷰가 단일한 Meta Data로 보임
  6. 페이지의 뷰는 변해도 페이지의 타이틀과 디스크립션을 변경할 수 없어 사용자 경험 개선 및 검색엔진 최적화가 어려움

 

React에서 검색엔진 최적화

Meta Tag / OG Meta Tag

  • public/index.html의 Meta Tag 추가
  • OG Meta Tag는 SNS에서 공유될 때마다 미리보기 정보 제공

 

Robot.txt (표준문서)

  • 검색엔진 크롤러나 로봇에게 어떤 페이지/디렉토리를 크롤링/색인화하면 되는지 알려주는 파일
  • Public/robots.txt 파일 자동 생성
  • user-agent: 규칙이 적용되는 크롤러 이름 또는 *
  • Disallow: 거부할 디렉토리 혹은 파일 경로
  • allow: 허용할 디렉토리 혹은 경로

 

프레임워크 활용 (React-Helmet)

  • SPA 작동 방식은 'body 태그' 업데이트 → 상대적으로 'head'에 대한 업데이트 X
  • head에는 SEO 영향을 미치는 정보들이 존재 → 페이지마다 달라야 SEO 유리
  • React-Helmet은 유저가 앱을 조작할 때마다 그에 맞는 head 태그 업데이트 필요
  • 페이지마다 제목, 메타 태그 정보 변경 가능
  • 동적으로 내용 추가 시 바뀐 내용을 크롤링 불가 가능성 존재

 

Server Side Rendering

  • Next.js 사용
  • 서버에서 콘텐츠 정보가 담긴 HTML을 넘겨 받아 SEO 유리
  • 페이지에서 'getStaticProps' 혹은 'getServerSideProps'에서 SEO 처리를 위한 값 정의
  • SSR에서 Suspense 정식 지원
    • 비동기 로딩의 필요성을 감지하고 대체 로드 UI 렌더링

 

시도해보기 - 블로그 프로젝트

  • 파일 구조를 페이지 → 컴포넌트 단위로, 기능에 따라 분류

 

  • 'Axios create 메소드'를 사용하여 공통 Api instance 생성 → 공통 URL, header 값 부여

 

  • 'React-helmet-async' 사용하여 meta tag 및 제목 변경 → SEO 고려

 

  • UI/UX 이슈 수정 → 프로필 사진 default image 삽입

 

  • 메인 / 포스팅 작성 / 포스팅 상세 페이지 반응형 고려

 

 

프로젝트 배포 - Vercel

  • Vercel 가입
  • Vercel CLI 설치
    • npm i -g vercel
    • 'Verbal login' 명령어로 로그인
  • 'Vercel' 입력으로 배포 시작

 

아하모먼트!

프론트엔드 개발자에게 요구하는 추가적인 역량

  • React
  • JavaScript
  • HTML
  • CSS(Sass)
  • TypeScript
  • 상태관리 라이브러리
  • 모바일 앱 환경
  • Next.js
  • HTTP
  • API

 

효과적인 학습 방법

수동적 학습방법 (일반적)

  • 강의 듣기, 강의식 교육
  • 읽기
  • 시청각 수업듣기
  • 시범강의 보기

 

능동적 학습방법 (거꾸로 학습)

  • 토론, 토의
  • 실제 해보기, 체험
  • 가르치기, 서로 설명하기

 

나만의 것으로 만드는 방법

  • 남에게 설명할 수 있다면 그 개념을 100% 아는 것
  • 지식을 전달하기 위해서 생각보다 깊은 수준의 이해도가 요구되며, 그 과정 중 놓친 것을 파악 가능
  • How? 블로그
    • TIL(Today I Learn)과 같은 글도 좋지만, 스스로가 누군가에게 가르친다는 교육용 자료를 만든다는 생각으로 글쓰기

 

Q&A

포트폴리오와 이력서

  • 포트폴리오: 내가 만든 것들 + 시각적 자료 → 특별한 양식 없음
  • 이력서: 내가 했던 것을 시간 순으로 요약

 

UI/UX 공부를 위한 서적

  • UX/UI의 10가지 심리학 법칙

 

회사 선택 시 우선 고려사항

  • 사수 여부 > 회사 서비스(규모) > 성장 가능성