내일배움캠프

[내일배움캠프] Day12 - 피그마 활용 심화 1주차 (웹과 앱의 UI 차이)

이응이응시옷 2025. 2. 7. 16:21
728x90

 

 수업 목표

  • 피그마를 더 능숙하게 다루기 위한 배경 지식을 이해할 수 있어요
  • UI디자인에 필요한 심화 이론을 학습하고 적용할 수 있어요

 

  웹 앱
운영체제 제한 없음 안드로이드와 iOS앱 별도로 준비
접근성 웹브라우저에 주소만 입력하면 가능 앱마켓에서 설치해야 함
업데이트 난이도 업데이트하기 쉬움 앱마켓 심사를 통과해야 가능
인터렉션 및 UI 웹브라우저와 충돌하기 않는 선에서 가능 다양하게 사용할 수 있음
성능 다양한 기기에서 제약없이 쓸 수 있지만 그만큼 카메라, GPS, 사진 보관함 들 성능면에서 떨어짐 기기에 특화된 기능을 사용할 수 있지만 다양한 디바이스를 지원하게 만드는 것이 어려움
개인 푸시나 알림을 제공하기 어려움 푸시 메시지를 보낼 수 있음

1. 웹과 앱의 UI 차이점

1) 페이지 이동 방식

  • 웹: 주소창에 URL을 입력하면 원하는 페이지로 이동할 수 있음.
  • 앱: 사용자가 임의로 주소를 입력할 수 없으며, 정해진 화면 흐름을 따라 이동해야 함.

2) 뒤로 가기 기능

  • 웹: 브라우저의 기본 제공 기능으로 자유롭게 이전 페이지로 이동 가능.
  • 앱: 일반적으로 화면 상단의 아이콘이나 버튼을 눌러 이동해야 함.

3) 주요 메뉴 이동 방식

  • 웹: 주로 화면 상단에 주요 메뉴가 배치됨.
  • 앱: 하단 탭 바(Navigation Bar)를 고정하여 주요 메뉴로 빠르게 이동할 수 있도록 설계됨.

4) 바텀 시트(Bottom Sheet)

  • 바텀 시트는 화면 하단에서 올라오는 형태의 UI.
  • 앱: 다양한 용도로 활용되며, 드래그하여 닫을 수도 있음.
  • 웹: 바텀 시트 사용이 어렵고, 드래그하여 닫는 동작이 원활하지 않음.

2. OS별 UI 차이점

운영체제(OS)에 따라 UI 요소에도 차이가 있습니다.

1) iOS: 홈 인디케이터(Home Indicator)

  • iPhone의 홈 인디케이터는 하단에 고정된 UI 요소들과 겹치지 않도록 신경 써야 함.
  • Apple 로그인은 다른 로그인 수단과 동일한 중요도로 보여야 함.

2) Android: 네비게이션 바(Navigation Bar)의 뒤로 가기 버튼

  • 안드로이드 기기에서는 기본적으로 제공되는 "뒤로 가기" 버튼이 존재하여, 앱의 네비게이션 구조와 충돌하지 않도록 설계해야 함.

3. 반응형 vs 적응형 디자인

웹과 앱의 UI 설계에서는 해상도와 디스플레이 크기에 따라 다른 디자인 방식을 적용해야 합니다.

1) 반응형 디자인 (Responsive Design)

  • 해상도의 변화에 따라 실시간으로 화면이 반응하여 레이아웃이 변경됨.
  • 다양한 화면 크기에서 최적화된 사용자 경험 제공.

2) 적응형 디자인 (Adaptive Design)

  • 특정 해상도에 고정된 디자인을 적용.
  • 미리 설정한 화면 크기에 맞춰 UI를 디자인하고, 해상도가 변해도 실시간 조정이 없음.

4. UI/UX 설계를 위한 핵심 개념

UI를 설계할 때 고려해야 할 몇 가지 중요한 개념이 있습니다.

1) 분기점(Break Point)

  • 디스플레이 해상도에 따라 화면을 다르게 보여주는 기준점.
  • 일반적으로 데스크톱, 태블릿, 모바일의 3가지 기준점을 사용.

2) 그리드(Grid System)

  • 디자인을 균형 있게 배치하기 위한 가이드라인.
  • 주로 세로 방향의 기둥(Column)으로 구성되며, 가로선(Row)도 추가될 수 있음.

3) 정보구조도 (Information Architecture, IA)

  • 화면과 정보가 어떻게 연결되는지를 보여주는 설계도.
  • 사용자 경험을 체계적으로 설계하는 데 중요함.

4) 화면 흐름도 (Flowchart)

  • 사용자가 어떤 과정을 거쳐 제품을 이용하는지를 시각적으로 정리한 순서도.
  • UX 설계 단계에서 사용자 행동을 예측하는 데 도움을 줌.

5) 와이어프레임 (Wireframe)

  • 화면과 시나리오를 단순한 형태로 구성한 스케치.
  • 빠른 프로토타이핑이 가능하며, 팀원 간의 아이디어 공유 및 협업을 원활하게 함.

 

[마무리]

 

오늘은 새로운 팀원분들을 만났는데 모두 텐션 너무 좋으시고ㅋㅋ

팀명은 '럭키비키니시티라미수'ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

다음 발제까지 아주 재밌을 것 같다

 

그리고 오늘은 남궁찬양 튜터님 소개도 듣고 새로운 강의도 지급받았다

피그마 활용 심화 강의인데, 기초도 어렵다고 생각하면서 들어서 조금 걱정이 되긴한다

 

17일부터 과제를 준다고 하니 그 전까지 열심히 들어야겠다!

728x90