상단에 위치하는 글로벌 네비게이션(Global Navigation/Header) 관련 질문드립니다.
우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요.
회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다.
이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요.
마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다.
인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다.
안녕하세요. 섹션 9의 상단에 위치하는 글로벌 네비게이션(Global Navigation/Header)를 듣는중 궁금한점이 있어서 질문드립니다.
사실 이미 듣고 나서 해결되지 않은 것때문에 후속에서도 계속 사용되니 문제가 되어서 질문드립니다.
global navigation에서 모바일 설정시에 이런식으로 나와서 제가 수정을 열심히 해봤는데도 잘 되지 않아서 어떻게 해야 햄버거 버튼이 오른쪽으로 붙는지 잘 모르겠습니다.

현재 구조는 아래와 같으며,

Container는 Auto layout의 fill로 설정되어 있고,

햄버거 버튼은 아래와 같으며,

로고는 아래와 같이 설정되어 있습니다.

되도록이면 혼자서 해보려고 했는데, 몇일동안 해결을 하지 못하여서 질문을 드립니다.
감사합니다.
답변 2
0
제 생각에는 로고가 앱솔루트 포지션이 되어서 그런 것 같습니다.
앱솔루트 포지션을 끄시면 해결 될 것 같습니다.
앱솔루트 포지션은 부모 레이어와 종속되지 않고 자기 마음대로 놉니다. 그래서 공간도 채워우는 것을 고려하지 않습니다.
그래서 지금 현 상태로 되어 있는 경우라면 Container에 딱 하나의 레이어 Humburger만 있다고 레이아웃은 고려합니다. 즉 로고는 무시해버립니다. 그래서 이 경우는 제 추측으로 딱 햄버거 버튼이 중간에 위치할 것 같습니다.
문제가 있으시면 이메일(boldplus.ux@gmail.com)로 파일 공유해주시면 더 자세히 도와 드리겠습니다.
감사합니다.
0
안녕하세요, 인프런 AI 인턴입니다. aquamiro님, 강의를 수강해 주셔서 감사합니다. 글로벌 네비게이션에서 햄버거 버튼을 오른쪽으로 붙이는 데 어려움이 있으신 것 같습니다. 아래에 해결 방안을 제시하겠습니다.
문제 해결을 위한 체크리스트:
Auto Layout 설정 확인:
- 글로벌 네비게이션의 상위 컨테이너(전체적인 영역)가 Auto Layout 설정을 통해
Horizontally: Space Between으로 되어 있는지 확인해주세요. 이렇게 하면 메뉴의 요소들이 양 끝(좌측과 우측)으로 자동으로 배치됩니다.
- 글로벌 네비게이션의 상위 컨테이너(전체적인 영역)가 Auto Layout 설정을 통해
햄버거 버튼의 위치 조정:
- 햄버거 메뉴 버튼을 직접 드래그하거나 X 축의 값을 변경하여 오른쪽 끝으로 이동시켜 보세요.
- 햄버거 버튼이 포함된 Auto Layout 프레임 안에서 정렬 옵션이 적절하게 설정되어 있는지, 오른쪽 정렬되어 있는지를 확인합니다.
- 햄버거 메뉴 버튼을 직접 드래그하거나 X 축의 값을 변경하여 오른쪽 끝으로 이동시켜 보세요.
Auto Layout 방향 및 간격:
- Direction + Gap에서 열린 방향이 수평(horizontally)으로 설정되어 있는지 확인합니다.
- 이 때, 요소 간의 간격 설정(Gap)이 너무 크지 않은지 점검해 주세요.
- Direction + Gap에서 열린 방향이 수평(horizontally)으로 설정되어 있는지 확인합니다.
패딩 및 여백 조정:
- 전체 컨테이너의 좌우 패딩(padding)이 일관된지 확인하고, 만약 필요하다면 패딩 값을 조정하여 햄버거 메뉴 버튼이 오른쪽 끝에 정렬되도록 설정합니다.
- 전체 컨테이너의 좌우 패딩(padding)이 일관된지 확인하고, 만약 필요하다면 패딩 값을 조정하여 햄버거 메뉴 버튼이 오른쪽 끝에 정렬되도록 설정합니다.
레이어 순서:
- 레이어 패널에서 요소의 순번이 잘못되어 있다면 이로 인해 의도한 레이아웃을 방해할 수 있습니다. Check하여 정렬하세요.
- 레이어 패널에서 요소의 순번이 잘못되어 있다면 이로 인해 의도한 레이아웃을 방해할 수 있습니다. Check하여 정렬하세요.
아래 유사한 질문과 답변을 참조하여 도움을 받으실 수 있습니다:
- 텍스트 상자 placeholder의 아이콘과 텍스트 배열 관련: 이 답변에서는 요소 배열에 대한 문제 해결법이 언급되어 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
아이콘 빌런 부분
0
22
1
배리어블 Value에 관해 질문있습니다.
0
46
0
Body>font weight 에서 semibold에 짝대기가 생기는 이유?
0
46
1
Navigation Mobile 토글 베리어블이 안됩니당
1
43
2
Typography 모드 적용시 표현된 값과 우측에 표시되는 값다름
0
40
1
디자인 시스템에 그룹명을 숨길 수도 있나요?
0
49
2
디자인 시스템 네이밍에 관한 질문드립니다.
0
62
2
next step?
1
78
1
16강 Print Variables 출력 질문
0
84
2
open in Figma 누르고 ui kit 다운?받았을 때
0
74
2
variables 이름 지을때 소문자,대문자 사용에 관해..
0
98
2
디자인 시스템 네이밍 순서에 대해 질문남깁니다!
0
119
2
이미지 캐러셀 영상
0
70
2
아이콘 사이즈 컴포넌트 구성 방식 관련
0
107
3
완강/리뷰 이벤트 후 강의자료
0
66
2
Stack 컴포넌트 관련하여 궁금한 점이 있습니다.
0
59
1
컴포넌트별 베리어블 구축
0
81
2
인풋 텍스트필드에서는 왜 'interactive/bg' 배리어블을 활용하지 않는 것인가요?
0
41
1
섹션 6 / 29.Button 강의의 아이콘 인스턴스 스왑 질문
0
54
2
UI Kit에서 배리어블 등록 안되는 문제
0
63
2
교육용 피그마 계정 문의
0
65
2
베리어블 등록했는데 스타일에 연결하려니까 안보여요..
0
91
3
폰트 웨이트 지정에서, '바디만 따로 웨이트를 시멘틱에 그룹핑 하는 이유'가 무엇인가요??
0
53
2
섹션 6 / 29.Button 강의 질문
0
68
2






