#4 반응형 웹디자인을 위한 최적화된 그리드 만들기(UI 디자인 입문이라면 꼭 봐야할 영상) - 스케치 강좌

[@designbase]

12단을 추천드리는 또 하나의 이유는 퍼블리싱 때문입니다. 퍼블리셔 혹은 웹 프론트앤드 개발자분들이 퍼블리싱할 때 '부트스트랩'이라는 유명한 프레임워크를 사용해서 개발하는 경우가 많습니다. 부트스트랩에서 제공하는 기본 컬럼수 역시 12단 입니다. 참조 : bootstrapk.com/css/#grid

[@wpekrj]

유익한 강의 만들어 주셔서 감사합니다! 기초적인 궁금증이 있어서요 지식인에 남겨야하나 고민했는데요.. 디자이너님이 답변주실수 있으실까요ㅜㅜ혹시 실무에서 어떤 회사가 로드뷰같은 서비스를 운영하는 회사라면 디자이너들은 아트보드를 몇개를 작업해야하는건가요? 로드뷰 같은 서비스는 어플로도 볼수도 있고 웹사이트에서도 확인이 가능하잖아요. 그럼 UI디자이너는 아트보드를 아이폰1개, 안드로이드 1개, 웹사이트1개 ->총3개를 열어놓고 해야하나요? 처음 사이즈를 무엇를 열어놓고 UI디자인 연습을 할지 모르겠어서요..그거와 상관없이 저그리드에 맞춰서 작업하고 기획자에게 공유하는 프로세스인가요? 이쪽 업종이 아니라 질문드립니다..

[@yello192]

바로 이것입니다ㅠㅠㅠㅠㅠㅠㅠ 그리드 숫자 넣으면 바뀌는게 중요한게 아니라 기준을 뭘로 잡아야 할지 몰라서 어려웠어요ㅠㅠㅠㅠㅠㅠㅠ가려웠던 곳을 시원하게 긁어주는 이런 영상 감사합니다ㅠㅠㅠㅠㅠ감동이네요....

[@designbase]

넵! ㅎㅎ 감사합니다 ㅎㅎㅎ

[@토순-s1h]

3년전 강의지만 설명해주시는대로 듣다가 여기까지 왔어요 너무 당연한 기초지만 이런 핵심내용을 아무도 안알려줬는데 진짜 감사합니다 디자인베이스님

[@designbase]

도움이 되셨다니 다행입니다.ㅎㅎ

[@냐냐냐-t1p]

너무 좋은 강의 감사합니다. 늘 실무적인 부분이 궁금했습니다. 앞으로도 기대하겠습니다 !!!

[@소야이-j5p]

와,,,,진짜 이렇게 좋은 강의 만들어주셔서 감사합니다✦✧ 입문자를 위한 바이블 같은 느낌,,,

[@designbase]

감사합니다ㅎㅎ🔥🔥

[@김현중-q9f]

정말 고급진 강좌입니다! 단순히 기능적인거 말고 이런 섬세한 강좌 강추입니다!!🤙🏻

[@designbase]

감사합니다 호떡님ㅎㅎ 드디어 맥북을 고쳐서... 열심히 올려야죠 다시ㅎㅎ

[@y1980082]

와오~ 너무 좋은 컨텐츠입니다! 현직 디자이너인데 스케치를 독학으로 하느라 책도 사보고 영상도 찾아헤맨지 어언 몇달인데 드디어 만났네요!! 이렇게 기본기를 체계적으로 왜.까지 알려주는 영상은 처음입니다!! 그것도 이렇게 차분한 목소리로 ㅎㅎㅎ 포폴 만들면서도 이런 수치에 대해서 너무 궁금했는데 암튼 최고입니다!! 핵심만 알려주고 군더더기 없고.... 사실 수치를 8그리드등.. 그렇게 쓰라니까 쓰고 이론적으로는 알겠는데 적용을 어떻게 해야하는지 모르겠어서 그냥 무작정 사용하고 있었거든요 .. 너무너무너무 도움이 됩니다!! 정말정말 감사합니다! 적게 일하고 많이 버세요!!! :) 앞으로도 쭈욱 잘 보겠습니다.

[@designbase]

ㅎㅎ좋은 댓글 감사합니다. 도움되셨다니 정말 다행이네요!ㅋㅋ 적게 일하고 많이 벌고싶네요...남은 주말 잘보내세요 : )

[@ydr4585]

슨생님 감사합니다,,,, 이렇게 좋은 채널이있었다니 ㅠㅠ 😭❤️👍🏻

[@designbase]

감사합니다ㅎㅎ 슨생님 소리듣기엔 많이 부족하네요😂 좋은 정보 많이 공유할게요~!

[@aeyounglim212]

항상 잘보고 있습니다. 다음편도 너무 기대됩니다. 자세하고 친절한 설명 항상 감사드립니다!

[@designbase]

감사합니다🥰🥰

[@mranderson_2961]

지나가던 개발자입니다 디자인 리소스가 왜 그렇게 나왔던건지 이제야 이해가 되네요 설명이 참 간결하고 좋네요

[@designbase]

감사합니다ㅎㅎ👍👍

[@yessol2683]

디베님 진짜 .... 정말 ... 짱이에요.. 당신 .. 더 유명해져라 ...

[@designbase]

ㅋㅋㅋㅋ감사합니다! 유명해질까요ㅎㅎ

[@jodonghee89]

다른분야의 디자인에서 넘어 온 케이스 인데 정말... 도움이 많이 되었어요 감사합니다!! 들숨에 건강 날숨에 재력을 얻으시길바래요!!

[@designbase]

ㅎㅎㅎ감사합니다! 들숨날숨 🙌

[@yusunseo5216]

ㅜ_ㅜ 스케치 입문자 너무 막막했는데 이렇게 좋은 강의를 제공해주시다니요... 설명도 조곤조곤 잘해주시고 넘넘 좋아요..! 소리벗고 팬티질러 ㅜㅜ

[@designbase]

감사합니다ㅎㅎㅎ 소리벗고 팬티질러🤣🤣

[@katelee9486]

강의가 정말 꿀입니다.. 디자인 베이스님 너무 너무 감사드려요!

[@designbase]

감사합니다.ㅎㅎ 한 꿀하죠ㅎㅎ

[@user-lq4vf5hd6m]

너무 감사해요, 취준생인데 나만 알고싶은 채널입니다!

[@user-lq4vf5hd6m]

알려주신 모바일 웹 해상도사이즈랑 앱만들때도 사이즈 같게 해도 되나요>?

