반응형 웹 디자인

작성한 질문수 1

1

안녕하세요, Semin Hur님,

1. 모바일 First?

저는 현재 회사에서 프로덕트가 두 개인데, 그 중 하나는 모바일 사용자가 90% 이상이라 모바일을 먼저 작업한 후 데스크탑으로 확장합니다. 디자인 복잡도도 높지 않아 모바일 퍼스트가 자연스러운 선택이었습니다.

일반적으로 모바일 퍼스트를 권장하지만, Semin Hur님도 아래 두 가지 기준으로 시작점을 결정해 보시길 추천드립니다.

• 사용자 비율 — 어떤 디바이스 사용자가 더 많은가?

• 디자인 복잡도 — 레이아웃이 얼마나 복잡한가?

예를 들어, 대시보드가 포함된 SaaS 프로덕트에서 사용자의 99%가 데스크탑 유저라면 굳이 모바일부터 시작할 필요가 없습니다. 모바일은 후순위에 두거나, 개발 리소스 상황에 따라 아예 제외하는 판단도 충분히 합리적입니다.

2. 피그마 베리어블 모드, 어디까지 활용 방안

베리어블 모드로 모든 반응형 스펙을 통제하는 것은 현실적으로 쉽지 않습니다. 개인적으로는 이렇게 접근하시길 권장드립니다.

• 타이포그래피 → 베리어블 모드 적극 활용 (일관성 확보에 효과적)

• 간격→ 큰 단위부터 먼저 잡고, 세부 간격은 별도로 관리

모든 반응형 스펙을 베리어블 패널 안에 넣으려 하면, 오히려 디자인의 창의적 자유도가 제약될 수 있습니다. 반응형 디자인의 목적은 모드를 바꿔서 반응형을 자동으로 완성하는 것이 아니라, 기기 마다 얼마나 유연하게 바뀌는지가 중요하기 때문입니다. 그래서 이를 위한 그만큼의 스펙이 미리 정의되어 있어야 합니다. 그래서 저는 강의에서 제안하는 큰 구조를 먼저 잡고, 디테일은 유연하게 가져가시는 것을 추천드립니다.

볼드 드림.

0

안녕하세요, 인프런 AI 인턴입니다. Semin Hur님.

질문해주신 반응형 웹 디자인에서의 모바일과 1920 웹 사이즈 확장에 대한 부분에 대해 설명드리겠습니다.

1. 모바일 디자인 후 1920 사이즈 확장 방법:

   • 반응형 웹 디자인에서 모바일과 데스크탑(웹) 사이의 레이아웃 처리에서 자주 직면하는 문제입니다. 일반적으로 모바일 디자인을 먼저 하고 데스크탑 사이즈로 확장하는 경우가 많습니다. 이때, 오토레이아웃 기능을 사용하여 유연하게 확장할 수 있으며, 각각의 요소들이 화면 크기에 따라 적절하게 배치될 수 있도록 합니다.
     
   • 모바일에서 데스크탑으로 확장하는 과정에서 레이아웃이 조금씩 달라지는 부분은 그리드 시스템을 통해 해결합니다. 데스크탑에서는 더 많은 열을 사용하여 콘텐츠를 배치할 수 있으므로, 그리드를 기반으로 요소의 배치가 조정되도록 합니다.
     

2. 타이포그래피 모드 적용:

   • 모바일과 웹 사이즈 간의 타이포그래피 변화는 종종 작은 차이를 보일 수 있습니다. 이는 주로 폰트 크기와 line height 조정을 통해 처리해야 합니다.
     
   • 타이포그래피 모드를 설정하여 각각의 디바이스 상황에 맞는 폰트 스타일을 미리 정의해 두는 것이 중요합니다.
     
   • Figma에서는 특정 화면 크기마다 다른 스타일을 적용할 수 있도록 스타일 모드를 사용할 수 있습니다. 이를 통해 각기 다른 디바이스에서 폰트 크기를 조정하는 등의 세부적인 스타일 작업이 가능합니다.
     

아래의 링크는 관련 주제를 다룬 게시글로서 도움을 얻을 수 있습니다:

• 픽스드, 플루이드 반응형 레이아웃 그리드 적용 질문: 여기서는 반응형 레이아웃을 구현할 때 사용되는 픽스드와 플루이드의 차이를 설명하며, 웹 디자인 확대 시 유용한 팁을 제공합니다.
  
• textfield에 맞는 font size 정의: 텍스트 필드 내에서 폰트 크기에 대한 문의사항을 다루며, 반응형 디자인에서 폰트 사이즈를 어떤 기준으로 적용하는지가 설명되어 있는 게시물입니다.
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.