인프런 커뮤니티 질문&답변
작성한 질문수
베리어블 등록 이동하기
작성
·
134
0
안녕하세요 볼드님
1- 한 프로젝트에서 저장된 베리어블을 다른 프로젝트 파일에서 쓰는 방법이 있나요?
2- 그리고 반응형 웹작업을 할때 네비게이션이 있는 페이지 구성 시 그리드는
피그마에서 어떤 방식으로 잡고 가시는지 궁금합니다. (좌측 네비랑 우측 메인을 따로 생각하여 구성하는지?)
3- 웹 작업을 처음 하는데 피그마에서 1440px 일경우 보통 마진을 얼만큼으로 설정한다 이런 정해진 값이 있는것인지, 웹에서는 아이콘 픽셀 사이즈가 1.5/2px이 아닌 소수점으로 작업해도 되는지 등 모바일 작업보다 많이 막막한데 사이즈 지정에 대해서 도움을 받을수 있는 사이트 같은게 있을까요?
늘 친절한 답변 감사드립니다.
답변 2
0
안녕하세요, ifuwonder 님 워밍업 질문 게시판으로 질문 주셔서 감사합니다.
밑에 인프런 AI가 참 잘 이야기했는데, 우선 배리어블을 다른 프로젝트에서 쓰시는 경우는 파일 내보내기를 하시고 다른 B프로젝트에서 A파일을 붙여넣으면 베리어블을 확인해보면 확인해볼 수 있습니다. 이 경우 베리어블에 hide from publishing이나 콜렉션 그룹에 _ , .을 붙이시면 나오지 않습니다.
만약 베리어블을 다른 프로젝트로 옮기고 싶은 경우는 플러그인을 사용하시는 방법을 추천드리는데요, 플러그인 중에 Variable Pro라는 플러그인이 유용합니다.제가 듣기에는 어드민 페이지 같아 보이는데요. 보통은 어드민 페이지는 따로 모바일을 사용하여 고정형으로 사용하고 우측 메인은 따로 8그리드를 사용하거나 복잡도에 따라 상황에 따라 12그리드를 사용합니다. 추후 강의에서 그리드 파트에서 배우시게 될 것입니다.
강의에서 제공되는 파일대로 정하시면 됩니다. 1440px을 쓰기도 하지만 고정형으로 보통은 Width를 12개 그리드 컬럼으로 해서 그 사이에 11개의 거터를 고려해서 계산을 해서 사용합니다.
12개의 컬럼, 거터의 길이 마진을 모두 다해서 사용하시면 되고 정답은 없습니다. 한번 만들어보시고 양 쪽 마진을 브랜드에 맞게 잘 맞춰주시면 됩니다. (밑에는 예시입니다. 빨간색 부분을 더해주시면 됩니다.)
- 한 컬럼의 길이는 16(Rem 기준) 5 = 90
- 12개의 컬럼의 길이는 90 * 12 = 1080
- 거터의 길이 = 24px
- 11개의 커터의 길이 = 24px * 11 = 264
- 마진 = 24px
- 양쪽 두개의 마진 = 48px
만약 Strech의 경우(크기가 커지면 같이 커지는 경우)는 마진을 고려하지 않으셔도 되구요.
1.5px, 2px 상관없습니다. 문제가 전혀 없습니다. 근데 강의에서 언급하였듯이 깨서 면처리 해서 쓰시는 걸 추천드립니다.
사이트는 머티리얼 2가 잘 나와있습니다. 확인해보세요.
https://m2.material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins
감사합니다!!!!
0
안녕하세요, 인프런 AI 인턴입니다. ifuwonder님!
질문에 대해 차근차근 답변드리겠습니다.
프로젝트 간 베리어블 이동:
- 피그마에서는 한 프로젝트에서 정의한 베리어블을 다른 프로젝트에서도 사용할 수 있도록 공유하는 기능이 있습니다. 이를 위해서는 해당 베리어블이 포함된 파일을 라이브러리로 설정하고 다른 파일에서 이 라이브러리를 활성화하면 됩니다. 라이브러리 기능을 통해 여러 프로젝트 간 공통으로 사용할 수 있는 디자인 요소를 관리할 수 있습니다.
- 참고할 수 있는 기존 답변: Library 설정을 통한 베리어블 관리
- 피그마에서는 한 프로젝트에서 정의한 베리어블을 다른 프로젝트에서도 사용할 수 있도록 공유하는 기능이 있습니다. 이를 위해서는 해당 베리어블이 포함된 파일을 라이브러리로 설정하고 다른 파일에서 이 라이브러리를 활성화하면 됩니다. 라이브러리 기능을 통해 여러 프로젝트 간 공통으로 사용할 수 있는 디자인 요소를 관리할 수 있습니다.
반응형 네비게이션 그리드 구성:
- 반응형 웹 디자인에서 네비게이션에 대한 그리드 구성은 중요한 요소입니다. 일반적으로 좌측에 네비게이션을 배치하는 경우와 페이지의 메인 컨텐츠를 따로 구성하는 방식이 많이 사용됩니다. 이러한 경우 각 영역의 그리드 시스템을 정의해 두는 것이 좋은데, 피그마에서의 그리드 설정을 통해 해당 레이아웃을 시각적으로 관리할 수 있습니다.
- 반응형 웹 디자인에서 네비게이션에 대한 그리드 구성은 중요한 요소입니다. 일반적으로 좌측에 네비게이션을 배치하는 경우와 페이지의 메인 컨텐츠를 따로 구성하는 방식이 많이 사용됩니다. 이러한 경우 각 영역의 그리드 시스템을 정의해 두는 것이 좋은데, 피그마에서의 그리드 설정을 통해 해당 레이아웃을 시각적으로 관리할 수 있습니다.
웹 작업 시 마진과 아이콘 사이즈:
- 1440px 해상도의 경우, 좌우 마진은 보통 100~120px로 설정하는 것이 일반적입니다. 이는 화면 비율과 디자인에 따라 조정될 수 있습니다.
- 아이콘이나 그래픽 요소의 경우, 반응형 웹에서는 1.5px 또는 2px과 같은 정수 픽셀뿐 아니라 소수점으로도 작업할 수 있습니다. 이는 때때로 더욱 세밀한 디테일을 위한 것입니다.
- 디자인 스펙에 대해 가이드하는 사이트로는 Material Design (https://material.io)과 같은 곳이 있으며, 이를 통해 다양한 레이아웃 및 구성 요소에 대한 정보를 얻을 수 있습니다.
- 1440px 해상도의 경우, 좌우 마진은 보통 100~120px로 설정하는 것이 일반적입니다. 이는 화면 비율과 디자인에 따라 조정될 수 있습니다.
질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변을 제공합니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.