[@designbase]

감사합니다 준희님~! 취준 화이팅👍

[@designbase]

반응형 웹이랑 앱 디자인이랑은 약간의 차이가 있을수있어요. OS 별 권장 가이드라인이 있고, 아이폰과 안드로이드 폰의 해상도가 다르며, 같은 안드로이드 폰이라고해도 갤럭시 노트9과 s8의 해상도와 가이드라인도 다르기 때문이죠ㅠㅠ 매번 새로운 해상도가 나오고 사용자들의 스마트폰 특정 해상도 사용 비율이 달라지기 때문에 정확한 치수를 매년 할수는 없습니다.. 앱디자인을 하시려면 제가 올린 영상 중에 kzbin.info/www/bejne/hXnVdH-dqMirnKs 이걸 보시면 더 도움이 되실 것 같아요😃

[@Yulia-kw6wb]

유트브영상 많이 봐도 그리드가 어려웠는데 딱 필요한 부분만 요약해주셔서 이 영상보고 바로 이해됐어요! 감사합니다

[@designbase]

도움되었다니 다행이네요ㅎㅎ

[@lee-v3u9x]

스케치 강의중에 이런 팁정보보단 툴기능 강의뿐이라 막상 디자인하기는 막막했는데ㅠㅠ쓰앵님 감사해여 적게일하고 많이 버세요 엉엉 광고도 스킵안할거에요

[@designbase]

도움되셧다니 다행이네요ㅎㅎ 앞으로 UI강좌 올릴예정입니다😉 근데 쓰앵이 뭔가요ㅎㅎ

[@lee-v3u9x]

@@designbase 스카이캐슬 안보셨나여ㅠㅠㅠ쓰앵님(슨생님)!혹시 포트폴리오 하기에 좋은 사이즈도 있을까요? 그냥 웹에 맞추는게 좋을까요?!

[@designbase]

아ㅋㅋㅋㅋ 스카이캐슬 띄엄띄엄봐서 몰랏네요..😂 저는 포폴제작할때 개인적으로 1920*1080으로 작업합니다~! 그리드는 웹처럼 퍼블단계가 없어서 그리드를 더 세세하게 해놓고 작업하는 편이에요 편집디자인하는 것처럼요

[@포잉-x8f]

굉장히 유용한 정보가 가득하네요! 오늘도 감사합니다!

[@designbase]

감사합니다 수민님☺️☺️👍

[@김현주-l2r]

좋은 영상 너무 감사합니다ㅠㅠ 깔끔하게 설명해주셔서 이해하기 쉬웠어요!

[@designbase]

감사합니다ㅎㅎ🙌🙌

[@진공청소기]

5년전 영상이지만 설명이 지금 듣기에도 매우 깔끔하네요 좋은 영상 잘 보고갑니다!

[@진공청소기]

아 그리고 혹시 미드저니 강의말고 스테이블 디퓨전 강의를 하실 의향은 없으실까요!

[@designbase]

감사합니다~!ㅎㅎ 스테이블 디퓨전이나 comfyUI 강의도 생각중입니다~!

[@ssolssoling]

디자인 왕초보 스케치 입문하는데 정말 도움이 많이 되는 강좌에요!!!! 감사합니다!!!!

[@designbase]

감사합니다 :) 👍👍

[@Loi-wu8di]

영상편집이나 비쥬얼 음악 수업순서 화법 등등 집중과 이해가 잘되는 수업 감사합니다!

[@Ahyun-xm6vo]

요즘 공부하면서 디자인 베이스님 영상 천천히 보고있어요..! 다 하나같이 너무 유용하고 친절하게 설명해주셔서 진짜 초보에겐 너무 큰 도움이 됩니다 ㅠㅠ 좋은 영상 만들어주셔서 너무너무 감사합니다! ♥

[@designbase]

감사합니다!ㅎㅎ

[@jinnyoh-l8t]

우연히 영상 보게됐는데, 많은 도움 됐어요. 너무 감사해요. 원래 댓글 잘 안남기는데 이렇게 남겨요☺️ 디자인하시는 분이라 그런지 영상도 어쩜 이렇게 깔끔하게 잘하셨는지..... 보는내내 아주 편안하게 봤어요! 영상 하나만 봤는데 그 이후로 구독 바로 눌렀네용.. 지금부터 다른 영상 정주행하려구오 ~~~~ 사이트도 무료로 열어놓으셨던데,, 대단하신것같아요 팬됐어요🤚💛 주니어 디자이너인데 너무너무너무 감사해서 남깁니당!

[@designbase]

좋게 봐주셔서 감사합니다!ㅎㅎ😌

[@mchwan]

편집디자인에서 이번에 웹디자인으로 변경하려고 하는 중인데 너무 큰 도움이 됩니다 ㅜㅜ 정말 고마운 강좌! 감사합니다.

[@designbase]

감사합니다ㅎㅎ 화이팅!

[@샐라비]

꿀같은 영상입니다~ 다른분야에서 웹이 궁금했는데 큰 도움이 될거 같습니다. 좋은 영상 고맙습니다!!!

[@designbase]

감사합니다🤗

[@구독자-k8u]

단이나 거터같은거 학원에서도 안알려주던데 정말 이제야 알아서 화날정도에요 좋은강의 감사합니다

[@designbase]

학원에서는 포폴제작용 커리큘럼으로 알려주죠.. 이런 실무적인 고급정보는 디자인베이스니까 알려드리는 거에요 하하하☺️

[@유해인-y5r]

대박대박 제가 현재 목말라 했던 부분을 딱 집어서 알려주셔서 감사합니다....ㅜ정말 마지막에 말씀처럼 레이아웃 잡는 방법보단 레이아웃 수치를 잡는 방법과 그렇게 잡아야하는 설득적인 근거를 알고싶었어요 정말 알려주셔섯 감사합니다.

[@designbase]

웹디자인 입문강좌에 레이아웃과 그리드 강좌도 같이 보시면 더욱 이해가 잘 갈거에요👍👍

[@뿌잉뿌-x7d]

이번영상 되게 유용하고 좋네요! 퍼블리셔까진 생각을 못했는데 앞으로 그리드 맞춰서 디자인하는 습관 길러야겠어요..! 그리드팁도 감사합니다👍

[@k2amj2ik]

와... 진짜 너무 좋은 강의네요. 감사합니다.

[@designbase]

ㅎㅎ감사합니다🙌🙌

[@sooyun721]

저는 스케치는 안쓰는데 수치 설명 해주셔서 진짜 너무 많이 도움되었습니다. 감사합니다!!!!

