안녕하세요, 주-주스 입니다! 🍹
✩๑⁰̷̴͈⌔⁰̷̴͈๑✩
✺!~ 캠프 15일차 ~!✺
₊·*◟(⌯ˇ- ˇ⌯)◜‧*・
오늘은!!
피그마 ADVANCED컴포넌트 개념에 대해 이해하고 활용한 내용을 포스팅 하겠습니다!
반응형 디자인 vs 적응형 디자인
1. 반응형 디자인 (Responsive Design)
하나의 코드와 레이아웃으로 모든 화면 크기에 자동으로 유연하게 맞춰지는 방식입니다. Fluid grid, Flexible image, 그리고 CSS media query를 활용하여 하나의 레이아웃이 늘어나거나 줄어들면서 다양한 해상도에 대응합니다.
- 장점: 유지보수가 쉬우며, 한 번 디자인하면 다양한 기기에 적용할 수 있어 효율적입니다. 새로운 해상도의 기기가 나와도 별도의 디자인 수정이 거의 필요 없습니다.
- 단점: 특정 해상도에서 의도치 않은 UI 깨짐이 발생할 수 있고, 디테일한 컨트롤이 어렵습니다. 모든 기기에서 동일한 HTML과 CSS를 불러오기 때문에 초기 로딩 속도가 느릴 수 있습니다.
- 적합한 경우: 블로그, 뉴스 사이트, 포트폴리오 사이트처럼 콘텐츠 구조가 기본적으로 비슷하여 화면 크기만 조절하면 되는 경우에 적합합니다.
2. 적응형 디자인 (Adaptive Design)
미리 정해둔 여러 개의 고정된 화면 크기(예: 320px, 768px, 1024px 등)에 맞춰 여러 개의 레이아웃을 따로 만들어 접속하는 기기에 가장 적합한 버전을 보여주는 방식입니다.
- 장점: 각 화면 크기에 맞춰 최적화된 경험을 제공할 수 있으며, 반응형보다 더 정밀한 컨트롤이 가능합니다. 기기별로 다른 HTML/CSS/JS를 제공하기 때문에 로딩 속도가 빠릅니다. 광고 슬롯이나 기능 등을 기기별로 다르게 최적화할 수 있습니다.
- 단점: 여러 버전을 관리해야 하므로 유지보수 비용이 크고, 새로운 해상도가 등장하면 추가 작업이 필요합니다.
- 적합한 경우: 네이버와 같은 포털 서비스, 금융 웹사이트 등 데스크톱과 모바일에서 정보 구조(IA)가 완전히 다른 경우나, 특정 기기에서 성능 최적화가 중요한 경우에 적합합니다.
네이버가 적응형 디자인을 선택한 이유
네이버는 초기 모바일 환경에 대응하고, 사용자 경험을 최적화하며, 비즈니스 목표를 달성하기 위해 적응형 디자인을 선택했습니다.
- 모바일 환경에 대한 초기 대응: 2010년 전후 모바일 트래픽이 급증하던 시기에 스마트폰 성능과 네트워크 속도가 낮았습니다. 당시 데스크톱용 웹을 줄이는 반응형 방식보다, 가볍고 단순한 모바일 전용 레이아웃을 제공하는 적응형 방식이 사용자에게 더 효율적인 경험을 제공했습니다.
- 데스크톱과 모바일의 사용자 니즈 차이: 데스크톱 네이버는 정보가 밀집된 포털의 성격이 강한 반면, 모바일 네이버는 검색 중심의 빠른 탐색을 우선시합니다. 이처럼 근본적인 정보 구조(IA)가 다르기 때문에, 단순히 화면 크기만 줄이는 반응형으로는 한계가 있었습니다.
- 광고 및 비즈니스 구조: 네이버의 주 수입원은 광고입니다. 적응형 디자인은 화면 크기별로 최적화된 광고 위치와 형태를 따로 설계할 수 있어 수익을 극대화하는 데 유리합니다.
- 서비스 규모와 속도 최적화: 네이버와 같이 거대한 서비스는 사용자가 많아 페이지 로딩 속도가 매우 중요합니다. 반응형은 불필요한 자산을 같이 불러올 수 있지만, 적응형은 서버에서 기기별로 다른 HTML/CSS를 제공하므로 초기 로딩 속도가 더 빠릅니다.
| 특징 | 반응형 디자인 (Responsive Design) | 적응형 디자인 (Adaptive Design) |
| 정의 | 하나의 코드가 다양한 화면 크기에 맞게 자동으로 변하는 방식 | 기기별로 미리 여러 개의 고정된 레이아웃을 만들어두는 방식 |
| 방식 | Fluid grid, Flexible images, CSS Media Query 활용 | 기기 해상도에 맞는 여러 버전의 레이아웃을 따로 제작 |
| 유지보수 | 쉽고 효율적 | 여러 버전을 관리해야 하므로 비용 및 노력이 큼 |
| 컨트롤 | 디테일한 컨트롤이 어려움 | 각 화면에 최적화된 정밀한 컨트롤이 가능 |
| 로딩 속도 | 불필요한 자산을 불러와 상대적으로 느릴 수 있음 | 기기별 최적화된 자산만 불러와 상대적으로 빠름 |
| 적합한 서비스 | 블로그, 뉴스 등 콘텐츠 구조가 비슷한 경우 | 네이버처럼 정보 구조가 다르거나 성능 최적화가 중요한 경우 |
8pt 그리드 시스템
8pt 그리드 시스템의 주요 개념
- 정의: 버튼, 카드, 텍스트 상자 등 UI 구성 요소와 그 사이의 간격을
8px, 16px, 24px, 32px 등 8의 배수로 맞춰 디자인하는 방식입니다. - 활용: 이 규칙은 크기(예: 버튼 높이), 패딩(내부 여백), 마진(외부 여백), 심지어 줄 높이(line height)에까지 적용됩니다. 다만, 글자 크기 자체는 반드시 8의 배수일 필요는 없습니다.
- 4pt 그리드: 더 세밀한 조정이 필요한 작은 요소나 보조적인 여백의 경우 4pt 그리드(4의 배수)를 함께 사용하기도 합니다.
8pt 그리드 시스템을 사용하는 이유
- 일관성 유지 및 협업 효율성 증대:
- 개별 요소뿐만 아니라 페이지 전체의 디자인 리듬과 간격을 통일시켜 시각적 일관성을 유지할 수 있습니다.
- 디자이너와 개발자 간에 명확한 기준을 제공하여 "반픽셀" 문제나 소통 오류를 줄이고 협업 효율성을 높입니다.
- 팀원 간의 시각적 차이를 줄여 통일된 브랜드 경험을 구축하는 데 도움이 됩니다.
- 다양한 해상도 대응:
- 최근의 고해상도 디스플레이(Retina, Super Retina 등)에서는 픽셀 스케일링이 중요합니다. 8의 배수는 픽셀 배수(@2x, @3x 등)에 따라 깔끔하게 스케일링되어 픽셀 오차를 최소화하고 깨끗한 시각적 품질을 보장합니다.
- 구글의 Material Design처럼 8dp(안드로이드의 독립적인 픽셀 단위)를 사용하는 시스템과 호환성이 높아 여러 플랫폼에 걸쳐 일관성을 유지하기에 용이합니다.
- 효율적인 디자인 작업:
- 디자이너는 간격이나 크기를 매번 계산할 필요 없이 정해진 규칙에 따라 빠르게 작업할 수 있습니다.
- 적절한 간격과 크기 선택에 대한 고민을 줄여 디자인 의사결정을 간소화합니다.
8pt 그리드 적용 예시
- 요소 크기: 버튼 높이 48px, 아이콘 크기 24x24px
- 여백: 요소 간 마진 16px, 좌우 패딩 24px
- 타이포그래피: 글자 크기 14px, 줄 높이 24px (14px는 8의 배수가 아니지만, 줄 높이는 8의 배수를 사용)
8pt 그리드 시스템은 구글의 Material Design, Intuit의 Harmony Design System 등 많은 유명 디자인 시스템에서 표준으로 채택하고 있는 만큼, 현대 UI/UX 디자인에서 매우 중요한 개념입니다.
그리드 시스템을 사용하는 이유
- 깔끔하고 정돈된 느낌: 그리드에 맞춰 디자인하면 텍스트, 이미지, 버튼 등 모든 요소가 일관되게 정렬되어 전문적이고 안정적인 사용자 경험을 제공합니다.
- 가독성 향상: 텍스트를 그리드에 맞춰 정렬하면 사용자의 시선이 자연스럽게 흐르도록 유도하여 콘텐츠를 더 쉽게 읽을 수 있습니다. 신문, 잡지, 웹사이트 등 다양한 매체에서 그리드를 활용하는 주된 이유입니다.
- 효율적인 디자인: 그리드를 사용하면 레이아웃을 블록 단위로 구성할 수 있어 디자인 작업을 퍼즐처럼 빠르고 체계적으로 진행할 수 있습니다.
- 반응형 디자인의 기반: 그리드는 다양한 화면 크기에 맞춰 콘텐츠를 유연하게 배치하는 데 핵심적인 역할을 합니다. PC에서 3개였던 카드가 태블릿에서는 2개, 모바일에서는 1개로 자동 조정되는 것처럼, 반응형 디자인을 쉽게 구현할 수 있습니다.
- 팀 협업의 기준: 디자이너와 개발자가 "이 버튼은 6칸"과 같이 동일한 기준으로 소통할 수 있어 오해를 줄이고 작업을 정확하게 진행할 수 있습니다.
UIUX / Product Design Reference / 참고 사이트 모음
Medium: Read and write stories.
On Medium, anyone can share insightful perspectives, useful knowledge, and life wisdom with the world.
medium.com
Nielsen Norman Group: UX Training, Consulting, & Research
A leader in the user experience field, NN/g conducts groundbreaking research, trains and certifies UX practitioners, and provides UX consulting to clients.
www.nngroup.com
<!--td {border: 1px solid #cccccc;}br {mso-data-placement:same-cell;}-->
| 분류 | 사이트 이름 | 링크 |
| 디자인 레퍼런스 | Behance | |
| Dribbble | ||
| Notefolio | ||
| LOUD | ||
| UIUX-Web | ||
| Mobbin | ||
| WWIT | ||
| Designus | ||
| GDWeb | ||
| Awwwards | ||
| UI Bowl | ||
| 폰트 | Google Fonts | |
| Adobe Fonts | ||
| 눈누 | ||
| Fontshare | ||
| DaFont | ||
| 컬러 | Adobe Color | |
| LOL Colors | ||
| Web Gradients | ||
| UI Gradients |
오늘의 실습 !
⭐️ 1. 실습과제 진행 [수업시간 실습과제]
- 수업시간에 한 그리드 실습 (IOS 그리드 / 사각형 텍스트 자율주제로 안에 내용을 적어보기 )
⭐️ 2. 앱 [컬리] 클론 복습 + 나머지 부분 해보기
⭐️ 3.앱 래퍼런스 찾고 그리드 맞춰보기
[ 15일차 소감 ✨]
그리드에 대해 알게 되어 피그마를 사용하는 것이 훨씬 수월해졌습니다. 하지만 웹페이지나 앱에서는 그리드가 정확하게 맞아떨어지지 않는 경우가 있어 아쉬움이 남았습니다. 그럼에도 어느 정도 기준을 세우고 마진과 거터를 활용해 컬럼을 구분하니 작업 속도가 훨씬 빨라져 기뻤습니다! 다만 이러한 기능들을 손쉽게, 마치 게임하듯이 다룰 수 있을지에 대한 걱정도 있습니다. 그래서 계속 연습하고 학습한다면 훌륭한 프로덕트 디자이너가 될 수 있을 것이라고 생각합니다. 내일 수업도 힘내서 참여해야겠습니다. 내일은 보충 수업도 예정되어 있어 기대와 걱정이 동시에 됩니다. 아자아자 파이팅입니다!ε(*⌒▽⌒)੭*ﾟ:..☆
= 오늘의 한 마디 =
- 오늘도 좋은 하루였다~
'프로덕트 디자이너 6기' 카테고리의 다른 글
| DAY+17 [ 서비스 디자인 기획 ] (1) | 2025.09.29 |
|---|---|
| DAY+16 [ 선정 서비스의 UI 구성요소 디자인 ] (2) | 2025.09.25 |
| DAY+14 [ 피그마 인터페이스 공부 및 UI 구성요소 디자인 ] (1) | 2025.09.23 |
| DAY+13 [ 피그마 인터페이스 공부 ] (0) | 2025.09.22 |
| DAY+12 [ 서비스 디자인 기획 ] (3) | 2025.09.19 |
