5화, 반응형 디자인,원티드UI,플랜핏UI개선

프로덕트 디자이너로 성장하기 4일차

2025.06.09(월)
- 1번, 미디엄을 통한 디자인 트렌드 확인
- 2번, 구글 스토어 혹은 VC 인기 서비스 연혁 및 UI 분석
- 3번, 2주에 한번 UI 개선해보기 (UX스터디에서 피드백받고 회고록)

1번, 반응형 디자인
개념 정리부터 실전 적용까지

https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-970de4c16e01

반응형 디자인(Responsive Design) <-> (고정형 디자인(Fixed Design)

: 컴퓨터, 모바일 등 디바이스 크기에 따라 레이아웃이 유연하게 변하는 디자인을 말함. 반면, 고정형 디자인은 디바이스가 바뀌어도 똑같은 픽셀 너비로 사용하는 디자인을 말함.

반응형 레이아웃을 만들기 위해 알아야 하는 용어 : 필드 요소와 *그리드

1. 필드 요소(Field Elements): 텍스트, 이미지 또는 이들의 조합 등 배치 해야하는 디자인 요소들

2. 열(Columns): *콘텐츠의 너비를 구성하는 (위 사진의 경우) 붉은 블록들. 열 개수는 대체로 컴퓨터는 12개, 태블릿은 8개, 모바일은 4개를 사용함. 한 열의 가로 사이즈는 대체로 60-80px 크기를 활용함.

3. 여백(gutter): 열 사이의 공간을 말함. 일반적으로 20px를 사용함. 기기의 너비가 커질수록 여백 너비도 커지지만 고정해도 괜찮음. 개수의 경우, 열이 N개라면 거터는 N-1개임.

4. 측면 여백(Side magine): 콘텐츠 바깥쪽 너비를 말함. 기기가 커질수록 측면 여백도 함께 커짐. 일반적으로 20-30px 크기로 존재함.

5. 중단점(break point): 화면의 크기가 바뀔 때, 레이아웃이나 스타일이 달라져야 하는 전환점임. 예를 들면 컴퓨터에서는 3단 그리드지만 모바일에서는 1단 그리드를 사용하는 등 화면 너비에 따라 레이아웃이 바뀌는 기준선을 말함.

- 그리드: 화면을 디자인할 때, 콘텐츠를 정돈되고 일관적으로 배치할 수 있도록 만든 보이지 않는 가이드라인을 의미함. 예를 들면 디자이너가 콘텐츠를 어디에 얼마나 띄워서 배치할까? 결정할 때, 격자(세로줄/열)기준으로 맞추는 것을 의미함. 그리드의 종류는 다음 4가지가 있음

열: 세로방향줄, 콘텐츠를 배치할 수 있는 기본 단위
거터: 열과 열 사이의 간격, 콘텐츠간 여백
마진: 화면 양 옆 여백, 콘텐츠의 시작/끝 여백
행: 수직 정렬 가이드, 보통 수직 리듬이 필요한 곳에 사용함

- 콘텐츠: 그리드 위에 올려지는 정보/기능 요소. 즉, 필드 요소라고 생각하면 됨. 예를 들면 텍스트(제목,본문), 이미지, 카드, 버튼, 아이콘, 입력창, 리스트 등이 있음. 열 위에 얹어지는 내용물을 말함.

Q. 레이아웃과 그리드의 차이는?

레이아웃이란, 콘텐츠의 전체 배치 구조를 의미함. 즉 뼈대와 같음. 그러나 그리드는 그 레이아웃 안에서 콘텐츠를 정렬하고 배치하기 위한 가이드라인. 쉽게 말하면 레이아웃은 방 구조를 말함. 집 전체에서 어디에 어떤 방을 둘지, 큰 틀을 짜는 것 (예: 왼쪽 사이드바 + 상단 헤더 + 오른쪽 콘텐츠 영역) 그리고 그리드는 벽돌 가이드 선을 말함. 그 방 안에서 콘텐츠(가구)를 어디에, 어떻게 정렬할지 정해주는 ‘눈에 안 보이는 줄자’

반응형 디자인을 만들 때 규칙 4가지

1. 필드 요소는 열 위에 위치해야함. 즉, 각 콘텐츠는 열(사진의 빨간 블록)위에 얹어야 된다는 의미임. 그래야 디바이스가 바뀌어도 일관된 레이아웃을 유지할 수 있음. 대체로 6*6, 3*4*5등 특정 열의 개수로 분할해서 콘텐츠를 배치함. 거터 위에도 위치하면 안됨.

2. 필드 요소 안에 있는 내부 요소들은 굳이 그리드를 딱 맞출 필요는 없음. 오히려 내부 요소까지 그리드를 맞추다가 텍스트 가독성이 떨어지는 등의 문제가 발생할 수 있으니 부모 요소만 맞춰주면 됨. 내부 요소들의 일관성을 주고 싶다면 *패딩을 활용함.

- 패딩: 내부 콘텐츠 양 옆 여백을 말함. 예를 들면, 버튼 안의 텍스트와 버튼 테두리 사이의 여백. 마진은 외부 콘텐츠의 양옆 여백을 말함. 예를 들면 카드 전체 좌우 여백 등. 즉 쉽게 말해서 카드 UI안에 버튼이 있다고 했을 때 카드 여백을 고려하면 마진, 버튼 여백을 고려하면 패딩이라고 생각하면 됨.

3. 열을 마진으로 사용하지 않기. 일부, 사이드 마진을 주지 않고 그냥 열 2개를 묶어서 사용하는 경우가 있는데 이럴 경우 디바이스 변경에 따라 콘텐츠 폭이 이상해지고 그리드가 커지는 문제가 발생할 수 있음.

4. 예외적으로 열에 맞추지 않는 사례가 있음. 주로 배경 이미지, 색 등 왼쪽 끝부터 오른쪽 끝까지 이어지는full bleed 요소(화면 전체 꽉 차는 요소)를 배치하는 경우는 사용자 상황에 따라 침범해도 괜찮을 수 있음.

Q. 구체적으로 반응형 디자인 어떻게 만들라는 거임?

디바이스별 예시 그리드 기준표. 상황에 맞게 변경해도 괜찮음

사용방법:
만약, 데스크탑 대형, 대스크탑 일반, 모바일 대형을 반응형으로 만들것임. 즉 데스크탑에서 모바일대형으로 이동할 때, 유연하게 디자인이 변경하도록 제작할 것임. 그렇다면, 각 중단점인 1440px, 1280px, 414px 3개만 UI를 제작하면 됨. 반응형 레이아웃은 중단점 기준으로 명확한 디자인이 필요하고 약간의 변동은 개발자가 비율,여백 등을 자동 대응하도록 구현가능함. 반응형 디자이너는 디바이스 상황과 사용자를 고려하여 중단점에서 UI를 구축하면 됨.

- 필드요소 배치영역: 제목, 본문 텍스트, 이미지 등 레이아웃에 얹을 요소들을 배치하는 영역을 말함. 그리드영역을 의미하는 것임. 콘텐츠를 정렬하고 배치하기 위한 가이드라인 '영역'임. 계산 방법은 (열 너비 × 열 수) + (거터 너비 × (거터 수) 이때 거터 수는 열보다 하나 적으니까 (열 너비 × 열 수) + (거터 너비 × (열 수-1)로 계산해도 됨.

---

2번, 원티드 모바일 UI

---

3번, 플랜핏 UI 수정하기
: 홈에서 '맞춤'경험 증진하기

문제 발견 하기 1

문제 발견 하기 2

15명중 14명의 사용자가 운동 콘텐츠에서 불만을 호소함. 따라서 운동 영역의 전체 콘텐츠 흐름을 살펴봄

최종적으로 메인에서 맞춤화 경험을 조금 더 살려보기로 함

1번, 플랜을 유연하게 변경할 수 있는 필터칩을 꺼냄

맞춤형이란? 사용자의 특성, 상황, 선호에 맞게 제작한 형태를 의미함. 기존에는 온보딩 과정에서 고정된 선택지를 바탕으로 플랜을 추천해줬음. 그러나 제한적인 구성과 기준에 맞춰진 플랜은 맞춤 느낌을 제공하기에 다소 아쉬운 부분이 있었음. 따라서, 기존의 구성을 따라가되 필터칩으로 유연하게 변경할 수 있는 구성을 제공함. 모두에게 같은 고정적인 플랜을 주는 것이 아닌 그 날의 상태에 따라 강도, 부위 등을 맞춤 변경할 수 있도록 선택지를 더욱 다양화 하는 것임. 다이어트 목적이더라도, 웨이트로 변경도 해보면서 목표를 달성하되 유연성을 조금 더 부여넣고자 함.

2번, 운동 장비 기능은 상단으로 배치해서 강조함

사용자가 다니고 있는 헬스장 기구들로 운동을 추천해주는 기능임. 맞춤형인데 이것이 하단에 있어서 강점이 제대로 살지 못했다고 생각함. 따라서 맨 상단으로 변경함.

3번, 그 외 운동 영역을 사용자 이름으로 변경, 새 루틴 시작은 캐러설로 옮김

하단 네비게이션바에 운동 영역을 알려주는 구성이 있는데 상단까지 있을 필요가 없다고 느낌. 따라서 사용자 이름을 달아 개인 공간임을 나타냄. 또한 비어있는 운동이라는 워딩이 어떤 기능인지 연상이 안됨. 이에 따라 추천된 콘텐츠를 넘기며 마음에 들지 않을 경우, 스스로 설정할 수 있도록 구성함.

UX스터디 피드백 (2025.06.04(수))
- 실제 운동을 하는 사용자의 경우 운동 부위 보다는 DAY A,B가 더 사용하기 편함. 패키지로 상체,하체 부위들을 선택할 수 있는 구성이 있으면 좋을 것 같다.