[@designbase]

감사합니다ㅎㅎ🙌

[@revive30]

좋은 정보 감사합니다. 그런데 사용하신 레이아웃 셋팅으로(7:50)는 실제 Container 값이 1194로 Column: 72px, Gutter: 30px이 나오지 않습니다. (실제로 위 셋팅으로 할경우 Colum 73px Gutter: 29px~30px이 나옵니다.) 중요하다는 Gutter값도 고정되지 않는게 문제인것 같습니다.

[@designbase]

네 맞습니다. 다른 댓글 혹은 웹디자인 강좌 중 그리드시스템에 대한 영상도 시청하시면 더 이해가 가실것같아요

[@revive30]

Gutter 30, Columm 70을 Offset 375가 맞는게 아닌가요?

[@good2dae]

헐 너무 좋은 영상...

[@designbase]

감사합니다!ㅎㅎ

[@jiji9307]

이번에 피그마 독학하고 스케치 배웠던걸 까먹어서 다시 정주행하고있어요..! 다시 보니까 더 유익한 것 같고 너무 좋은 내용이에요 제발 코로나 끝나고 오프로 모였으면 좋겠어요 흑흑 ㅜㅜ

[@designbase]

감사합니다ㅎㅎ 독학 화이팅🤗 코로나 끝낫음 좋겠네요 저도ㅠㅠ

[@946god]

진짜 도움많이 됩니다 ㅠㅠ 계속 강좌올려주세요!!

[@designbase]

네 다양한 강좌 준비중입니다ㅎㅎ 연말이라 프로젝트가 바빠서 못올리고있네요ㅠㅠ😢

[@김효진-e8q]

꿀같은 채널.....감사합니다ㅠㅠ

[@designbase]

감사합니다😊😊👍👍

[@eunyeaa]

8:15 여기서 Offset 을 360으로 잡는 이유가 있나요??? 다른 수치로 해도 Center를 누르는 한 별로 변화가 없어 보여서요 ㅠㅠ

[@designbase]

센터 누르시면 됩니다. 스케치에서 Offset은 크게 중요하지 않습니다ㅎㅎ

[@lorem92]

감사합니다 ㅠㅠ 진짜 유용하고 다른강의랑 다르게 예뻐요.. 영상이 ㅎㅎ 강의에서도 디자인의 중요성이 나타나는 강의!!

[@designbase]

감사합니다ㅎㅎ🙌

[@designbase]

웹디자인 강좌 그리드와 레이아웃에 대해 올린 영상도 있는데 관심있으면 시청부탁드려요👍

[@eunahcho7817]

너무너무 도움이 많이 됩니다. 정말 감사합니다ㅠ_ㅠ날개 찾아가세요..천사의 날개..👼

[@designbase]

ㅎㅎ감사합니다!🙌🙌

[@웹공부용계정]

정말 찾고 있던 정보였는데 영상 감사합니다!!

[@designbase]

ㅎㅎ댓글 감사합니다 :)

[@yeye-vz5pq]

안녕하세요~ 14:46초 쯤에 나오는 크롬에서 css 확인 하는 창은 응용프로그램 인가요? 뭔지 알려주실 수 있나요?

[@designbase]

크롬 자체적으로 제공하는 기능입니다. 맥 기준으로 cmd+option+i 누르면 나옵니다. 웹 페이지에 우클릭해서 ‘검사’를 눌러도 나옵니다ㅎㅎ

[@yeye-vz5pq]

@@designbase 감사합니다 :)

[@Kiki-zc3mh]

가려운데를 박박 긁어주시네요 정말 감사합니다!

[@designbase]

감사합니다!ㅎㅎ🙌

[@이규리-v4s]

이번 영상도 감사합니다!! 완전 유익해요 ㅠㅠㅠ

[@designbase]

감사합니다!ㅎㅎㅎ

[@hanajooseyo]

정말 제가 찾던 강의였어요ㅠㅠ감사합니다!

[@designbase]

감사합니다ㅎㅎ🙌 그리드 시스템에 대해서 새롭게 올라갈 예정입니다.

[@Yeorum0815]

좋은 꿀팁들 감사합니다.. !!! 기초를 튼튼히 하는데 도움이 됩니다 .

[@designbase]

기초가 탄탄해야 디자인을 잘합니다ㅎㅎ👍

[@scarletlee5011]

초면이지만 사랑합니다 ㅠㅜ 도움이 많이 되는 영상이네요 감사해요!

[@designbase]

감사합니다👍👍

[@syzygy12]

디자인베이스님 면접 앞두고 개념복습하러 다시 왔네요,,! 가려웠던 부분 박박 긁는 중입니다. 감사합니다!! (진작에 마스터 했어야 하는 내용인데.. ㅠㅎ)

[@designbase]

도움되셨다니 다행이네요ㅎㅎ👍

[@hellolleh3230]

강의 내용 너무 좋앙 ....

[@designbase]

감사합니다👍

[@nissichoi5542]

💎보석 강의입니다.. 감사합니다.

[@designbase]

감사합니다☺️👍

[@songrichoi1716]

정말 도움 됐어요 감사합니다!

[@designbase]

댓글 감사해요ㅎㅎ👍

[@junekim6631]

안녕하세요 강의보고 너무 궁금해서 질문드립니다. Material design guide 에는 large tablet 제작시 gutter와 margin 을 24px 로 두고 잇던데요.. 칼럼은 항상 12단으로 둔다면 제작 페이지사이즈에 따라 gutter 사이즈는 임의로 조정가능하다는 건가요?

[@designbase]

안녕하세요. 네 거터값은 Breakpoint에 따라 조절이 가능합니다.

[@c.h2132]

폰트크기도 4배수나 8배수로 하면 되나요? Pc와 모바일 폰트 크기가 같아야 하나요? 달라지면 안되나요??

[@designbase]

폰트 크기를 굳이 4배수로 맞출필요는 없습니다. 예를 들어 14px도 많이 사용하는 편이라서요. 그리고 pc와 모바일의 폰트크기는 달라야 하는 경우가 일반적입니다. 큰 면적에 적합한 폰트 크기가 있고, 작은 면적에 적합한 폰트 크기가 있겠죠ㅎㅎ 그리고 타이포그래피를 웹에서 반응형으로 작성할때.. 좀 복잡한 내용이긴하지만, rem단위로 관리하기 편하게 개발하는것을 고려하면 본문 크기를 16px을 기본값으로 두고, 1rem = 16px일때 몇 rem으로 둘지 고민해서 작업할수도 있긴합니다.

