12단을 추천드리는 또 하나의 이유는 퍼블리싱 때문입니다. 퍼블리셔 혹은 웹 프론트앤드 개발자분들이 퍼블리싱할 때 '부트스트랩'이라는 유명한 프레임워크를 사용해서 개발하는 경우가 많습니다. 부트스트랩에서 제공하는 기본 컬럼수 역시 12단 입니다. 참조 : bootstrapk.com/css/#grid
유익한 강의 만들어 주셔서 감사합니다! 기초적인 궁금증이 있어서요 지식인에 남겨야하나 고민했는데요.. 디자이너님이 답변주실수 있으실까요ㅜㅜ혹시 실무에서 어떤 회사가 로드뷰같은 서비스를 운영하는 회사라면 디자이너들은 아트보드를 몇개를 작업해야하는건가요? 로드뷰 같은 서비스는 어플로도 볼수도 있고 웹사이트에서도 확인이 가능하잖아요. 그럼 UI디자이너는 아트보드를 아이폰1개, 안드로이드 1개, 웹사이트1개 ->총3개를 열어놓고 해야하나요? 처음 사이즈를 무엇를 열어놓고 UI디자인 연습을 할지 모르겠어서요..그거와 상관없이 저그리드에 맞춰서 작업하고 기획자에게 공유하는 프로세스인가요? 이쪽 업종이 아니라 질문드립니다..
와오~ 너무 좋은 컨텐츠입니다! 현직 디자이너인데 스케치를 독학으로 하느라 책도 사보고 영상도 찾아헤맨지 어언 몇달인데 드디어 만났네요!! 이렇게 기본기를 체계적으로 왜.까지 알려주는 영상은 처음입니다!! 그것도 이렇게 차분한 목소리로 ㅎㅎㅎ 포폴 만들면서도 이런 수치에 대해서 너무 궁금했는데 암튼 최고입니다!! 핵심만 알려주고 군더더기 없고.... 사실 수치를 8그리드등.. 그렇게 쓰라니까 쓰고 이론적으로는 알겠는데 적용을 어떻게 해야하는지 모르겠어서 그냥 무작정 사용하고 있었거든요 .. 너무너무너무 도움이 됩니다!! 정말정말 감사합니다! 적게 일하고 많이 버세요!!! :) 앞으로도 쭈욱 잘 보겠습니다.
반응형 웹이랑 앱 디자인이랑은 약간의 차이가 있을수있어요. OS 별 권장 가이드라인이 있고, 아이폰과 안드로이드 폰의 해상도가 다르며, 같은 안드로이드 폰이라고해도 갤럭시 노트9과 s8의 해상도와 가이드라인도 다르기 때문이죠ㅠㅠ 매번 새로운 해상도가 나오고 사용자들의 스마트폰 특정 해상도 사용 비율이 달라지기 때문에 정확한 치수를 매년 할수는 없습니다.. 앱디자인을 하시려면 제가 올린 영상 중에 th-cam.com/video/OHrCLgscxfI/w-d-xo.html 이걸 보시면 더 도움이 되실 것 같아요😃
우연히 영상 보게됐는데, 많은 도움 됐어요. 너무 감사해요. 원래 댓글 잘 안남기는데 이렇게 남겨요☺️ 디자인하시는 분이라 그런지 영상도 어쩜 이렇게 깔끔하게 잘하셨는지..... 보는내내 아주 편안하게 봤어요! 영상 하나만 봤는데 그 이후로 구독 바로 눌렀네용.. 지금부터 다른 영상 정주행하려구오 ~~~~ 사이트도 무료로 열어놓으셨던데,, 대단하신것같아요 팬됐어요🤚💛 주니어 디자이너인데 너무너무너무 감사해서 남깁니당!
좋은 정보 감사합니다. 그런데 사용하신 레이아웃 셋팅으로(7:50)는 실제 Container 값이 1194로 Column: 72px, Gutter: 30px이 나오지 않습니다. (실제로 위 셋팅으로 할경우 Colum 73px Gutter: 29px~30px이 나옵니다.) 중요하다는 Gutter값도 고정되지 않는게 문제인것 같습니다.
유익한 강의 만들어 주셔서 감사합니다! 기초적인 궁금증이 있어서요 지식인에 남겨야하나 고민했는데요.. 디자이너님이 답변주실수 있으실까요ㅜㅜ혹시 실무에서 어떤 회사가 로드뷰같은 서비스를 운영하는 회사라면 디자이너들은 아트보드를 몇개를 작업해야하는건가요? 로드뷰 같은 서비스는 어플로도 볼수도 있고 웹사이트에서도 확인이 가능하잖아요. 그럼 UI디자이너는 아트보드를 아이폰1개, 안드로이드 1개, 웹사이트1개 ->총3개를 열어놓고 해야하나요? 처음 사이즈를 무엇를 열어놓고 UI디자인 연습을 할지 모르겠어서요..그거와 상관없이 저그리드에 맞춰서 작업하고 기획자에게 공유하는 프로세스인가요? 이쪽 업종이 아니라 질문드립니다..
1. 퍼블리싱 시 - 컨테이너(max-width)를 1200px로 설정하고, 부모 요소에 좌우 패딩(40px)을 주나요? - 아니면 컨테이너의 max-width를 패딩을 포함한 값(1280px)으로 설정하나요? 2. 피그마에서 부모 프레임을 1920px로 설정한 후에 - 내부에 1280 컨테이너 프레임을 또 생성하고 그 안에 1200 그리드를 설정하는 방식인가요? - 부모 프레임(1920px)에 바로 1200px 그리드를 설정하는 방식인가요? 부모프레임에 바로 1200그리드를 설정한다면 퍼블리셔에서 넘겨줄때 좌우패딩은 어떻게 표시해서 주시는지 궁금합니다.
안녕하세요. 만약 디자인에서 그리드를 전체폭 : 1200 / 좌우 마진 : 40 라고 했다면 저는 퍼블리싱할 때 컨테이너의 max-width를 1280으로 하고 좌우 패딩을 40으로 적용하는 편입니다. 퍼블리셔에게 넘겨줄때는 문서화로 표기해서 넘겨주는 게 서로 가장 명확할 것 같습니다~!
감사합니다ㅎㅎ 아이패드는 아이패드 에어인지 프로인지에 따라 다릅니다. 컨테이너는 좌우 마진(24추천)을 고정한 상태에서 가변적으로 변하게 작업하시면 됩니다. 그냥 앱 디자인인 경우는 os별 가장 사용률이 높은 비율로 작업하시면됩니다. 앱스토어용 앱이면 아이폰x 기준으로 한벌만 하시면됩니다. 개발자가 알아서 오토 레이아웃으로 작업해줍니다.
넘 유용한 정보 감사합니다.. 질문이 있는데요 모바일 해상도가 가로 360px 기준으로 하면 된다고 하셨는데요 요즘에는 가로 해상도가 1080, 1440, 2208 px 등 크게 나오는데요.. 360으로 디자인해도 되는 건가요? 360기준으로 디자인하면 몇배수로 알아서 변경되는 걸까요?
안녕하세요. 말씀해주신 해상도는 dpi개념에 픽셀이고, 상대값인 dp 개념으로는 1dp = 1px인 경우로 디자인을 하면 됩니다. 피그마나 스케치, xd와 같은 모든 툴은 상대값 개념으로 제공합니다. 개발시에도 상대값을 기준으로 하다보니 걱정안하셔도 됩니다. 단지, 운영할때 필요한 배너 디자인처럼 비트맵 기반인 경우에만 적용 디바이스의 배율에 맞게 크게 제작하시면 됩니다.
안녕하세요 강의보며 너무 큰 도움 받고있습니다! 혹시 모바일웹이 아닌 앱 작업 하실 때도 마찬가지로 360을 기준으로 작업하시나요? 제가 xs를 쓰고있어서 직접 폰에 넣어 테스트하기도 편하고 아무래도 최신폰을 기준으로 작업하는게 나을 것 같아서 375를 기준으로 작업하고 있었거든요!(안드로이드는 이미 360기준으로 하고 있어서 ios만 봤을 때)
1200에서 좌우마진 10씩주면 1180아닌가요?? 기본적으로 좌우 마진을 주는건 반응형으로 브라우저 창을 줄여도 좌우에 항상 일정 여백을 줘서 콘텐츠에 방해안가도록 하는것이에요ㅎㅎ 그리고 컨테이너(콘텐츠)영역에 정답은 없습니다. 전체폭, 컨테이너 넓이, 컬럼수, 거터, 좌우 마진 이렇게가 중요합니다.
안녕하세요 상욱님😀 폰트 사이즈같은 경우는 해당 브랜드사이트의 가이드라인이 없을경우에는 케바케로 진행합니다. 가독성을 헤치지않을 정도의 최소 사이즈만 지키면 문제 없을 것 같에요. 저는 Pc에서 본문 사이즈를 16-18 모바일에서 14-16 사이로 사용합니다. 주석처럼 작아도 되거나 영문인 경우는 PC에서 12-14 모바일에서 10-12로 조절해서 사용중이에요~!
안녕하세요 강의보고 너무 궁금해서 질문드립니다. Material design guide 에는 large tablet 제작시 gutter와 margin 을 24px 로 두고 잇던데요.. 칼럼은 항상 12단으로 둔다면 제작 페이지사이즈에 따라 gutter 사이즈는 임의로 조정가능하다는 건가요?
안녕하세요 웹디자인을 처음 하게 되어서 영상 몇번씩 돌려보고 정말 유용하게 보았습니다! 질문이 한가지 있는데, 아트보드 작업환경 크기는 1980으로 하되 컨테이너는 1200으로 하라고 하셨는데 헤더는 컨테이너에 상관없이 1980 아트보드 양쪽 끝에 맞춰서 작업해도 괜찮은가요? 보여주신 예시 사이트들은 그렇게 되어있는 것 같아서요~ 그럼 작은 화면으로 봐도 안짤리나요?? (참고로 저는 xd로 작업하고 있습니다) 답변 부탁드립니다 감사합니다 :)
안녕하세요~! 1920을 말씀하시는 것 같습니다. 컨테이너 없이 꽉차게 해도 문제는 없지만, 그렇게 했을때 유의해야할점 몇가지 말씀드리자면 테블릿 사이즈 전까지 대응해야할 스크린 사이즈가 많아서 다 잘보이게 제작하려면 개발에서도 다 맞춰서 제작해야되기때문에 디자인, 개발 시간이(제작비용) 많이 듭니다. 그리고 만약 안지키면 반응형에 취약하게 돼서 특정 스크린에서 짤리는 문제가 발생합니다. 그리고 콘텐츠 폭이 넓어서 이미지가 많이 들어갈 경우 웹사이트에 불러오는 이미지 용량이 커서 서버비용도 많이 나가고 로딩속도에 영향을 끼치게 됩니다. 그럼 자연스럽게 이탈률도 올라가게 됩니다. 권장 가이드라인을 드린것이고 무조건 그렇게 할 필요는 없습니다~! 사이트 성향에 맞게 디자이너의 의도에 맞게 제작하시면됩니다.
안녕하세요 후니훈님. 다른 댓글에도 관련 문의를 주신 내용이 있어서 답변드린 내용 똑같이 남깁니다. 계산기를 이용해서 자세히 계산을 해보면 72.5px이 나오게 되네요. 스케치 레이아웃 세팅 상에서는 소수점을 취급하지 않아서 72px이 나오게 됩니다. 사실 Column 값보다 Gutter 값이 더 중요합니다. 단을 나누는 기준이 되기 때문이죠. 컬럼값은 %로 처리하기 때문에 작은 해상도에서 보면 값이 유동적일 수 밖에 없어요. 가장 중요한 부분은 컨테이너 넓이, 단의 수, 거터 값 이렇게 3가지 입니다 ^^ 컨테이너 넓이를 전체 넓이(예시 1920)에서 좌우 마진 뺀 값으로 하기 때문에 단 수와 거터값만 고정하면 컬럼값은 유동적으로 변하기 때문에 코드로 제작시에도 소수점이 나올 수 있습니다.
영상 정말 잘 봤습니다😊ㅎㅎ 내용 중에 스케치로 [반응형 모바일 웹] 작업 시 360 한 벌로 디자인한다고 하셨는데요. 반응형 웹이 아니라 [모바일 전용 웹]이면 앱 작업처럼 안드 360, iOS 375 두 벌을 디자인해야하나요? 아니면 마찬가지로 360하나만 해서 코딩으로 처리하나요?
안녕하세요! 구독하고 꾸준히 강좌 보고있는 신입입니다! 이번 반응형 그리드 강좌보고 스케치에서 똑같이 따라해보는데 질문 드리고싶은게 2가지 있어서 댓글 남깁니다. 1. width 1200px, offset 360px, columns 12, gutter width 30px 으로 잡으면 스케치에서 column width 값이 저절로 70으로 바뀌는데 이건 왜 이러는건가요ㅠㅠ? 계산기로 계산해봐도 72값이 안나오는거 같은데 혹시 자세한 설명 부탁드려도 될까요? 2. 모바일에서는 주로 4개의 column을 사용한다는 말도 많이 들었는데 이럴땐 거터 값을 어떻게 계산하면 좋은지도 혹시 추천해주실 수 있나요? 언제나 좋은 강좌 감사드립니다 :)
안녕하세요 슬기님~! 우선 1번에 대한 내용은 레이아웃 세팅 창 설정에서 'Gutter on outside'를 체크해서 그런 값이 나오는 것 같습니다. 그리고 계산기를 이용해서 자세히 계산을 해보면 72.5px이 나오게 되네요. 스케치 레이아웃 세팅 상에서는 소수점을 취급하지 않아서 72px이 나오게 됩니다. 사실 Column 값보다 Gutter 값이 더 중요합니다. 단을 나누는 기준이 되기 때문이죠. 컬럼값은 %로 처리하기 때문에 작은 해상도에서 보면 값이 유동적일 수 밖에 없기 때문이죠. 2번 같은 경우는 영상에서 말씀드린 것처럼 사실 정답은 없습니다. 대기업 사이트에서 4단 그리드를 사용하고 있는 사이트가 있죠. 1번과 어느정도 겹치는 내용이지만, 가장 중요한 부분이 3가지 있습니다. 컨테이너 넓이, 단의 수, 거터 값 이렇게 입니다. 컨테이너 값에 의해 좌우 마진(스케치 상에서 Offset 값)이 정해지겠죠. 그리고 단을 4로 정해서 4단 그리드를 만들면 되겠죠. 마지막으로 거터 값은 정수로 하는 게 좋죠. 16px 이런식으로요. 그럼 자동으로 칼럼값이 68px이 됩니다. 자세한 부분은 안드로이드 머터리얼 디자인에 기재된 가이드라인을 참고하시면 좋을 것 같아요 ^^ material.io/design/layout/understanding-layout.html#usage
안녕하세요 bro H - 님 계산기를 이용해서 자세히 계산을 해보면 72.5px이 나오게 되네요. 스케치 레이아웃 세팅 상에서는 소수점을 취급하지 않아서 72px이 나오게 됩니다. 사실 Column 값보다 Gutter 값이 더 중요합니다. 단을 나누는 기준이 되기 때문이죠. 컬럼값은 %로 처리하기 때문에 작은 해상도에서 보면 값이 유동적일 수 밖에 없어요. 가장 중요한 부분은 컨테이너 넓이, 단의 수, 거터 값 이렇게 3가지 입니다 ^^
![웹디자인 시작한다면 이건 꼭 보세요[포토샵]](http://i.ytimg.com/vi/X18sPNdD8yw/mqdefault.jpg)
12단을 추천드리는 또 하나의 이유는 퍼블리싱 때문입니다. 퍼블리셔 혹은 웹 프론트앤드 개발자분들이 퍼블리싱할 때 '부트스트랩'이라는 유명한 프레임워크를 사용해서 개발하는 경우가 많습니다. 부트스트랩에서 제공하는 기본 컬럼수 역시 12단 입니다.
참조 : bootstrapk.com/css/#grid
유익한 강의 만들어 주셔서 감사합니다! 기초적인 궁금증이 있어서요 지식인에 남겨야하나 고민했는데요.. 디자이너님이 답변주실수 있으실까요ㅜㅜ혹시 실무에서 어떤 회사가 로드뷰같은 서비스를 운영하는 회사라면 디자이너들은 아트보드를 몇개를 작업해야하는건가요? 로드뷰 같은 서비스는 어플로도 볼수도 있고 웹사이트에서도 확인이 가능하잖아요. 그럼 UI디자이너는 아트보드를 아이폰1개, 안드로이드 1개, 웹사이트1개 ->총3개를 열어놓고 해야하나요? 처음 사이즈를 무엇를 열어놓고 UI디자인 연습을 할지 모르겠어서요..그거와 상관없이 저그리드에 맞춰서 작업하고 기획자에게 공유하는 프로세스인가요? 이쪽 업종이 아니라 질문드립니다..
바로 이것입니다ㅠㅠㅠㅠㅠㅠㅠ 그리드 숫자 넣으면 바뀌는게 중요한게 아니라 기준을 뭘로 잡아야 할지 몰라서 어려웠어요ㅠㅠㅠㅠㅠㅠㅠ가려웠던 곳을 시원하게 긁어주는 이런 영상 감사합니다ㅠㅠㅠㅠㅠ감동이네요....
넵! ㅎㅎ 감사합니다 ㅎㅎㅎ
3년전 강의지만 설명해주시는대로 듣다가 여기까지 왔어요 너무 당연한 기초지만 이런 핵심내용을 아무도 안알려줬는데 진짜 감사합니다 디자인베이스님
도움이 되셨다니 다행입니다.ㅎㅎ
너무 좋은 강의 감사합니다. 늘 실무적인 부분이 궁금했습니다. 앞으로도 기대하겠습니다 !!!
와,,,,진짜 이렇게 좋은 강의 만들어주셔서 감사합니다✦✧ 입문자를 위한 바이블 같은 느낌,,,
감사합니다ㅎㅎ🔥🔥
정말 고급진 강좌입니다! 단순히 기능적인거 말고 이런 섬세한 강좌 강추입니다!!🤙🏻
감사합니다 호떡님ㅎㅎ 드디어 맥북을 고쳐서... 열심히 올려야죠 다시ㅎㅎ
5년전 영상이지만 설명이 지금 듣기에도 매우 깔끔하네요
좋은 영상 잘 보고갑니다!
아 그리고 혹시 미드저니 강의말고 스테이블 디퓨전 강의를 하실 의향은 없으실까요!
감사합니다~!ㅎㅎ 스테이블 디퓨전이나 comfyUI 강의도 생각중입니다~!
와오~ 너무 좋은 컨텐츠입니다! 현직 디자이너인데 스케치를 독학으로 하느라 책도 사보고 영상도 찾아헤맨지 어언 몇달인데 드디어 만났네요!! 이렇게 기본기를 체계적으로 왜.까지 알려주는 영상은 처음입니다!! 그것도 이렇게 차분한 목소리로 ㅎㅎㅎ 포폴 만들면서도 이런 수치에 대해서 너무 궁금했는데 암튼 최고입니다!! 핵심만 알려주고 군더더기 없고.... 사실 수치를 8그리드등.. 그렇게 쓰라니까 쓰고 이론적으로는 알겠는데 적용을 어떻게 해야하는지 모르겠어서 그냥 무작정 사용하고 있었거든요 .. 너무너무너무 도움이 됩니다!! 정말정말 감사합니다! 적게 일하고 많이 버세요!!! :) 앞으로도 쭈욱 잘 보겠습니다.
ㅎㅎ좋은 댓글 감사합니다. 도움되셨다니 정말 다행이네요!ㅋㅋ 적게 일하고 많이 벌고싶네요...남은 주말 잘보내세요 : )
최고에요.. 저는 에이전시에서 일하면서 매일같이 야근해도 아무도 이런거 안알려주셨는데 ㅠㅠ 정말 감사합니다ㅠㅠㅠ
감사합니다ㅎㅎ 웹디자인 입문강좌에서 그리드에 대해 또한번 다루는데 그것도 한번 봐보세요ㅎㅎ
디자인베이스 감사합니다 꼭 볼게요!!🙏😳
유트브영상 많이 봐도 그리드가 어려웠는데 딱 필요한 부분만 요약해주셔서 이 영상보고 바로 이해됐어요! 감사합니다
도움되었다니 다행이네요ㅎㅎ
지나가던 개발자입니다
디자인 리소스가 왜 그렇게 나왔던건지
이제야 이해가 되네요
설명이 참 간결하고 좋네요
감사합니다ㅎㅎ👍👍
슨생님 감사합니다,,,, 이렇게 좋은 채널이있었다니 ㅠㅠ 😭❤️👍🏻
감사합니다ㅎㅎ 슨생님 소리듣기엔 많이 부족하네요😂 좋은 정보 많이 공유할게요~!
항상 잘보고 있습니다. 다음편도 너무 기대됩니다. 자세하고 친절한 설명 항상 감사드립니다!
감사합니다🥰🥰
ㅜ_ㅜ 스케치 입문자 너무 막막했는데 이렇게 좋은 강의를 제공해주시다니요... 설명도 조곤조곤 잘해주시고 넘넘 좋아요..! 소리벗고 팬티질러 ㅜㅜ
감사합니다ㅎㅎㅎ 소리벗고 팬티질러🤣🤣
디베님 진짜 .... 정말 ... 짱이에요.. 당신 .. 더 유명해져라 ...
ㅋㅋㅋㅋ감사합니다! 유명해질까요ㅎㅎ
스케치 강의중에 이런 팁정보보단 툴기능 강의뿐이라 막상 디자인하기는 막막했는데ㅠㅠ쓰앵님 감사해여 적게일하고 많이 버세요 엉엉 광고도 스킵안할거에요
도움되셧다니 다행이네요ㅎㅎ 앞으로 UI강좌 올릴예정입니다😉 근데 쓰앵이 뭔가요ㅎㅎ
@@designbase 스카이캐슬 안보셨나여ㅠㅠㅠ쓰앵님(슨생님)!혹시 포트폴리오 하기에 좋은 사이즈도 있을까요? 그냥 웹에 맞추는게 좋을까요?!
아ㅋㅋㅋㅋ 스카이캐슬 띄엄띄엄봐서 몰랏네요..😂 저는 포폴제작할때 개인적으로 1920*1080으로 작업합니다~! 그리드는 웹처럼 퍼블단계가 없어서 그리드를 더 세세하게 해놓고 작업하는 편이에요 편집디자인하는 것처럼요
너무 감사해요, 취준생인데 나만 알고싶은 채널입니다!
알려주신 모바일 웹 해상도사이즈랑 앱만들때도 사이즈 같게 해도 되나요>?
감사합니다 준희님~! 취준 화이팅👍
반응형 웹이랑 앱 디자인이랑은 약간의 차이가 있을수있어요. OS 별 권장 가이드라인이 있고, 아이폰과 안드로이드 폰의 해상도가 다르며, 같은 안드로이드 폰이라고해도 갤럭시 노트9과 s8의 해상도와 가이드라인도 다르기 때문이죠ㅠㅠ
매번 새로운 해상도가 나오고 사용자들의 스마트폰 특정 해상도 사용 비율이 달라지기 때문에 정확한 치수를 매년 할수는 없습니다..
앱디자인을 하시려면 제가 올린 영상 중에
th-cam.com/video/OHrCLgscxfI/w-d-xo.html
이걸 보시면 더 도움이 되실 것 같아요😃
강의가 정말 꿀입니다.. 디자인 베이스님 너무 너무 감사드려요!
감사합니다.ㅎㅎ 한 꿀하죠ㅎㅎ
다른분야의 디자인에서 넘어 온 케이스 인데 정말... 도움이 많이 되었어요 감사합니다!! 들숨에 건강 날숨에 재력을 얻으시길바래요!!
ㅎㅎㅎ감사합니다! 들숨날숨 🙌
우연히 영상 보게됐는데, 많은 도움 됐어요. 너무 감사해요. 원래 댓글 잘 안남기는데 이렇게 남겨요☺️
디자인하시는 분이라 그런지 영상도 어쩜 이렇게 깔끔하게 잘하셨는지..... 보는내내 아주 편안하게 봤어요! 영상 하나만 봤는데 그 이후로 구독 바로 눌렀네용.. 지금부터 다른 영상 정주행하려구오 ~~~~ 사이트도 무료로 열어놓으셨던데,, 대단하신것같아요 팬됐어요🤚💛
주니어 디자이너인데 너무너무너무 감사해서 남깁니당!
좋게 봐주셔서 감사합니다!ㅎㅎ😌
꿀같은 영상입니다~ 다른분야에서 웹이 궁금했는데 큰 도움이 될거 같습니다. 좋은 영상 고맙습니다!!!
감사합니다🤗
굉장히 유용한 정보가 가득하네요! 오늘도 감사합니다!
감사합니다 수민님☺️☺️👍
디자인 왕초보 스케치 입문하는데 정말 도움이 많이 되는 강좌에요!!!! 감사합니다!!!!
감사합니다 :) 👍👍
많이 배우고 갑니다.
감사합니다~!
헐 너무 좋은 영상...
감사합니다!ㅎㅎ
좋은 영상 너무 감사합니다ㅠㅠ 깔끔하게 설명해주셔서 이해하기 쉬웠어요!
감사합니다ㅎㅎ🙌🙌
영상편집이나 비쥬얼 음악 수업순서 화법 등등 집중과 이해가 잘되는 수업 감사합니다!
💎보석 강의입니다.. 감사합니다.
감사합니다☺️👍
좋은 정보 감사합니다. 그런데 사용하신 레이아웃 셋팅으로(7:50)는 실제 Container 값이 1194로 Column: 72px, Gutter: 30px이 나오지 않습니다. (실제로 위 셋팅으로 할경우 Colum 73px Gutter: 29px~30px이 나옵니다.) 중요하다는 Gutter값도 고정되지 않는게 문제인것 같습니다.
네 맞습니다. 다른 댓글 혹은 웹디자인 강좌 중 그리드시스템에 대한 영상도 시청하시면 더 이해가 가실것같아요
Gutter 30, Columm 70을 Offset 375가 맞는게 아닌가요?
편집디자인에서 이번에 웹디자인으로 변경하려고 하는 중인데 너무 큰 도움이 됩니다 ㅜㅜ 정말 고마운 강좌! 감사합니다.
감사합니다ㅎㅎ 화이팅!
단이나 거터같은거 학원에서도 안알려주던데 정말 이제야 알아서 화날정도에요 좋은강의 감사합니다
학원에서는 포폴제작용 커리큘럼으로 알려주죠.. 이런 실무적인 고급정보는 디자인베이스니까 알려드리는 거에요 하하하☺️
좋은영상 감사합니다
좋게 봐주셔서 감사합니다!ㅎㅎ
와... 진짜 너무 좋은 강의네요. 감사합니다.
ㅎㅎ감사합니다🙌🙌
저는 스케치는 안쓰는데 수치 설명 해주셔서 진짜 너무 많이 도움되었습니다. 감사합니다!!!!
감사합니다ㅎㅎ🙌
감사합니다 ㅠㅠ 진짜 유용하고 다른강의랑 다르게 예뻐요.. 영상이 ㅎㅎ 강의에서도 디자인의 중요성이 나타나는 강의!!
감사합니다ㅎㅎ🙌
웹디자인 강좌 그리드와 레이아웃에 대해 올린 영상도 있는데 관심있으면 시청부탁드려요👍
초면이지만 사랑합니다 ㅠㅜ 도움이 많이 되는 영상이네요 감사해요!
감사합니다👍👍
👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻 최고예요
감사합니다👍
요즘 공부하면서 디자인 베이스님 영상 천천히 보고있어요..! 다 하나같이 너무 유용하고 친절하게 설명해주셔서 진짜 초보에겐 너무 큰 도움이 됩니다 ㅠㅠ 좋은 영상 만들어주셔서 너무너무 감사합니다! ♥
감사합니다!ㅎㅎ
그냥 최곱니다
감사합니다☺️👍
대박대박 제가 현재 목말라 했던 부분을 딱 집어서 알려주셔서 감사합니다....ㅜ정말 마지막에 말씀처럼 레이아웃 잡는 방법보단 레이아웃 수치를 잡는 방법과 그렇게 잡아야하는 설득적인 근거를 알고싶었어요 정말 알려주셔섯 감사합니다.
웹디자인 입문강좌에 레이아웃과 그리드 강좌도 같이 보시면 더욱 이해가 잘 갈거에요👍👍
이번영상 되게 유용하고 좋네요! 퍼블리셔까진 생각을 못했는데 앞으로 그리드 맞춰서 디자인하는 습관 길러야겠어요..! 그리드팁도 감사합니다👍
저는 기획자인데 너무 도움이 되었습니다.
도움되었다니 다행이네요!ㅎㅎ
흥하십시요 구독좋아요 박고갑니다 !
감사합니다ㅎㅎ😊😃
너무너무 도움이 많이 됩니다. 정말 감사합니다ㅠ_ㅠ날개 찾아가세요..천사의 날개..👼
ㅎㅎ감사합니다!🙌🙌
꿀같은 채널.....감사합니다ㅠㅠ
감사합니다😊😊👍👍
가려운데를 박박 긁어주시네요 정말 감사합니다!
감사합니다!ㅎㅎ🙌
정말 도움 됐어요 감사합니다!
댓글 감사해요ㅎㅎ👍
이번 영상도 감사합니다!! 완전 유익해요 ㅠㅠㅠ
감사합니다!ㅎㅎㅎ
좋은 꿀팁들 감사합니다.. !!! 기초를 튼튼히 하는데 도움이 됩니다 .
기초가 탄탄해야 디자인을 잘합니다ㅎㅎ👍
좋은 강의 감사합니다!!!!
감사합니다 :)
유용해요~ 감사합니다!
감사합니다 :)
강의 내용 너무 좋앙 ....
감사합니다👍
진짜 도움많이 됩니다 ㅠㅠ 계속 강좌올려주세요!!
네 다양한 강좌 준비중입니다ㅎㅎ 연말이라 프로젝트가 바빠서 못올리고있네요ㅠㅠ😢
좋은 강좌 감사합니다
감사합니다👍
정말 찾고 있던 정보였는데 영상 감사합니다!!
ㅎㅎ댓글 감사합니다 :)
4년 전 영상이지만 현재 2024인데 그래도 도움이 되었습니다!
도움되었다니 다행입니다!ㅎㅎ
이번에 피그마 독학하고 스케치 배웠던걸 까먹어서 다시 정주행하고있어요..! 다시 보니까 더 유익한 것 같고 너무 좋은 내용이에요 제발 코로나 끝나고 오프로 모였으면 좋겠어요 흑흑 ㅜㅜ
감사합니다ㅎㅎ 독학 화이팅🤗 코로나 끝낫음 좋겠네요 저도ㅠㅠ
진짜 유용한정보감사합니다🤗
감사합니다 ㅎㅎ
정말 제가 찾던 강의였어요ㅠㅠ감사합니다!
감사합니다ㅎㅎ🙌 그리드 시스템에 대해서 새롭게 올라갈 예정입니다.
감사합니다👏👏👏👏👏👏👏👏👏
반가워요🙌🙌🙌🙌🙌🙌🙌🙌🙌🙌
정독했습니다 :-)
감사합니다 :)
디자인베이스님 면접 앞두고 개념복습하러 다시 왔네요,,! 가려웠던 부분 박박 긁는 중입니다. 감사합니다!! (진작에 마스터 했어야 하는 내용인데.. ㅠㅎ)
도움되셨다니 다행이네요ㅎㅎ👍
그저 빛..
ㅠㅠ🤩
저도 제품페이지 위주로하다가 웹디자인에서 UXUI로 넘어가는데 너무 체계가 없었는데 정말로 좋은 공부되었습니다^^
감사합니다🤗🤗
선생님 넘 감사해요ㅠㅠㅠㅠㅠㅠ
감사합니다🙌👍
감사합니닷!
감사합니다!😊
12단을 추천하시는 이유는 확실하게 이해했습니다! 혹시 컨테이너는 1200으로 추천하시는 이유가 있을까요?
모든사이트를 1200으로 추천드리진 않습니다. 회사소개 사이트 같은 경우는 의도에 따라 1920 / 1600 / 1440 다양하게 작업하는 편입니다. 근데 콘텐츠를 운영하는 플랫폼의 경우에는 다양한 디바이스에 다 최적화를 해야하다보니, 그리드를 좁게 가져가는 편입니다.
유익한 강의 만들어 주셔서 감사합니다! 기초적인 궁금증이 있어서요 지식인에 남겨야하나 고민했는데요.. 디자이너님이 답변주실수 있으실까요ㅜㅜ혹시 실무에서 어떤 회사가 로드뷰같은 서비스를 운영하는 회사라면 디자이너들은 아트보드를 몇개를 작업해야하는건가요? 로드뷰 같은 서비스는 어플로도 볼수도 있고 웹사이트에서도 확인이 가능하잖아요. 그럼 UI디자이너는 아트보드를 아이폰1개, 안드로이드 1개, 웹사이트1개 ->총3개를 열어놓고 해야하나요? 처음 사이즈를 무엇를 열어놓고 UI디자인 연습을 할지 모르겠어서요..그거와 상관없이 저그리드에 맞춰서 작업하고 기획자에게 공유하는 프로세스인가요? 이쪽 업종이 아니라 질문드립니다..
서비스를 운영하는 Os에 맞게 작업해주시면 됩니다ㅎㅎ 아트보드보다는 페이지로 관리하는편이에요:) 작업하고 기획의도와 맞는지 서로 확인하고 개발자에게 가이드라인과 에셋을 넘깁니다
@@designbase 답변 감사합니다 :)
1. 퍼블리싱 시
- 컨테이너(max-width)를 1200px로 설정하고, 부모 요소에 좌우 패딩(40px)을 주나요?
- 아니면 컨테이너의 max-width를 패딩을 포함한 값(1280px)으로 설정하나요?
2. 피그마에서 부모 프레임을 1920px로 설정한 후에
- 내부에 1280 컨테이너 프레임을 또 생성하고 그 안에 1200 그리드를 설정하는 방식인가요?
- 부모 프레임(1920px)에 바로 1200px 그리드를 설정하는 방식인가요?
부모프레임에 바로 1200그리드를 설정한다면 퍼블리셔에서 넘겨줄때 좌우패딩은 어떻게 표시해서 주시는지 궁금합니다.
안녕하세요. 만약 디자인에서 그리드를 전체폭 : 1200 / 좌우 마진 : 40 라고 했다면 저는 퍼블리싱할 때 컨테이너의 max-width를 1280으로 하고 좌우 패딩을 40으로 적용하는 편입니다.
퍼블리셔에게 넘겨줄때는 문서화로 표기해서 넘겨주는 게 서로 가장 명확할 것 같습니다~!
좋은 영상 감사합니다! LNB가 좌측에 고정일 경우에는 어떻게 잡으시나요? LNB를 컬럼에 포함해서 12단으로 제작해야겠죠?
좌측 사이드바를 사용하는 경우는 사이드바의 폭을 고정값으로 두고, 나머지 여백에서 12단으로 그리드시스템을 만들어서 합니다~!
@@designbase 감사합니다 :)
혹시 11:38에 나오는 포토샵의 경우 레티나 디스플레이가 무슨뜻인가요?
애플 제품에 사용되는 아이폰이나 맥북 같은 기기의 해상도가 일반 디스플레이 화면과 비교했을때 화소 구분하기 어려운 애플의 IPS LCD와 OLED 제품의 브랜드 이름입니다.
8:15 여기서 Offset 을 360으로 잡는 이유가 있나요??? 다른 수치로 해도 Center를 누르는 한 별로 변화가 없어 보여서요 ㅠㅠ
센터 누르시면 됩니다. 스케치에서 Offset은 크게 중요하지 않습니다ㅎㅎ
잘보고갑니다:)
감사합니다 ㅜㅜ
나유리님 좋은 하루 보내세요~!
다 좋은데... gutter 30 column 72로 12단이 어떻게 1200이죠 1194지...
네 맞죠..ㅎㅎㅎ 그거에 대해서 문의주신 분들이 많아서 댓글에 답했어요ㅠㅠ 중요한건 컬럼 수치가 아니라는 점만 알면 될것같아요.👍
안녕하세요 꿀강좌 잘 보고 있습니다☺️ 혹시 아이패드 앱 같은 경우는 컨테이너 칼럼 거터값을 어떻게 작업하시는지 알 수 있을까요? 앱 디자인은 처음이라 네이티브 앱이면 모델 사이즈 별로 작업해야 하는지도 문의 드려요~ 감사합니다
감사합니다ㅎㅎ 아이패드는 아이패드 에어인지 프로인지에 따라 다릅니다. 컨테이너는 좌우 마진(24추천)을 고정한 상태에서 가변적으로 변하게 작업하시면 됩니다. 그냥 앱 디자인인 경우는 os별 가장 사용률이 높은 비율로 작업하시면됩니다. 앱스토어용 앱이면 아이폰x 기준으로 한벌만 하시면됩니다. 개발자가 알아서 오토 레이아웃으로 작업해줍니다.
디자인베이스 감사합니다 그러면 아이패드 에어, 프로, 아이폰. 이렇게 세 가지 작업해서 개발자한테 넘기면 되겠네요😀
답답해서 오늘 여기저기 물어봤는데 가장 명쾌한 답이었어요^^
적게 일하고 많이 버세요~!!
안녕하세요~ 14:46초 쯤에 나오는 크롬에서 css 확인 하는 창은 응용프로그램 인가요? 뭔지 알려주실 수 있나요?
크롬 자체적으로 제공하는 기능입니다. 맥 기준으로 cmd+option+i 누르면 나옵니다. 웹 페이지에 우클릭해서 ‘검사’를 눌러도 나옵니다ㅎㅎ
@@designbase 감사합니다 :)
안녕하세요! 디베님~ 궁금한 점이 있습니다.
요즘에도 실무에서 그리드를 많이 중요시해서 사용하나요?
1260이 컨테이너 사이즈라면 12단으로 했을때도 거터의 너비를
30으로 하면 좋을까요? 반응형으로 제작했을때 거터의 값이 더 중요한지
아니면 컬럼값이 정수로 떨어지도록 하는것이 더 중요한지도 궁금합니다.
모든값이 정수로 떨어지게 하는것이 코딩으로 홈페이지를 구현할때 제일 중요한 부분이라면
최대너비:1260 / 거터너비:22 / 칼럼:84 / 열:12 이런식으로 하면 되는것일까요?
디베님 명강의 감사합니다 ㅎㅎ
거터값이 더 중요합니다. 반응형처리하면 컬럼값은 어쩔수없이 소수점으로 떨어질수밖에 없어요ㅎㅎ 단, 정수로 떨어트리고싶다면 컬럼, 거터 둘다 정수로 만드는 방법도 있겠죠~! 저는 12단에 콘텐츠폭 : 1200, 거터 : 24를 사용하는 편입니다.
강의 감사합니다 궁금한게 있는데 모든페이지들에 같은 최대폭으로 디자인하나요 아니면 어떤 페이지는 최대폭을 다르게 디자인할수도 있을까요?
최대한 같은 폭으로 디자인하는 편인데, 상황에 따라 다르게 할 수도 있습니다. 전체적인 가이드라인을 두고 그안에 이벤트 페이지나, 상세페이지 등 달라야하는 부분에 대해서는 폭을 다르게도 가져갑니다.
넘 유용한 정보 감사합니다.. 질문이 있는데요 모바일 해상도가 가로 360px 기준으로 하면 된다고 하셨는데요 요즘에는 가로 해상도가 1080, 1440, 2208 px 등 크게 나오는데요.. 360으로 디자인해도 되는 건가요? 360기준으로 디자인하면 몇배수로 알아서 변경되는 걸까요?
안녕하세요. 말씀해주신 해상도는 dpi개념에 픽셀이고, 상대값인 dp 개념으로는 1dp = 1px인 경우로 디자인을 하면 됩니다. 피그마나 스케치, xd와 같은 모든 툴은 상대값 개념으로 제공합니다. 개발시에도 상대값을 기준으로 하다보니 걱정안하셔도 됩니다. 단지, 운영할때 필요한 배너 디자인처럼 비트맵 기반인 경우에만 적용 디바이스의 배율에 맞게 크게 제작하시면 됩니다.
선생님ㅠㅠ 강좌 너무 잘 봤습니다!!
제가 아직 스케치 프로그램이 없눈뎅.. 오늘 강좌 포토샵에서도 응용해도 문제 없는건가요?
넵!ㅎㅎ 툴은 툴일 뿐이죠. 포토샵에서 작업해도 됩니다. 웹디자인 강좌에서 그리드시스템에 대해 좀 더 자세히 다뤘는데 그 영상도 시청해보세요ㅎㅎ
안녕하세요 강의보며 너무 큰 도움 받고있습니다! 혹시 모바일웹이 아닌 앱 작업 하실 때도 마찬가지로 360을 기준으로 작업하시나요? 제가 xs를 쓰고있어서 직접 폰에 넣어 테스트하기도 편하고 아무래도 최신폰을 기준으로 작업하는게 나을 것 같아서 375를 기준으로 작업하고 있었거든요!(안드로이드는 이미 360기준으로 하고 있어서 ios만 봤을 때)
안녕하세요~! 앱 디자인 작업시에는 클라이언트와 협의해서 진행합니다. 보통 안드로이드와 iOS 두벌로 작업합니다. 360, 375 두벌로 작업해요ㅎㅎ
안녕하세요. 영상 잘 보고 있습니다. 제가 배울때 컨테이너영역을 1200px로 잡고 좌우 양쪽 마진 10px 씩 줘서 1080px 을 컨텐츠 영역으로 잡았었는데 양쪽 마진을 하고 안하고 차이가 있나요??
1200에서 좌우마진 10씩주면 1180아닌가요?? 기본적으로 좌우 마진을 주는건 반응형으로 브라우저 창을 줄여도 좌우에 항상 일정 여백을 줘서 콘텐츠에 방해안가도록 하는것이에요ㅎㅎ 그리고 컨테이너(콘텐츠)영역에 정답은 없습니다. 전체폭, 컨테이너 넓이, 컬럼수, 거터, 좌우 마진 이렇게가 중요합니다.
@@designbase 아 제가 1180을 잘못썻네요 ㅎㅎ;; 아무튼 답변 감사합니다 ^^
안녕하세요 !! 최근에 랜딩페이지 제작하면서 영상 찾아보고 있는 신입디자이너입니다 !!
해상도와 최적화된 그리드에 대해 자세하게 설명해주셔서 정말많은 도움이 되었습니다 !!!
혹시 웹, 모바일에 최적화된 폰트사이즈가 있을까요 ?.?
아니면 해상도 처럼 케바케로 임의로 폰트사이즈를 정해서 진행해도 되는지 궁금합니다 :)
안녕하세요 상욱님😀 폰트 사이즈같은 경우는 해당 브랜드사이트의 가이드라인이 없을경우에는 케바케로 진행합니다. 가독성을 헤치지않을 정도의 최소 사이즈만 지키면 문제 없을 것 같에요. 저는 Pc에서 본문 사이즈를 16-18 모바일에서 14-16 사이로 사용합니다. 주석처럼 작아도 되거나 영문인 경우는 PC에서 12-14 모바일에서 10-12로 조절해서 사용중이에요~!
폰트가 작아서 문제가되는 경우는 있어도 크다고 문제되는 경우는 많지 않은 것같아요.👍 너무 과하지 않는 선에서 글줄과 가독성을 신경쓰고 정보의 하이라키에 맞게 폰트 크기를 조절해주면 됩니다ㅎㅎ
@@designbase 친절하고 자세한 설명 정말 감사합니다 !!! 복받으실꺼에요 ㅜㅜ
안녕하세요 강의보고 너무 궁금해서 질문드립니다. Material design guide 에는 large tablet 제작시 gutter와 margin 을 24px 로 두고 잇던데요.. 칼럼은 항상 12단으로 둔다면 제작 페이지사이즈에 따라 gutter 사이즈는 임의로 조정가능하다는 건가요?
안녕하세요. 네 거터값은 Breakpoint에 따라 조절이 가능합니다.
강의 너무 감사합니다!!! 저 하나만 여쭤봐도 될까요? 360 기준으로 하면은 320일때는 어떻게 대응해야할까요..? 반응형일땐 신경을 크게 쓰지 않아도 되나요?
안녕하세요...너무 늦게 답글을 남기네요 ㅠㅠ 어플로 답장하다보니 놓친 댓글들이 상당히 많네요..ㅠㅠ 360기준으로 하면 320일때는 반응형으로 제작될 경우 폭이 %로 처리되기때문에 따로 작업을 안하셔도 문제없습니다.
안녕하세요 웹디자인을 처음 하게 되어서 영상 몇번씩 돌려보고 정말 유용하게 보았습니다!
질문이 한가지 있는데, 아트보드 작업환경 크기는 1980으로 하되 컨테이너는 1200으로 하라고 하셨는데 헤더는 컨테이너에 상관없이 1980 아트보드 양쪽 끝에 맞춰서 작업해도 괜찮은가요? 보여주신 예시 사이트들은 그렇게 되어있는 것 같아서요~ 그럼 작은 화면으로 봐도 안짤리나요?? (참고로 저는 xd로 작업하고 있습니다)
답변 부탁드립니다 감사합니다 :)
안녕하세요~! 1920을 말씀하시는 것 같습니다. 컨테이너 없이 꽉차게 해도 문제는 없지만, 그렇게 했을때 유의해야할점 몇가지 말씀드리자면 테블릿 사이즈 전까지 대응해야할 스크린 사이즈가 많아서 다 잘보이게 제작하려면 개발에서도 다 맞춰서 제작해야되기때문에 디자인, 개발 시간이(제작비용) 많이 듭니다. 그리고 만약 안지키면 반응형에 취약하게 돼서 특정 스크린에서 짤리는 문제가 발생합니다. 그리고 콘텐츠 폭이 넓어서 이미지가 많이 들어갈 경우 웹사이트에 불러오는 이미지 용량이 커서 서버비용도 많이 나가고 로딩속도에 영향을 끼치게 됩니다. 그럼 자연스럽게 이탈률도 올라가게 됩니다. 권장 가이드라인을 드린것이고 무조건 그렇게 할 필요는 없습니다~! 사이트 성향에 맞게 디자이너의 의도에 맞게 제작하시면됩니다.
@@designbase 자세한 답변 정말 감사드립니다! 저는 콘텐츠 전체가 아니라 Header만 말씀드린 것이긴 한데 그래도 큰 문제가 될까요?ㅠㅠ
아뇨 헤더 영역만 그렇게하는건 문제안됩니다ㅎㅎ
@@designbase 넵 답변 감사합니다 :)
웹디자인을 이제 시작하는데 디자인기획이나 추구하려는 방향을 결정하는데 도움이 되는 책을 추천해주시면 안될까요? 도움이 많이 될 것 같아요!
웹디자인 관련 서적은 잘모르겠습니다ㅠㅠ 저는 브런치나 미디엄에 관련 아티클을 통해 정보를 습득하고 있어요.
한가지 의문점이 있어서 댓글 남겨요. 12단에 offset 360 gutter 30 column 72면 총 width는 1200이 아니라 1194데.. 어떻게 1200으로 맞춰지는건가요?
안녕하세요 후니훈님. 다른 댓글에도 관련 문의를 주신 내용이 있어서 답변드린 내용 똑같이 남깁니다. 계산기를 이용해서 자세히 계산을 해보면 72.5px이 나오게 되네요. 스케치 레이아웃 세팅 상에서는 소수점을 취급하지 않아서 72px이 나오게 됩니다. 사실 Column 값보다 Gutter 값이 더 중요합니다. 단을 나누는 기준이 되기 때문이죠. 컬럼값은 %로 처리하기 때문에 작은 해상도에서 보면 값이 유동적일 수 밖에 없어요. 가장 중요한 부분은 컨테이너 넓이, 단의 수, 거터 값 이렇게 3가지 입니다 ^^ 컨테이너 넓이를 전체 넓이(예시 1920)에서 좌우 마진 뺀 값으로 하기 때문에 단 수와 거터값만 고정하면 컬럼값은 유동적으로 변하기 때문에 코드로 제작시에도 소수점이 나올 수 있습니다.
@@designbase 와 이렇게 빠른 댓글이 달릴줄 몰랐네요. 감사합니다 이해했습니다...!
태블릿 권장 규격도 추천해주세요!(컨테이너도요!)
태블릿은 768기준으로 콘텐츠폭(컨테이너)720 추천드립니다!
영상 정말 잘 봤습니다😊ㅎㅎ 내용 중에 스케치로 [반응형 모바일 웹] 작업 시 360 한 벌로 디자인한다고 하셨는데요. 반응형 웹이 아니라 [모바일 전용 웹]이면 앱 작업처럼 안드 360, iOS 375 두 벌을 디자인해야하나요? 아니면 마찬가지로 360하나만 해서 코딩으로 처리하나요?
안녕하세요~!ㅎㅎ 모바일전용웹으로 진행하더라도 360*640(가장 많은 해상도 비율로 점점 바뀌는 부분입니다.)기준으로 작업하고 이미지 에셋은 2배로 진행하는데 이미지 에셋은 아이폰 기준으로 하는게 더 좋습니다. 가로폭750px(375레티나)
UI는 어차피 모바일 안에서도 반응형으로 제작되고 UI 요소들은 레티나와 무관하니까 1배율로잡고 배너 이미지나 콘텐츠 영역에 들어가는 운영성 부분은 따로 제작을 해야되는거죠~ㅎㅎ
그럼 아이콘같은 에셋은 앱처럼 1~4배수로 전달드리고 배너나 이벤트 이미지 부분은 375기준으로 2배수(750)로 전달 드리는 거군요ㅎ 2배수로 하면 고해상도 폰에서 봤을 때 깨져보이진 않나요?
아뇨 아이콘의 경우는 웹은 벡터기반의 svg를 사용하면 돼서 1배율 아이콘 하나만 있으면 됩니다~!
배수로 하는 부분은 비트맵 기반인 이미지 영역만 잡아주면돼요. 근데 최신 폰들이 점점 해상도가 좋아져서 나중에는 3배로 작업해야될 날도 오겠죠?? 아직은 업계에서는 2배로 작업합니다. 서버비용과 로딩 속도에도 영향을 주기때문이죠
데스크탑 > 타블렛 > 모바일로 작업이 이어지면서 각 단계에서 줄여주는(font, shape 등) 어떤 퍼센트지나 공식이 따로 있는지 궁금하네요.
이렇다할 정해진 퍼센테지가 따로 없지만 회사 가이드라인마다 조금 다른것 같습니다!
아직도 시안 잡을때 알긴 하는데 정확히 몰라서 보러 옵니다
디자인베이스 안녕하세요~궁금한점이 있어 질문드립니다. 위에 답변 내용데로 Column값을 계산하면 하나당 72.5px이 나오는데요, 스케치에서 셋팅하면 column 값이 73px로 잡히고, Gutter값도 29~30px로 잡히는데 나중에 퍼블할때 지장이 없는지 궁금합니다~
안녕하세요 김병수님~! 네 위에 비슷한 내용으로 댓글 달아주신분들에 답변한 것처럼 중요한 것은 Container에 들어갈 Max-width랑 Gutter값입니다. Colunm값은 반응형으로 유동적으로 변하는 값입니다ㅎㅎ
@@designbase Column값은 유동적으로 변해서 큰 상관없다고 해도 Gutter값도 30->29px로 바뀌는데 문제 없나요?
졸은 영상 감사합니다. 그런데 12컬럼 예시는 12x72 + 30x11 = 1194로 72px 정수로 떨어지지는 않는 것 같은데 제가 잘못 계산한 걸까요? ^^
댓글에도 남겼지만 잘못된것 맞습니다..!ㅎㅎ 거터를 24로 하는걸 추천드립니다!
회사에서 윈도우를 쓰는데 스케치 툴과 비슷한 프로그램은 없을까요~?
피그마를 강추합니다!ㅎㅎ 윈도우에서 사용하시면 됩니다ㅎㅎ
감사합니다
엡 작업할때 사이즈에 상관 없이 콘테이너를 360(offset 20씩) 잡고 그 안에서만 작업을 해야 하나요?
기초지식 없이 무작정 하다 이제서야 보게 되는데 415에서 360 컨테이너로 잡고 하니까
뭔가 옆 margin이 너무나 폭이 넓어 보여서요
콘테이너(콘텐츠영역)을 고정하기보단 좌우 마진 20px씩 잡고 컬럼수와 거터 값 고정합니다.ㅎㅎ 사람마다 회사마다 방식이 약간씩 달라서 정답은 없습니다. 안드로이드 권장 가이드라인은 360 기준으로 좌우 마진 16씩인데 저는 개인적으로 20을 선호합니다
와 유아이유엑스 독학해서 요번에 취업하거든요 진짜 너무 감사합니다. 이걸이제보다니요 혹시 이러한 공식을 xd에서 적용해도 문제는 없는거죠 툴은 그저 사용수단이니깐요 ㅠㅡㅠ
우와우 취업 축하드려요!!ㅎㅎ 네 툴은 툴일뿐이죠ㅎㅎ 근데 해당 그리드에는 조금 유의해야할점이 있어서..웹디자인 그리드 시스템 강좌를 봐주시면 부가설명이 될것 같아요~!
안녕하세요! 구독하고 꾸준히 강좌 보고있는 신입입니다! 이번 반응형 그리드 강좌보고 스케치에서 똑같이 따라해보는데 질문 드리고싶은게 2가지 있어서 댓글 남깁니다.
1. width 1200px, offset 360px, columns 12, gutter width 30px 으로 잡으면 스케치에서 column width 값이 저절로 70으로 바뀌는데 이건 왜 이러는건가요ㅠㅠ? 계산기로 계산해봐도 72값이 안나오는거 같은데 혹시 자세한 설명 부탁드려도 될까요?
2. 모바일에서는 주로 4개의 column을 사용한다는 말도 많이 들었는데 이럴땐 거터 값을 어떻게 계산하면 좋은지도 혹시 추천해주실 수 있나요?
언제나 좋은 강좌 감사드립니다 :)
안녕하세요 슬기님~!
우선 1번에 대한 내용은 레이아웃 세팅 창 설정에서 'Gutter on outside'를 체크해서 그런 값이 나오는 것 같습니다.
그리고 계산기를 이용해서 자세히 계산을 해보면 72.5px이 나오게 되네요. 스케치 레이아웃 세팅 상에서는 소수점을 취급하지 않아서 72px이 나오게 됩니다. 사실 Column 값보다 Gutter 값이 더 중요합니다. 단을 나누는 기준이 되기 때문이죠. 컬럼값은 %로 처리하기 때문에 작은 해상도에서 보면 값이 유동적일 수 밖에 없기 때문이죠.
2번 같은 경우는 영상에서 말씀드린 것처럼 사실 정답은 없습니다. 대기업 사이트에서 4단 그리드를 사용하고 있는 사이트가 있죠. 1번과 어느정도 겹치는 내용이지만, 가장 중요한 부분이 3가지 있습니다. 컨테이너 넓이, 단의 수, 거터 값 이렇게 입니다.
컨테이너 값에 의해 좌우 마진(스케치 상에서 Offset 값)이 정해지겠죠. 그리고 단을 4로 정해서 4단 그리드를 만들면 되겠죠. 마지막으로 거터 값은 정수로 하는 게 좋죠. 16px 이런식으로요. 그럼 자동으로 칼럼값이 68px이 됩니다.
자세한 부분은 안드로이드 머터리얼 디자인에 기재된 가이드라인을 참고하시면 좋을 것 같아요 ^^
material.io/design/layout/understanding-layout.html#usage
포토샵으로는 1200 그리드 잡아서 영상처럼 할시 1200에 영상에 나온듯이 전체값 1920에 여백 360 컨테이너 1200에 12컬럼과 거터30에 72와이드컬럼 으로 할경우 1200에 저렇게 영상처럼 깔끔히 맞아떨어지게 안나오는데 스케치랑 포토샵은 달라서 그렇게 나오는건가요?? 이해가 잘 안가서요 ㅠㅜ 제가 계산을 못한건지 모르겠어서 혼란스럽네요 ㅠㅜ...
안녕하세요 bro H - 님 계산기를 이용해서 자세히 계산을 해보면 72.5px이 나오게 되네요. 스케치 레이아웃 세팅 상에서는 소수점을 취급하지 않아서 72px이 나오게 됩니다. 사실 Column 값보다 Gutter 값이 더 중요합니다. 단을 나누는 기준이 되기 때문이죠. 컬럼값은 %로 처리하기 때문에 작은 해상도에서 보면 값이 유동적일 수 밖에 없어요. 가장 중요한 부분은 컨테이너 넓이, 단의 수, 거터 값 이렇게 3가지 입니다 ^^
@@designbase 그렇군요 좋은 정보 알려주셔서 정말 감사드립니다!!!