B2B 어드민 페이지에서 모바일 화면 만들때 궁금한 부분이 있습니다.
3
11 asked
안녕하세요.
선생님 강의 열심히 쫓아가고 있는 수강생입니다 헉헉;;
지금 B2B 어드민 페이지를 만들다가 모바일 화면으로도 만들고 있는데 탭부분은 어떻게 하면 되는지.. 그리고 아래 화면처럼 만들었는데 수정할 부분이 어떤게 있는지 궁금합니다.
모바일 최대 width와 최소 width를 각각 767, 320으로 하면 될까요?
Answer 1
0
안녕하세요, 인프런 AI 인턴입니다. 미갱이님.
B2B 어드민의 모바일 화면에서 탭 구성과 브레이크포인트를 고민하고 계신 내용과 가장 유사한 기존 답변은 아래 게시글입니다.
반응형 웹 디자인
기존 답변에서는 모바일과 데스크톱 중 어느 화면부터 설계할지는 사용자 디바이스 비율과 레이아웃 복잡도를 기준으로 판단하고, 모든 반응형 규격을 Figma Variable Mode로 자동화하기보다는 큰 구조는 공통화하고 세부 레이아웃은 화면에 맞게 유연하게 조정하는 방식을 권장하고 있습니다.
따라서 모바일 탭은 데스크톱 탭을 단순히 축소하기보다 다음 사항을 확인해 보시면 좋습니다.
- 탭 개수가 많아 한 줄에 모두 들어가지 않는 경우 가로 스크롤이나 축약 방식을 고려합니다.
- 선택된 탭이 명확히 보이도록 활성 상태와 좌우 여백을 충분히 확보합니다.
767px,320px를 고정 기준으로 사용하기보다는 콘텐츠가 깨지기 시작하는 지점을 기준으로 실제 브레이크포인트를 정하는 것이 좋습니다.
- 모바일 화면에서는 B2B 어드민의 주요 기능과 정보 우선순위를 먼저 정한 뒤, 필터·탭·목록 순서가 자연스럽게 이어지는지 확인해 보세요.
참고로 모바일 헤더와 햄버거 메뉴 배치에 관한 유사 질문도 함께 확인해 보실 수 있습니다.
상단에 위치하는 글로벌 네비게이션(Global Navigation/Header) 관련 질문드립니다.
질문에 첨부해주신 이미지 원본은 아래에서 확인하실 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
모드를 활용한 반응형 디자인 구현하기에서 등록한 베리어블이 보이지 않습니다.
0
15
2
컴포넌트 파일에 파운데이션 라이브러리 연결 안되는 문제
0
109
6
섹션3. 스타일가이드 다운받고 난후
0
55
2
강의 파일 다운로드
0
57
2
아이콘 컬러 자동 변경
0
73
2
'만능으로 쓰이는 기본카드' 강의 내용에 대해 질문드립니다.
0
89
2
figma.com/@boldux 계정이 없다고 나옵니다
0
77
2
반응형 웹 디자인
0
140
3
액션 아이콘 컴포넌트 질문
0
95
2
셀렉트(Select & Dropdown menu) - 파트 1 / selected 토글 버튼
0
118
3
스피너 아이콘 크기 질문
0
122
2
미리보기 빈칸생기는 현상
0
104
2
아이콘 빌런 부분
0
84
2
배리어블 Value에 관해 질문있습니다.
0
119
1
Body>font weight 에서 semibold에 짝대기가 생기는 이유?
0
96
1
Navigation Mobile 토글 베리어블이 안됩니당
1
109
2
Typography 모드 적용시 표현된 값과 우측에 표시되는 값다름
0
104
1
디자인 시스템에 그룹명을 숨길 수도 있나요?
0
104
2
디자인 시스템 네이밍에 관한 질문드립니다.
0
124
2
next step?
1
122
1
16강 Print Variables 출력 질문
0
138
2
open in Figma 누르고 ui kit 다운?받았을 때
0
154
2
variables 이름 지을때 소문자,대문자 사용에 관해..
0
171
2
디자인 시스템 네이밍 순서에 대해 질문남깁니다!
0
187
2