[@becca0224]

진짜 유용한정보감사합니다🤗

[@designbase]

감사합니다 ㅎㅎ

[@kuitar2615]

다 좋은데... gutter 30 column 72로 12단이 어떻게 1200이죠 1194지...

[@designbase]

네 맞죠..ㅎㅎㅎ 그거에 대해서 문의주신 분들이 많아서 댓글에 답했어요ㅠㅠ 중요한건 컬럼 수치가 아니라는 점만 알면 될것같아요.👍

[@minjeongkim3970]

저는 기획자인데 너무 도움이 되었습니다.

[@designbase]

도움되었다니 다행이네요!ㅎㅎ

[@hhhanga]

흥하십시요 구독좋아요 박고갑니다 !

[@designbase]

감사합니다ㅎㅎ😊😃

[@inekang]

저도 제품페이지 위주로하다가 웹디자인에서 UXUI로 넘어가는데 너무 체계가 없었는데 정말로 좋은 공부되었습니다^^

[@designbase]

감사합니다🤗🤗

[@wpekrj]

유익한 강의 만들어 주셔서 감사합니다! 기초적인 궁금증이 있어서요 지식인에 남겨야하나 고민했는데요.. 디자이너님이 답변주실수 있으실까요ㅜㅜ혹시 실무에서 어떤 회사가 로드뷰같은 서비스를 운영하는 회사라면 디자이너들은 아트보드를 몇개를 작업해야하는건가요? 로드뷰 같은 서비스는 어플로도 볼수도 있고 웹사이트에서도 확인이 가능하잖아요. 그럼 UI디자이너는 아트보드를 아이폰1개, 안드로이드 1개, 웹사이트1개 ->총3개를 열어놓고 해야하나요? 처음 사이즈를 무엇를 열어놓고 UI디자인 연습을 할지 모르겠어서요..그거와 상관없이 저그리드에 맞춰서 작업하고 기획자에게 공유하는 프로세스인가요? 이쪽 업종이 아니라 질문드립니다..

[@designbase]

서비스를 운영하는 Os에 맞게 작업해주시면 됩니다ㅎㅎ 아트보드보다는 페이지로 관리하는편이에요:) 작업하고 기획의도와 맞는지 서로 확인하고 개발자에게 가이드라인과 에셋을 넘깁니다

[@wpekrj]

@@designbase 답변 감사합니다 :)

[@_sunflower27]

4년 전 영상이지만 현재 2024인데 그래도 도움이 되었습니다!

[@designbase]

도움되었다니 다행입니다!ㅎㅎ

[@muninim]

혹시 11:38에 나오는 포토샵의 경우 레티나 디스플레이가 무슨뜻인가요?

[@designbase]

애플 제품에 사용되는 아이폰이나 맥북 같은 기기의 해상도가 일반 디스플레이 화면과 비교했을때 화소 구분하기 어려운 애플의 IPS LCD와 OLED 제품의 브랜드 이름입니다.

[@Loi-wu8di]

좋은 강의 감사합니다!!!!

[@designbase]

감사합니다 :)

[@미니미니-h1e7x]

안녕하세요! 디베님~ 궁금한 점이 있습니다. 요즘에도 실무에서 그리드를 많이 중요시해서 사용하나요? 1260이 컨테이너 사이즈라면 12단으로 했을때도 거터의 너비를 30으로 하면 좋을까요? 반응형으로 제작했을때 거터의 값이 더 중요한지 아니면 컬럼값이 정수로 떨어지도록 하는것이 더 중요한지도 궁금합니다. 모든값이 정수로 떨어지게 하는것이 코딩으로 홈페이지를 구현할때 제일 중요한 부분이라면 최대너비:1260 / 거터너비:22 / 칼럼:84 / 열:12 이런식으로 하면 되는것일까요? 디베님 명강의 감사합니다 ㅎㅎ

[@designbase]

거터값이 더 중요합니다. 반응형처리하면 컬럼값은 어쩔수없이 소수점으로 떨어질수밖에 없어요ㅎㅎ 단, 정수로 떨어트리고싶다면 컬럼, 거터 둘다 정수로 만드는 방법도 있겠죠~! 저는 12단에 콘텐츠폭 : 1200, 거터 : 24를 사용하는 편입니다.

[@jjdepth]

안녕하세요. 영상 잘 보고 있습니다. 제가 배울때 컨테이너영역을 1200px로 잡고 좌우 양쪽 마진 10px 씩 줘서 1080px 을 컨텐츠 영역으로 잡았었는데 양쪽 마진을 하고 안하고 차이가 있나요??

[@designbase]

1200에서 좌우마진 10씩주면 1180아닌가요?? 기본적으로 좌우 마진을 주는건 반응형으로 브라우저 창을 줄여도 좌우에 항상 일정 여백을 줘서 콘텐츠에 방해안가도록 하는것이에요ㅎㅎ 그리고 컨테이너(콘텐츠)영역에 정답은 없습니다. 전체폭, 컨테이너 넓이, 컬럼수, 거터, 좌우 마진 이렇게가 중요합니다.

[@jjdepth]

@@designbase 아 제가 1180을 잘못썻네요 ㅎㅎ;; 아무튼 답변 감사합니다 ^^

[@doldola]

1. 퍼블리싱 시 - 컨테이너(max-width)를 1200px로 설정하고, 부모 요소에 좌우 패딩(40px)을 주나요? - 아니면 컨테이너의 max-width를 패딩을 포함한 값(1280px)으로 설정하나요? 2. 피그마에서 부모 프레임을 1920px로 설정한 후에 - 내부에 1280 컨테이너 프레임을 또 생성하고 그 안에 1200 그리드를 설정하는 방식인가요? - 부모 프레임(1920px)에 바로 1200px 그리드를 설정하는 방식인가요? 부모프레임에 바로 1200그리드를 설정한다면 퍼블리셔에서 넘겨줄때 좌우패딩은 어떻게 표시해서 주시는지 궁금합니다.

[@designbase]

안녕하세요. 만약 디자인에서 그리드를 전체폭 : 1200 / 좌우 마진 : 40 라고 했다면 저는 퍼블리싱할 때 컨테이너의 max-width를 1280으로 하고 좌우 패딩을 40으로 적용하는 편입니다. 퍼블리셔에게 넘겨줄때는 문서화로 표기해서 넘겨주는 게 서로 가장 명확할 것 같습니다~!

[@MushroomJY]

안녕하세요! 좋은 영상 정말 감사드립니다ㅠㅠㅠ 혹시 아트보드는 375px(아이폰11프로 기준) 으로 작업하려고 하는데, 이럴 경우에는 그리드를 어떻게 잡고 들어가시나요...? 레이아웃 셋팅값만 360px로 잡고 들어가면 되는건지 궁금합니다! 그리고 알려주신대로 그리드 레이아웃 셋팅은 360px으로 했는데 offset 20px로 하고 center을 누르면 자꾸 20이 아닌 7px로 적용되는데 이건 왜 이러는걸까요...?ㅠㅠ

[@designbase]

안녕하세요~! 아이폰같은 경우는 좌우 여백 16 또는 20으로 잡고 진행합니다ㅎㅎ 토탈윗스가 콘텐츠 폭이고 offset이 좌우 마진(여백)이에요. 375(전체폭) - 360(콘텐츠폭) = 15 이걸 나누기 2하면 7로 나오는거죠. 마진값을 설정하려면 offset은 그냥 센터만 누르시고 콘텐츠폭을 계산해서 넣어줘야합니다.

[@MushroomJY]

디자인베이스 답글 정말 감사드립니다!ㅠㅠㅠ 그러면 영상에서 설명해주신 20px은 좌(10px) + 우(10px)로 적용해서 만드신건가요?? 영상에서는 좌(20px) 우(20px)로 보여서요!ㅠㅠㅠ그러면 375px아트 보드 일때는 offset값이 20이 되도록 레이아웃 셋팅값을 360이 아닌 계산을 해서 넣고 거터는 동일하게 16px로 진행하면 기존 360px과 비슷한 그리드 값을 얻을 수 있을까요?.?

[@designbase]

네 360 기준으로 좌 20, 우 20 해서 콘텐츠 영역이 320되도록 한거에요ㅎㅎ 질문을 이해를 못했는데.. 375기준으로 좌우 20을 주면 375-20-20 해서 335를 콘텐츠 폭에 넣으면 되겠죠?ㅎㅎ 나머지 컬럼수나 거터는 안드로이드랑 동일하게 하시면 되구요

[@최수진-y5n]

저도 이거 몰랏는데 지나가다 댓글보고 무릎을 탁! 치고갑니다. ㅜㅜㅜ

[@designbase]

☺️👍

[@김병수-h2i8d]

디자인베이스 안녕하세요~궁금한점이 있어 질문드립니다. 위에 답변 내용데로 Column값을 계산하면 하나당 72.5px이 나오는데요, 스케치에서 셋팅하면 column 값이 73px로 잡히고, Gutter값도 29~30px로 잡히는데 나중에 퍼블할때 지장이 없는지 궁금합니다~

[@designbase]

안녕하세요 김병수님~! 네 위에 비슷한 내용으로 댓글 달아주신분들에 답변한 것처럼 중요한 것은 Container에 들어갈 Max-width랑 Gutter값입니다. Colunm값은 반응형으로 유동적으로 변하는 값입니다ㅎㅎ

[@joonprk]

@@designbase Column값은 유동적으로 변해서 큰 상관없다고 해도 Gutter값도 30->29px로 바뀌는데 문제 없나요?

[@eennnnnaaa]

👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻 최고예요

[@designbase]

감사합니다👍

[@capegh123]

포토샵으로는 1200 그리드 잡아서 영상처럼 할시 1200에 영상에 나온듯이 전체값 1920에 여백 360 컨테이너 1200에 12컬럼과 거터30에 72와이드컬럼 으로 할경우 1200에 저렇게 영상처럼 깔끔히 맞아떨어지게 안나오는데 스케치랑 포토샵은 달라서 그렇게 나오는건가요?? 이해가 잘 안가서요 ㅠㅜ 제가 계산을 못한건지 모르겠어서 혼란스럽네요 ㅠㅜ...

[@designbase]

안녕하세요 bro H - 님 계산기를 이용해서 자세히 계산을 해보면 72.5px이 나오게 되네요. 스케치 레이아웃 세팅 상에서는 소수점을 취급하지 않아서 72px이 나오게 됩니다. 사실 Column 값보다 Gutter 값이 더 중요합니다. 단을 나누는 기준이 되기 때문이죠. 컬럼값은 %로 처리하기 때문에 작은 해상도에서 보면 값이 유동적일 수 밖에 없어요. 가장 중요한 부분은 컨테이너 넓이, 단의 수, 거터 값 이렇게 3가지 입니다 ^^

[@capegh123]

@@designbase 그렇군요 좋은 정보 알려주셔서 정말 감사드립니다!!!

[@soyoungkim4977]

좋은 영상 감사합니다! LNB가 좌측에 고정일 경우에는 어떻게 잡으시나요? LNB를 컬럼에 포함해서 12단으로 제작해야겠죠?

[@designbase]

좌측 사이드바를 사용하는 경우는 사이드바의 폭을 고정값으로 두고, 나머지 여백에서 12단으로 그리드시스템을 만들어서 합니다~!

[@soyoungkim4977]

@@designbase 감사합니다 :)

[@designseoul]

좋은 강좌 감사합니다

[@designbase]

감사합니다👍

[@gellyolee8213]

그냥 최곱니다

[@designbase]

감사합니다☺️👍

[@이누리-t3y]

많이 배우고 갑니다.

[@designbase]

감사합니다~!

[@sypark2841]

12단을 추천하시는 이유는 확실하게 이해했습니다! 혹시 컨테이너는 1200으로 추천하시는 이유가 있을까요?

[@designbase]

모든사이트를 1200으로 추천드리진 않습니다. 회사소개 사이트 같은 경우는 의도에 따라 1920 / 1600 / 1440 다양하게 작업하는 편입니다. 근데 콘텐츠를 운영하는 플랫폼의 경우에는 다양한 디바이스에 다 최적화를 해야하다보니, 그리드를 좁게 가져가는 편입니다.

[@samsoon2007]

잘 이해가 안가서 댓글 남겨요. (거터 30px x 11)+(컬럼 72px x 12)= 1194px로 나오는데 어떻게 1200px되나요? 아무리 계산해도 딱 떨어지지않네요 ㅠㅠ 뭐가 문제인거죠?

[@designbase]

네 맞아요... kzbin.info/www/bejne/n6LZanZ6jpKEeaM 이영상을 이어서 보시면 이해가 될거에요ㅎㅎ

[@joyusagi]

강의 감사합니다 궁금한게 있는데 모든페이지들에 같은 최대폭으로 디자인하나요 아니면 어떤 페이지는 최대폭을 다르게 디자인할수도 있을까요?

[@designbase]

최대한 같은 폭으로 디자인하는 편인데, 상황에 따라 다르게 할 수도 있습니다. 전체적인 가이드라인을 두고 그안에 이벤트 페이지나, 상세페이지 등 달라야하는 부분에 대해서는 폭을 다르게도 가져갑니다.

[@dainpark4361]

감사합니다 엡 작업할때 사이즈에 상관 없이 콘테이너를 360(offset 20씩) 잡고 그 안에서만 작업을 해야 하나요? 기초지식 없이 무작정 하다 이제서야 보게 되는데 415에서 360 컨테이너로 잡고 하니까 뭔가 옆 margin이 너무나 폭이 넓어 보여서요

[@designbase]

콘테이너(콘텐츠영역)을 고정하기보단 좌우 마진 20px씩 잡고 컬럼수와 거터 값 고정합니다.ㅎㅎ 사람마다 회사마다 방식이 약간씩 달라서 정답은 없습니다. 안드로이드 권장 가이드라인은 360 기준으로 좌우 마진 16씩인데 저는 개인적으로 20을 선호합니다

[@Eunice-et1iv]

넘 유용한 정보 감사합니다.. 질문이 있는데요 모바일 해상도가 가로 360px 기준으로 하면 된다고 하셨는데요 요즘에는 가로 해상도가 1080, 1440, 2208 px 등 크게 나오는데요.. 360으로 디자인해도 되는 건가요? 360기준으로 디자인하면 몇배수로 알아서 변경되는 걸까요?

[@designbase]

안녕하세요. 말씀해주신 해상도는 dpi개념에 픽셀이고, 상대값인 dp 개념으로는 1dp = 1px인 경우로 디자인을 하면 됩니다. 피그마나 스케치, xd와 같은 모든 툴은 상대값 개념으로 제공합니다. 개발시에도 상대값을 기준으로 하다보니 걱정안하셔도 됩니다. 단지, 운영할때 필요한 배너 디자인처럼 비트맵 기반인 경우에만 적용 디바이스의 배율에 맞게 크게 제작하시면 됩니다.

[@seoulkim1649]

유용해요~ 감사합니다!

[@designbase]

감사합니다 :)

[@Umai952]

한가지 의문점이 있어서 댓글 남겨요. 12단에 offset 360 gutter 30 column 72면 총 width는 1200이 아니라 1194데.. 어떻게 1200으로 맞춰지는건가요?

[@designbase]

안녕하세요 후니훈님. 다른 댓글에도 관련 문의를 주신 내용이 있어서 답변드린 내용 똑같이 남깁니다. 계산기를 이용해서 자세히 계산을 해보면 72.5px이 나오게 되네요. 스케치 레이아웃 세팅 상에서는 소수점을 취급하지 않아서 72px이 나오게 됩니다. 사실 Column 값보다 Gutter 값이 더 중요합니다. 단을 나누는 기준이 되기 때문이죠. 컬럼값은 %로 처리하기 때문에 작은 해상도에서 보면 값이 유동적일 수 밖에 없어요. 가장 중요한 부분은 컨테이너 넓이, 단의 수, 거터 값 이렇게 3가지 입니다 ^^ 컨테이너 넓이를 전체 넓이(예시 1920)에서 좌우 마진 뺀 값으로 하기 때문에 단 수와 거터값만 고정하면 컬럼값은 유동적으로 변하기 때문에 코드로 제작시에도 소수점이 나올 수 있습니다.

[@Umai952]

@@designbase 와 이렇게 빠른 댓글이 달릴줄 몰랐네요. 감사합니다 이해했습니다...!

[@최승학-p7i]

글로벌서비스 반응형웹으로 하려하는데 해상도 1024쓰는 해외도 아직 있더라구요. 1023이하는 모바일레이아웃을 쓴다는 전제하에 컨테이너값을 1200으로 잡아서 하면 1024이상일 경우는 1200레이아웃보다 작아서 화면이 짤리는데 이럴경우 1024 기준으로 그리드를 다시 설정해야 하나요? 1024 해상도는 960그리드를 써야하는지요…

[@designbase]

안녕하세요~! 해당 웹사이트에 방문하는 유저의 브라우저 해상도가 저해상도 쓰는 유저 비중이 높다면 그것에 맞게 제작하는게 좋고, 그게 아니라면 %로 처리하면됩니다. 1200을 기준으로 작업을 하더라도 개발시 고정형이 아니라면 1024로 되더라도 좌우마진과 거터는 유지한채 컬럼 폭만 %에 맞게 줄어들게됩니다. 대신 디자인을 할때 1200으로 잡고 너무 빽빽하게 시안을 잡은 경우에 1024해상도에서 답답하게 보여는 경우가 발생하긴합니다~!

[@boost-rh4qe]

안녕하세요 강의보며 너무 큰 도움 받고있습니다! 혹시 모바일웹이 아닌 앱 작업 하실 때도 마찬가지로 360을 기준으로 작업하시나요? 제가 xs를 쓰고있어서 직접 폰에 넣어 테스트하기도 편하고 아무래도 최신폰을 기준으로 작업하는게 나을 것 같아서 375를 기준으로 작업하고 있었거든요!(안드로이드는 이미 360기준으로 하고 있어서 ios만 봤을 때)

[@designbase]

안녕하세요~! 앱 디자인 작업시에는 클라이언트와 협의해서 진행합니다. 보통 안드로이드와 iOS 두벌로 작업합니다. 360, 375 두벌로 작업해요ㅎㅎ

[@주상욱-u8q]

안녕하세요 !! 최근에 랜딩페이지 제작하면서 영상 찾아보고 있는 신입디자이너입니다 !! 해상도와 최적화된 그리드에 대해 자세하게 설명해주셔서 정말많은 도움이 되었습니다 !!! 혹시 웹, 모바일에 최적화된 폰트사이즈가 있을까요 ?.? 아니면 해상도 처럼 케바케로 임의로 폰트사이즈를 정해서 진행해도 되는지 궁금합니다 :)

[@designbase]

안녕하세요 상욱님😀 폰트 사이즈같은 경우는 해당 브랜드사이트의 가이드라인이 없을경우에는 케바케로 진행합니다. 가독성을 헤치지않을 정도의 최소 사이즈만 지키면 문제 없을 것 같에요. 저는 Pc에서 본문 사이즈를 16-18 모바일에서 14-16 사이로 사용합니다. 주석처럼 작아도 되거나 영문인 경우는 PC에서 12-14 모바일에서 10-12로 조절해서 사용중이에요~!

[@designbase]

폰트가 작아서 문제가되는 경우는 있어도 크다고 문제되는 경우는 많지 않은 것같아요.👍 너무 과하지 않는 선에서 글줄과 가독성을 신경쓰고 정보의 하이라키에 맞게 폰트 크기를 조절해주면 됩니다ㅎㅎ

[@주상욱-u8q]

@@designbase 친절하고 자세한 설명 정말 감사합니다 !!! 복받으실꺼에요 ㅜㅜ

[@신밧드의보험j]

말씀해주신대로 레이아웃 세팅으로 거터와 칼럼조절해서 그리드를 만들었는데, 도형을 그렸을때 그리드에 제대로 딱 붙는 느낌이 안나는 것은 어떻게 해야하나요? 스냅 옵션이 따로 있나요? 제가 만든 그리드에 딱 붙었으면 좋겠는데 기본으로 깔려있는 1px단위의 회색 격자 그리드(?)에 스냅이 됩니다

[@designbase]

kzbin.info/www/bejne/n6LZanZ6jpKEeaM 이 영상을 참고해보시겠어요?ㅎㅎ 아마 소수점으로 나와서 그런것 같습니다😭

[@greyshim]

데스크탑 > 타블렛 > 모바일로 작업이 이어지면서 각 단계에서 줄여주는(font, shape 등) 어떤 퍼센트지나 공식이 따로 있는지 궁금하네요.

[@designbase]

이렇다할 정해진 퍼센테지가 따로 없지만 회사 가이드라인마다 조금 다른것 같습니다!

[@si6031]

피그마에서는 소수점을 허용하지 않아서 1194로 작업해야하는데요, 이렇게 되면 8의 배수로 떨어지지 않는 UI들이 생기게 되는데 개발단에서는 문제가 없을까요,,??

[@유로시-t6p]

회사에서 윈도우를 쓰는데 스케치 툴과 비슷한 프로그램은 없을까요~?

[@designbase]

피그마를 강추합니다!ㅎㅎ 윈도우에서 사용하시면 됩니다ㅎㅎ

[@wender_maker]

좋은영상 감사합니다

[@designbase]

좋게 봐주셔서 감사합니다!ㅎㅎ

[@aknal0023]

졸은 영상 감사합니다. 그런데 12컬럼 예시는 12x72 + 30x11 = 1194로 72px 정수로 떨어지지는 않는 것 같은데 제가 잘못 계산한 걸까요? ^^

[@designbase]

댓글에도 남겼지만 잘못된것 맞습니다..!ㅎㅎ 거터를 24로 하는걸 추천드립니다!

[@hiel-fh5pv]

안녕하세요! 혹시 가로폭 1920인 아트보드지에 레이아웃 세팅에서 넓이는 1200으로 잡으셨는데, 피그마에서는 어떻게 해야할까요! 1920 아트보드지는 만들었는데 layout grid 설정 시 1200을 따로 입력하는건 없어서요!

[@designbase]

안녕하세요. 피그마에서도 아트보드는 1920으로 잡고 layout grid 설정할때 1200에 맞게 하시면 됩니다. 옵션중에 마진 (1920 - 1200)/2 한 값을 넣거나 컬럼값을 고정으로 넣고 중앙 정렬하는 방법도 있습니다~!

[@Ggooomk]

아직도 시안 잡을때 알긴 하는데 정확히 몰라서 보러 옵니다

[@페어리훈]

안녕하세요. 강의 너무 잘 봤습니다. ㅠ ㅠ 실습 중에 질문이 있어서요.. 모바일 레이아웃 세팅을 디자인베이스님을 따라하려고 했는데 자꾸 값이 어긋납니다. offset을 20으로 맞추고 center 준 뒤 gutter를 16으로 하면 column width가 자동으로 47이 되면서 offset이 안 먹힙니다. 반대로 column width를 40으로 하면 gutter가 자동을 24가 되고 offset은 수치상 20이 맞춰져 있는데 실제로는 0으로 적용됩니다. 혹시 어떤 문제 때문일까요? ㅠ ㅠ

[@designbase]

안녕하세요~! 우선.. 비슷한 문의가 많았는데 컬럼 가로값은 무시하셔도 됩니다. 반응형으로 제작되기 때문에 디바이스 해상도에 따라 어차피 소수점이 나오는 경우가 생깁니다. 중요한건 좌우 마진과 몇단으로 할지, 거터값 이렇게가 중요합니다ㅎㅎ

[@danggoonnamnam]

안녕하세요 꿀강좌 잘 보고 있습니다☺️ 혹시 아이패드 앱 같은 경우는 컨테이너 칼럼 거터값을 어떻게 작업하시는지 알 수 있을까요? 앱 디자인은 처음이라 네이티브 앱이면 모델 사이즈 별로 작업해야 하는지도 문의 드려요~ 감사합니다

[@designbase]

감사합니다ㅎㅎ 아이패드는 아이패드 에어인지 프로인지에 따라 다릅니다. 컨테이너는 좌우 마진(24추천)을 고정한 상태에서 가변적으로 변하게 작업하시면 됩니다. 그냥 앱 디자인인 경우는 os별 가장 사용률이 높은 비율로 작업하시면됩니다. 앱스토어용 앱이면 아이폰x 기준으로 한벌만 하시면됩니다. 개발자가 알아서 오토 레이아웃으로 작업해줍니다.

[@danggoonnamnam]

디자인베이스 감사합니다 그러면 아이패드 에어, 프로, 아이폰. 이렇게 세 가지 작업해서 개발자한테 넘기면 되겠네요😀 답답해서 오늘 여기저기 물어봤는데 가장 명쾌한 답이었어요^^ 적게 일하고 많이 버세요~!!

[@뉸뉴냔냐-o3m]

안녕하세요 웹디자인을 처음 하게 되어서 영상 몇번씩 돌려보고 정말 유용하게 보았습니다! 질문이 한가지 있는데, 아트보드 작업환경 크기는 1980으로 하되 컨테이너는 1200으로 하라고 하셨는데 헤더는 컨테이너에 상관없이 1980 아트보드 양쪽 끝에 맞춰서 작업해도 괜찮은가요? 보여주신 예시 사이트들은 그렇게 되어있는 것 같아서요~ 그럼 작은 화면으로 봐도 안짤리나요?? (참고로 저는 xd로 작업하고 있습니다) 답변 부탁드립니다 감사합니다 :)

[@designbase]

안녕하세요~! 1920을 말씀하시는 것 같습니다. 컨테이너 없이 꽉차게 해도 문제는 없지만, 그렇게 했을때 유의해야할점 몇가지 말씀드리자면 테블릿 사이즈 전까지 대응해야할 스크린 사이즈가 많아서 다 잘보이게 제작하려면 개발에서도 다 맞춰서 제작해야되기때문에 디자인, 개발 시간이(제작비용) 많이 듭니다. 그리고 만약 안지키면 반응형에 취약하게 돼서 특정 스크린에서 짤리는 문제가 발생합니다. 그리고 콘텐츠 폭이 넓어서 이미지가 많이 들어갈 경우 웹사이트에 불러오는 이미지 용량이 커서 서버비용도 많이 나가고 로딩속도에 영향을 끼치게 됩니다. 그럼 자연스럽게 이탈률도 올라가게 됩니다. 권장 가이드라인을 드린것이고 무조건 그렇게 할 필요는 없습니다~! 사이트 성향에 맞게 디자이너의 의도에 맞게 제작하시면됩니다.

[@뉸뉴냔냐-o3m]

@@designbase 자세한 답변 정말 감사드립니다! 저는 콘텐츠 전체가 아니라 Header만 말씀드린 것이긴 한데 그래도 큰 문제가 될까요?ㅠㅠ

[@designbase]

아뇨 헤더 영역만 그렇게하는건 문제안됩니다ㅎㅎ

[@뉸뉴냔냐-o3m]

@@designbase 넵 답변 감사합니다 :)

[@hahahoho9730]

감사합니다👏👏👏👏👏👏👏👏👏

[@designbase]

반가워요🙌🙌🙌🙌🙌🙌🙌🙌🙌🙌

[@koeunlee1416]

선생님ㅠㅠ 강좌 너무 잘 봤습니다!! 제가 아직 스케치 프로그램이 없눈뎅.. 오늘 강좌 포토샵에서도 응용해도 문제 없는건가요?

[@designbase]

넵!ㅎㅎ 툴은 툴일 뿐이죠. 포토샵에서 작업해도 됩니다. 웹디자인 강좌에서 그리드시스템에 대해 좀 더 자세히 다뤘는데 그 영상도 시청해보세요ㅎㅎ

[@글린다-n6u]

기초적인 질문드려 죄송하지만 에셋(asset)이 정확히 어떤 것인지 질문드려도 될까요? 그리고 해상도(작업사이즈)는 개발자분한테 먼저 물어보고 디자인 작업을 시작하나요?

[@designbase]

에셋은 개발할때 필요한 소스들을 말합니다. 코딩으로 할수없는 부분들이라고 보면 되는데 아이콘이나 이미지같은 것들을 말해요. 작업 전에 개발자와 상의하면 좋겠죠. 웹같은 경우는 반응형으로 개발할지 말지, 브레이크포인트는 어느구간을 가져갈지 이런걸 정하면 됩니다.

[@wooqoin5624]

안녕하세요 너무 잘 보고있습니다! 현재 웹디 관련해서 오프라인 강의를 듣고있는데 강사분께서 그냥 디자인 예시만 몇개 던져주시고 이런식으로 만들어서 아이디어 스케치를 낸후 일러스트레이터를 사용해서 스토리보드를 만들어서 제출하라고했었는데요. 대충 말만해서 그냥 꾸역꾸역 만들고있는데, 이런경우에는 (실무에서도) 그냥 스케치를 사용해서 만드는게 더 편하고 효율적인가요?

[@designbase]

일러스트레이터요....? 웹디자인에서 일러스트레이터를 사용하는경우는 본적이 없는데요ㅠ 주로 스케치, 피그마, xd, 포토샵 이렇게 사용합니다.

[@wooqoin5624]

@@designbase 네네! 근데 추세가 xd나 피그마, 스케치고 포토샵은 대부분 안쓰지 않나요? ㅠ

[@wooqoin5624]

@@designbase 너무 궁금한 점인데, 일러스트레이터로 사용하지 않는 이유는 뭔가요..!

[@designbase]

요즘 대세는 피그마이고 그 다음이 스케치입니다~!ㅎㅎ 국내에선 xd를 그나마 사용하는편같아요. 포토샵으로 작업하는 분들은 아직도 꽤 있어요.. 이미지 편집을 해야되기때문에.. 포토샵은 ui작업이 아니더라도 필수입니다ㅎㅎ

[@designbase]

이미지 편집 기능도 없고, 애초에 벡터기반의 툴이지 웹이나 앱을 위해 제작된 툴이 아니라서 사용하지 않습니다. 로고나 케릭터 일러스트, 배너 같은 걸 제작할때 사용하는 편이에요

[@열정빼면시체-f9v]

웹디자인을 이제 시작하는데 디자인기획이나 추구하려는 방향을 결정하는데 도움이 되는 책을 추천해주시면 안될까요? 도움이 많이 될 것 같아요!

[@designbase]

웹디자인 관련 서적은 잘모르겠습니다ㅠㅠ 저는 브런치나 미디엄에 관련 아티클을 통해 정보를 습득하고 있어요.

[@ddulgi2487]

안녕하세요! 구독하고 꾸준히 강좌 보고있는 신입입니다! 이번 반응형 그리드 강좌보고 스케치에서 똑같이 따라해보는데 질문 드리고싶은게 2가지 있어서 댓글 남깁니다. 1. width 1200px, offset 360px, columns 12, gutter width 30px 으로 잡으면 스케치에서 column width 값이 저절로 70으로 바뀌는데 이건 왜 이러는건가요ㅠㅠ? 계산기로 계산해봐도 72값이 안나오는거 같은데 혹시 자세한 설명 부탁드려도 될까요? 2. 모바일에서는 주로 4개의 column을 사용한다는 말도 많이 들었는데 이럴땐 거터 값을 어떻게 계산하면 좋은지도 혹시 추천해주실 수 있나요? 언제나 좋은 강좌 감사드립니다 :)

[@designbase]

안녕하세요 슬기님~! 우선 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

[@altnrl79]

강의 너무 감사합니다!!! 저 하나만 여쭤봐도 될까요? 360 기준으로 하면은 320일때는 어떻게 대응해야할까요..? 반응형일땐 신경을 크게 쓰지 않아도 되나요?

[@designbase]

안녕하세요...너무 늦게 답글을 남기네요 ㅠㅠ 어플로 답장하다보니 놓친 댓글들이 상당히 많네요..ㅠㅠ 360기준으로 하면 320일때는 반응형으로 제작될 경우 폭이 %로 처리되기때문에 따로 작업을 안하셔도 문제없습니다.