기초가 이렇게!!!!!! 중요한데 너무 기초라 그런지 자세하게 알려주시는 분들이 별로 없어요ㅠㅠ 이유도 모른채 그냥 따라하기 바빴는데 혼자 공부할 때 조금이라도 수치가 달라지면 당황하고 시작부터 막막할 때가 많았어요ㅠㅠㅠ 그런데 이렇게 기초적인것 부터 자세하게 설명해 주셔서 너무너무너무 감사해여ㅠㅠ 엉엉엉 학생의 열정은 선생님에 따라 달라지는데 디베슨생님을 만나서 넘 행복해여 엉엉ㅜㅜ... 진짜 공부하고 싶어지는 영상ㅜㅜ (맥북 사고싶어지는건 덤...ㅠㅠㅋ) 드라마보다 재밌어여 정주행맛집👍🏻👏🏻👍🏻👏🏻
안녕하세요 저는 실무디자이너로 일을 오래 해왔는데. 웹디자인에 관해 아는지식이 없어서 어려움이 많고 대부분의 홈페이지 강좌는 개발자 위주의 강의가 많아서 뭔가 30%부족한 느낌이었는데 같은 디자이너의 관점에서 웹을 배울 수 있어서 너무나 좋습니다. 강의에 음악과 집중하기 좋은 설명과 놓치기 쉬운 세세한 부분을 제 입장에서 생각해서 만드신것처럼 이해가 되어서 참 많은 고민을 하시면서 만드셨다는 생각이 들었습니다. 앞으로 홈페이지도 자주 들어가고 또 여러가지 강의를 배우러 방문하겠습니다. 제가 할 수있는것은 구독과 좋아요를 누르고 주변에 관심있는 사람들에게 전하는것밖에는 없겠네요. ㅎㅎ 너무 좋은 강의 감사합니다!
진짜 학교에서도 안가르쳐 줬고 안다뤘던 부분을 너무 친절하게 잘 알려주십니다ㅠㅠㅠㅠㅠ이미 한참 전에 졸업 하고 뒤늦게 ui/ux 웹 쪽으로 관심이 생겨서 유튜브로 공부하면서 취업 준비를 하고 있는데 지금도 과동기들과 경력도 경험도 많이 차이 나지만 좀 많이 늦더라도 기본부터 차근차근 배워서 탄탄한 상태에서 취업 하고 싶습니다. 잘배우고 좋은 강의 감사합니다!!
이전 강좌만으로는 그리드 자체를 이해하기 힘들었는데 더 자세한 내용이라 도움이 많이 되었습니다 감사합니다 ! + 추가적으로 질문드릴게 있는데 UI 디자인에서는 8배수 디자인과 4px기반의 간격을 보통 권장하잖아요 ! 그런데 그리드에 따른 컬럼값은 유동적이다보니 8배수를 적용안해도될 것 같은데, 그럼 어느 부분에서 8배수 디자인을 적용하면 될까요?ㅠ 컨텐츠 박스 내의 아이콘이나 이미지들만 8배수로 하고 박스와 내용물끼리 간격을 4px 간격을 이용하면되는건지...... 참 어렵네요 ㅠ
안녕하세요 한번 더 보러왔다가 또 질문합니다ㅜㅜ 스케치로 가이드라인 1200을 잡으셨다면 코딩할 때는 각 섹션을 묶는 전체 div의 max-width:1280, 좌우 padding 40px으로 잡으시나요?(box-sizing 사용하신 후) 아니면 max-width를 스케치 프로그램과 동일하게 1200으로 잡으시나요? (box-sizing 사용x) 아니면 각 컬럼마다 양쪽에 마진으로 거터의 1/2값을 줘야하는 지 궁금합니다. 그리드시스템을 코딩으로 옮기려는 데 처음부터 막막하네요ㅜㅜ
웹디자인 입문 정주행중인데 유익하고 알찬 강의 너무 감사드립니다!! 5:03에 나온 컨테이너값을 보면서 왜 디베님은 컨테이너를 1200으로 잡으셨을까 궁금했는데, 댓글을 보다보니 ‘좌우 최소 마진 40px씩을 감안했다.’는 디베님의 답변이 있더라구요! 그렇다면 만약 컨테이너는 1920px로 잡고, 디베님처럼 좌우 최소 마진을 40px로 잡고 싶다면, 스케치에서 Total Width 값은 1840으로 넣고 작업하면 되는걸까요?
디베님 ㅠ 모바일 디자인할 때 화면이 엄청 많잖아요 위에 강의에서 모바일 부분 설명해주시면서 12:03 어떤 분은 (안드로이드 기준으로) 414로 작업해서 줄여 나가기도 하고 작게 해서 늘려가기도 한다고 하셨는데 앱 디자인을 할 때 웹 반응형 디자인 할 때처럼 브레이크 포인트를 잡아서 화면을 몇 가지만 디자인하고 개발할 때 반응형처럼 나머지는 퍼센트로 맞춰가는 건가요? iOS / 안드로이드 각각 화면 사이즈 하나씩만 디자인해서 개발자에게 넘기면 되는 건가요? ㅠㅠ
선생님 안녕하세요!! 오늘 영상 처음 보게 됐는데 진짜 하나같이 다 재밌고 깔끔해서 꾸준히 보면서 배울 것 같아요 ㅜㅜ 저는 현재 디자인 비전공자인 학생인데, 디자인 분야에서 일을 너무 하고싶습니다. 하지만, 디자인 관련된 직업이 많은 만큼 아직까지는 어떤 디자인 분야로 진로를 삼을지 몇개월 동안 정하지를 못했습니다.... 모션그래픽부터 UI/UX 디자인까지 다 너무 재밌어보이고 다 해보고싶은데, 이를 다 배워보고 결정하는게 좋을까요? 또는 디자이너로서 한 분야만 깊게 파지 않고 여러 가지 디자인 기술을 배우는것도 괜찮을까요? 정말 고민이 많습니다 ㅠㅠ 영상 너무 감사합니다
진로를 결정하는건 디자인학과 진학하는 학생분들한테도 어렵습니다..ㅠㅠ 대신 몇년동안 배우면서 다양한 작업을 해보면서 본인에게 맞는 직업을 선택하는데 비전공자 분들은 그런 경험이 없다보니.. 다 재밌어보이신다면 최대한 빠르게 다 공부해보세요ㅎㅎ 정답은 없지만 최소한 취업을 위한 메인 기술 하나는 잘하는 상태에서 여러가지로 하나하나 확장하시는걸 추천드립니다.
디베님 해상도 관련해서 궁금한 점이 있습니다..! 아이맥에서 스크린샷 후에 피그마로 가져와서 똑같이 그려보려고 하는데 아이맥 해상도가 27인치(5120 × 2880)인데 스크린샷해서 피그마에 가져온 이미지는 2048 X 1152이더라고요 이렇게 되는 이유가 뭘까요? ㅠㅠ
오늘 네이버를 f12로 열어봤는데 디자이너가 해상도는 몇으로 잡았고 그리드는 어떤걸 썼는지 잘 모르겠더라구요.. 반응형이라 계속 바뀌는거 같기도 한데 그래도 기본 작업 사이즈는 몇으로 잡고 했는지 모르겠어요ㅠ 그리고 스케치 강의에서 네이버가 컨테이너 넓이가 1080이라 하셨는데 그런건 어떻게 아는건지도 궁금해요
@@designbase 정말 감사합니다ㅠ uxui 독학하고 있는데 정말 도움 많이됩니다! 혹시 질문 하나만 더 드리자면 시각디자인학과 재학중인데 전공엔 uxui는 없어서 독학으로 공부중인데 유튜브, 인강 보고 공부하면소 포폴만들고 취업까지 할 수 있을까요...? 아니면 학원을 다녀야할까요 고민이 많이되는 uxui 입문자입니다...ㅠㅠ
![웹디자인 시작한다면 이건 꼭 보세요[포토샵]](http://i.ytimg.com/vi/X18sPNdD8yw/mqdefault.jpg)
너어무 좋은 강의였습니다 ㅠ 그리드쓰면서 답답했던걸 그냥 제 생각을 읽고 만드신 영상같습니다!
ㅎㅎ감사합니다!👍
기초가 이렇게!!!!!! 중요한데 너무 기초라 그런지 자세하게 알려주시는 분들이 별로 없어요ㅠㅠ
이유도 모른채 그냥 따라하기 바빴는데 혼자 공부할 때 조금이라도 수치가 달라지면 당황하고 시작부터 막막할 때가 많았어요ㅠㅠㅠ
그런데 이렇게 기초적인것 부터 자세하게 설명해 주셔서 너무너무너무 감사해여ㅠㅠ 엉엉엉
학생의 열정은 선생님에 따라 달라지는데 디베슨생님을 만나서 넘 행복해여 엉엉ㅜㅜ...
진짜 공부하고 싶어지는 영상ㅜㅜ (맥북 사고싶어지는건 덤...ㅠㅠㅋ)
드라마보다 재밌어여 정주행맛집👍🏻👏🏻👍🏻👏🏻
감사합니다ㅎㅎ여유가 있다면 맥북구매 추천드립니다👍👍
매번 하는데도 다시 보러 오게 되네여 ㅋㅋㅋ
반복학습이 되면 도움이되죠!ㅎㅎ
다음강의 기다려집니다*^*^*
네ㅎㅎ 최근 바빠서 너무 늦게 올라갓네요😂
크흡ㅠㅠ 디베님 강의 보면 공부하고 싶은 마음이 마구마구 생겨요ㅠㅠㅠㅠ! 감사합니다!
감사합니다ㅎㅎ 공부하시는데 도움되셨으면 좋겠네요!👍
와.. 얼레 벌레 실무하는게 너무 답답해서 기초를 계속 구글링 했는데 만족스러운 내용이 없었어요. 그런데 이 영상 보고 사이다 마시고 가네요. 궁금한 내용 다 들어있는것 같아요. 감사합니다.
도움되셨다니 뿌듯하네요 ㅎㅎ
이렇게 자세한 그리드 강의가 또 없을 것 같아요. 코딩이랑 연계해서.
감사합니다ㅎㅎ 코딩을 알면 웹이라는걸 이해하기 더 좋죠👍
와 그리드에 무조건 맞출필요없다....너무 감사해요 진짜 너무 감사합니다.
감사합니다👍
우와 지금은 피그마 사용하는데 전에는 스케치 사용하는군요
잘 배웠습니다 디베님 ㅎㅎ
네, 예전에는 스케치를 주로 사용했었습니다ㅎㅎ
1강부터 듣고ㅠ있는데 너무 이해가 잘 되네요 쏙쏙 들어오는 강의 정말 감사합니다!
감사합니다 :)
저한테 꼭 필요한 강의였어요 ㅠㅠ 이렇게 모든 게 완벽한 강의는 처음이네요!! 잔잔한 배경음악 깔리는 것까지요 ㅎㅎ
감사합니다!ㅎㅎ 완벽하다니.. 너무 좋네요 ㅎㅎ
정말 정말 친절한 당신, 당신은 멋쟁이 ~ 감사합니다 너무너무 깔끔따라시스시스시ㅡ시
인제님 댓글보는 재미가 있네요ㅋㅋ👍
아 공부하면서 지식적인 부분이 너무 부족해서 답답했는데, 너무너무 감사해요!! 진짜 다음 강좌 기대합니당 최고!!!!
도움되셨다니 다행이네요ㅎㅎ👍
지식적인 부분이 너무 부족해서 답답했다는 말, 정말 공감돼여 ㅠㅠㅠㅠㅠㅠㅠㅠ
누구하나 제대로 알려주지 않죠..ㅎㅎ 연차가 높은 실무 디자이너 중에서도 왜 이렇게 해야하는제 모르는 분들 꽤 많아요..
너무 잘봤습니다! 다음강좌가 기다려지네요~
감사합니다! 다음강좌 금방 올려드릴게요~!
안녕하세요 저는 실무디자이너로 일을 오래 해왔는데. 웹디자인에 관해 아는지식이 없어서 어려움이 많고 대부분의 홈페이지 강좌는 개발자 위주의 강의가 많아서 뭔가 30%부족한 느낌이었는데 같은 디자이너의 관점에서 웹을 배울 수 있어서 너무나 좋습니다.
강의에 음악과 집중하기 좋은 설명과 놓치기 쉬운 세세한 부분을 제 입장에서 생각해서 만드신것처럼 이해가 되어서 참 많은 고민을 하시면서 만드셨다는 생각이 들었습니다. 앞으로 홈페이지도 자주 들어가고 또 여러가지 강의를 배우러 방문하겠습니다. 제가 할 수있는것은 구독과 좋아요를 누르고 주변에 관심있는 사람들에게 전하는것밖에는 없겠네요. ㅎㅎ 너무 좋은 강의 감사합니다!
힘이되는 댓글 정말 감사합니다!ㅎㅎ 더 좋은 강좌 많이 준비하겠습니다👍👍
진짜 학교에서도 안가르쳐 줬고 안다뤘던 부분을 너무 친절하게 잘 알려주십니다ㅠㅠㅠㅠㅠ이미 한참 전에 졸업 하고 뒤늦게 ui/ux 웹 쪽으로 관심이 생겨서 유튜브로 공부하면서 취업 준비를 하고 있는데 지금도 과동기들과 경력도 경험도 많이 차이 나지만 좀 많이 늦더라도 기본부터 차근차근 배워서 탄탄한 상태에서 취업 하고 싶습니다. 잘배우고 좋은 강의 감사합니다!!
학교는 이론적인 부분과 큰 개념에서 다룬다면 저는 실무에서 활용하는 부분을 다루려고 노력중이에요.. 감사합니다~!ㅎㅎ
취뽀하세요👍👍👍
하나하나 새롭게 배우고 있네요 고맙습니다.
감사합니다👍
양질의 컨텐츠 제공해주셔서 감사합니다! 덕분에 웹디자인 독학에 한발 들여놨어요 ;) 언제나 깔끔하고 명확한 설명 감탄하고 갑니다 앞으로도 쭉 구독할게요!
감사합니다 ㅎㅎ디자인 맛집이죠👍
잘 봤습니당!!!♥️♥️카톡방이 벌써 다 찼네요 흑흑 다 차서 못 들어갔어요 ㅠㅗㅠ 강의가 너무 좋아요 알짜배기 수업 더더 많이 올려주세요!:-)
감사합니다ㅎㅎ 100명을 늘렸는데 이틀만에 꽉찼네요ㅠㅠ 좋은 강좌 많이 올려드릴게요!
최고 최고 최고 ! 🤾🖤
감사합니다 :)
너무 유용한 강의 감사합니당! 다음 강의도 기대할게요!!!
감사합니다~!ㅎㅎ 다음강좌 준비중입니다
좋은 강의 너무너무 감사합니다 ㅠㅠ
감사합니다~!ㅎㅎ
15:46 ㅋㅋㅋㅋㅋㅋㅋㅋ출처 : 피카소...이 부분에서 뻘하게 터졌습니다 오늘도 완료^3^
ㅋㅋㅋ저런걸 좋아하시나요
진짜 좋은 강의 감사합니다
넘나 이해 잘되고 직관적인 강의같아요! 자주 볼 것 같아요ㅎㅎ
감사합니다!ㅎㅎ 쉽게 알려드리기 위해 노력했습니다...ㅎㅎ
많은 도움이 됐어요...감사합니다.
7:23 Gutter값
보통 30/24/20
10:58 그리드 잡는 웹사이트
11:56 320픽셀은 안잡아도 무관
다음 영상 기다리고 있씁니다 *^^*
감사합니다👍
퍼블리셔 지망생인데 디자인을 완전 못해서 듣고 있습니다. ㅋㅋㅋㅋㅋ 이런거 하나도 모르고 제작했더니 ..ㅠㅠ 이상해지더라구요. 그리드란 이렇게 사용하는거였군요 ㅋㅋㅋㅋㅋㅋ ㄱ= ㅠㅠㅠ .. 감사합니다.
우와우ㅎㅎㅎ감사합니다!ㅎㅎ 그리드는 모든 디자인의 기본 뼈대입니다ㅎㅎ
너무 많이 도움되었어요ㅠ 감사합니다!!! 다음강의는 언제 .... 넘나 궁금....
다음 강좌는 잠시후 11시에 올라갑니다😊
감사합니다 ㅠㅠㅠ오열 너무도움되네요!!
도움되셨나요ㅎㅎ😊
14:20 에선 거터를 넘어가지 마라하셨는데
16:20 에선 그리드에 맞추지않아도 된다고 설명하셔서
두부분이 어떤 차이인가요 ?
아 거터를 넘지 말라는것은 큰 레이아웃 잡을때를 말씀드리는 거에요. 16:20에서 그리드에 맞추지 않아도 된다는것은 특정부분에 폭 자체를 줄이고 싶다면 줄여도 된다는 얘기 입니다! 거터값은 유지하고 전체 폭만 조절하면 되니까 좀 더 다양한 레이아웃 구현이 가능한거죠ㅎㅎ
이전 강좌만으로는 그리드 자체를 이해하기 힘들었는데 더 자세한 내용이라 도움이 많이 되었습니다 감사합니다 !
+ 추가적으로 질문드릴게 있는데 UI 디자인에서는 8배수 디자인과 4px기반의 간격을 보통 권장하잖아요 !
그런데 그리드에 따른 컬럼값은 유동적이다보니 8배수를 적용안해도될 것 같은데, 그럼 어느 부분에서 8배수 디자인을 적용하면 될까요?ㅠ 컨텐츠 박스 내의 아이콘이나 이미지들만 8배수로 하고 박스와 내용물끼리 간격을 4px 간격을 이용하면되는건지...... 참 어렵네요 ㅠ
감사합니다ㅎㅎ 8포인트 그리드나 4px단위는 화면이 작은 앱 UI에 좀 더 최적화되어있습니다. 그리고 그리드시스템은 큰 레이아웃을 잡기 위한것이에요. 하나의 박스안에 다양한 엘리먼트가 들어갈때 패딩이나 마진을 4의 배수나 8의 배수를 사용하시면 좋을것같습니다.
휴 ㅠㅠㅠㅠ 그리드관련해서 너무 그 숫자에 집착하게 되어서 마음이 불편했는데 완전히 해소 하고 갑니다 ㅎㅎㅎ
디베님 혹시 마우스는 어떤거 쓰시나요~??? 딸깍딸각 너무 듣기 좋네요 ㅋㅋㅋ
다행이네요ㅎㅎㅎ저는 애플 매직마우스 2 사용합니다🤗
안녕하세요 한번 더 보러왔다가 또 질문합니다ㅜㅜ
스케치로 가이드라인 1200을 잡으셨다면 코딩할 때는 각 섹션을 묶는 전체 div의 max-width:1280, 좌우 padding 40px으로 잡으시나요?(box-sizing 사용하신 후) 아니면 max-width를 스케치 프로그램과 동일하게 1200으로 잡으시나요? (box-sizing 사용x)
아니면 각 컬럼마다 양쪽에 마진으로 거터의 1/2값을 줘야하는 지 궁금합니다. 그리드시스템을 코딩으로 옮기려는 데 처음부터 막막하네요ㅜㅜ
안녕하세요! 이 댓글을 놓쳐서 답장이 늦었네요ㅠㅠ 코딩으로할때 저는 container라는 클래스를 만들고 스타일에 max-width:1280px; padding:40px 이렇게 적용합니다. 아시겠지만.. 박스사이징은 border-box로 합니다!ㅎㅎ
강의 너무 잘 봤습니다! 웹에서의 마진값은 보통 30을 주시나요? 얼마를 주는게 맞을지 궁금합니다 저는 마진값을 80을 주고 포폴을 작업했는데 실무에서는 사용을 안하는가 싶어서요!
안녕하세요. 마진에 대한 값은 정답은 없지만, 마진이 적용될때는 화면 폭을 많이 좁혔을때 입니다. 80으로 하셔도 괜찮지만 랩탑이나 테블릿, 모바일 이런식으로 좁아질때는 마진값 변경이 필요합니다.ㅎㅎ
@@designbase 감사합니다! 충분한 답이 되었어요~
웹디자인 입문 정주행중인데 유익하고 알찬 강의 너무 감사드립니다!!
5:03에 나온 컨테이너값을 보면서 왜 디베님은 컨테이너를 1200으로 잡으셨을까 궁금했는데,
댓글을 보다보니 ‘좌우 최소 마진 40px씩을 감안했다.’는 디베님의 답변이 있더라구요!
그렇다면 만약 컨테이너는 1920px로 잡고, 디베님처럼 좌우 최소 마진을 40px로 잡고 싶다면,
스케치에서 Total Width 값은 1840으로 넣고 작업하면 되는걸까요?
컨테이너 너비 안에는 마진을 포함하지 않습니다~! 1920 해상도에 풀로 찬 디자인을 하고 싶은데 좌우 마진을 40px씩 잡고 싶다면 1920-(40*2) 가 컨테이너 폭이 됩니다. 스케치에서 total width도 1840으로 하시면 됩니다👍
사랑합니다!
감사합니다ㅎㅎ👍
14:10 임의적 그리드 변경 금지 (개발 대응 어려움)
+ container에 무조건 꽉 차게 만들 필요는 없음.
감사 😊
감사합니다 :)
재밌게 듣고 갑니다 ꈍ3ꈍ
감사합니다 :)
포토샵에서 그리드로 컬럼을 잡으면 실제 그려진 그리드를 보면 미세하게 1픽셀씩 안맞는건 왜그런걸까요? 1920 기준으로 정확하게 만들었는데도 컬럼이 그려지고나면 마진이 조금씩 안맞아요 ㅠ
디베님 ㅠ 모바일 디자인할 때 화면이 엄청 많잖아요 위에 강의에서 모바일 부분 설명해주시면서 12:03 어떤 분은 (안드로이드 기준으로) 414로 작업해서 줄여 나가기도 하고 작게 해서 늘려가기도 한다고 하셨는데 앱 디자인을 할 때 웹 반응형 디자인 할 때처럼 브레이크 포인트를 잡아서 화면을 몇 가지만 디자인하고 개발할 때 반응형처럼 나머지는 퍼센트로 맞춰가는 건가요? iOS / 안드로이드 각각 화면 사이즈 하나씩만 디자인해서 개발자에게 넘기면 되는 건가요? ㅠㅠ
안녕하세요. 반응형웹과는 다르게 앱은 좀 다르죠..! 같이 일하는 분들(PM, 개발)과 OS별 기준이되는 디바이스를 하나 정하고 그걸로 디자인해서 개발자에게 넘기면 됩니다.
핫..그렇군요 정말 감사합니다!! 인터넷에 찾아봐도 뭔가 시원하게 답을 찾기가 어려웠는데 속이 뻥 ㅎㅎ 항상 좋은 강의 감사드립니다~!!
넵 감사합니다 :)
도움되는 강좌 감사합니다. 플렉스박스를 이용한 방식에 대해서도 같게 이해하면 되나요?
Today lolol 안녕하세요! 플렉스 박스나 그리드나 float 혹은 inline-block은 레이아웃을 잡는 방법일 뿐이고 거터값은 보통 고정하는 편입니다ㅎㅎ
@@designbase 답변 감사합니다 ㅎㅎ
선생님 그 그리드그릴때 컨테이너 안에
커터를 양옆에 넣어서 컬럼을 시작하시는 분도 있던데
무슨 차이가 있는 건가요?
이유가 있는지 궁금합니다
컨테이너 안에 양옆 거터를 넣는 경우는 마진이라고 생각하시는게 편해요~!
오늘 부터 웹디자인 공부 시작했습니다! 스케치라는 툴은 피그마나 xd같은 툴인가요?
안녕하세요~! 스케치는 피그마, xd와 비슷한 ui 툴입니다.
9:18에서 마진값 줄때, 디자인 단계에서 레이아웃 설정시 1200px 밖으로 마진을 준다고 생각하고 작업하는건지 아니면 1200안에 마진값이 포함인 것 인지(1200-30-30=1140) 궁금합니다. 보통 디자인베이스님은 어떻게 작업하시나요?
마진을 바깥으로 준다고 생각해서 작업합니다~! 최소 마진을 디자인 스타일에 따라 다르게 표현하는 편이에요. 최소마진은 40씩 적용하는 편입니다. 그래야 1280px 해상도에서 좌우 40씩 마진을 두고 콘텐츠 폭이 1200으로 잡는 편이에요 ㅎㅎ
안녕하세요 베이스님 영상 감사히 잘 봤습니다. 궁금한 점이 있는데요 마진을 넣어야 한다면 컨테이너 1200사이즈에서 좌우 마진 30씩을제외한 1140사이즈에서 컨텐츠를 넣고 작업을 진행하면 되는건가요?
안녕하세요. 아뇨 콘텐츠폭(컨테이너)는 1200으로 유지하고 좌우 마진을 30씩 준다고 생각하시면 됩니다.
잘봤습니다 ㅎㅎ
감사합니다👍
상세페이지 디자인할땐 칼럼방식으로 가이드 안잡아도 되겠네요 ?
반응형위한 가이드니깐요 맞을까요? ㅎㅎ
네 맞아요~! 대신 상세페이지는 오픈마켓마다 올려야하는 폭에 대한 가이드라인이 있어서 그걸 지켜주는게 우선이고, 운영시 모바일 퍼스트로 할지 이런 부분들도 고려해서 제작하시면됩니다
안녕하세요! 혹시 컨테이너값이 최소해상도랑 같은 의미일까용? 회사에서 반응형 작업을 처음 해보려니 모르는게 너무 많네요 ㅠㅠ
안녕하세요. 아뇨~! 컨테이너는 콘텐츠를 담은 폭을 의미하는데, 반응형 웹에서는 최대 폭이라고 생각하시는게 더 좋을 것 같아요. 컨테이너 값을 1080px으로 적용하면 1080을 최대 폭 기준이겠죠.
선생님 안녕하세요!! 오늘 영상 처음 보게 됐는데 진짜 하나같이 다 재밌고 깔끔해서 꾸준히 보면서 배울 것 같아요 ㅜㅜ 저는 현재 디자인 비전공자인 학생인데, 디자인 분야에서 일을 너무 하고싶습니다. 하지만, 디자인 관련된 직업이 많은 만큼 아직까지는 어떤 디자인 분야로 진로를 삼을지 몇개월 동안 정하지를 못했습니다.... 모션그래픽부터 UI/UX 디자인까지 다 너무 재밌어보이고 다 해보고싶은데, 이를 다 배워보고 결정하는게 좋을까요? 또는 디자이너로서 한 분야만 깊게 파지 않고 여러 가지 디자인 기술을 배우는것도 괜찮을까요? 정말 고민이 많습니다 ㅠㅠ 영상 너무 감사합니다
진로를 결정하는건 디자인학과 진학하는 학생분들한테도 어렵습니다..ㅠㅠ 대신 몇년동안 배우면서 다양한 작업을 해보면서 본인에게 맞는 직업을 선택하는데 비전공자 분들은 그런 경험이 없다보니.. 다 재밌어보이신다면 최대한 빠르게 다 공부해보세요ㅎㅎ 정답은 없지만 최소한 취업을 위한 메인 기술 하나는 잘하는 상태에서 여러가지로 하나하나 확장하시는걸 추천드립니다.
감사합니다 ㅎㅎ! 가장 현실적이고 기본적인게 가장 확실하고 빠르게 알 수 있는 방법일 것 같네요! 기초를 탄탄하게 배워놓고 이것 저것 많이 시도해봐야겠어요!!!
화이팅입니다!👍
디베님 해상도 관련해서 궁금한 점이 있습니다..! 아이맥에서 스크린샷 후에 피그마로 가져와서 똑같이 그려보려고 하는데 아이맥 해상도가 27인치(5120 × 2880)인데 스크린샷해서 피그마에 가져온 이미지는 2048 X 1152이더라고요 이렇게 되는 이유가 뭘까요? ㅠㅠ
혹시 캡쳐한 이미지의 해상도도 5120x2880으로 저장됐나요??
@@designbase 네 맞아요! ㅠㅠ 그래서 왜 그러는 건지 모르겠어요
@@user-qz1oh9py8y 제 추측이긴 한데.. 아마 피그마에서는 72ppi를 기본으로 하는데, 레티나디스플레이에서 캡쳐했을때는 144ppi라서 피그마로 불러올때 72ppi로 변환하면서 전체적으로 나누기 2가 되는게 아닌가 싶네요~!
10:10 에서 offset의 360은 무엇을 의미하나요?ㅠ 스케치에서 offset은 크게 안 중요하다고 답변해주신 것을 보았는데, 어떤 기능인지조차 몰라서 여쭤봅니다ㅠㅠ
옵셋은 좌측부터 몇픽셀 떨어지는지 정하는건데 직접 계산해서 입력하기보다 center버튼으로 처리하기때문에 안 중요해요ㅎㅎ
혹시 거터값 추천을 20.24.30으로 해주셨는데 이유를 자세히 알 수 있을까요?.? 거터값을 넓게해서 40정도로 잡으려고 했는데 너무 넓으면 반응형에 취약한지 궁금해요!.!
답변이 늦었네요ㅠㅠ! 40으로 잡아도 괜찮지만, 거터값도 테블릿, 모바일 이렇게 분기가 바뀌면서 값을 조절할수있어요ㅎㅎ
좋은 강의 감사합니다! 저 궁금한게 있는데 웹디자인할때 12단 그리드로 작업하면 칼럼이랑 거터값은 몇으로 하는게 좋은가요??
컬럼 넓이는 유동적인 것이고 거터를 24 / 30 / 36 / 40 등 디자이너 의도에 따라 맞춰서 제작합니다. 저는 거터값 24를 주로 사용해요.
@@designbase 알려주셔서 감사합니다!
14:31은 안된다고 하셨고 16:23은 가능하다 하셨는데 두 개 사이에 무슨 차이가 있는 건지 모르겠어요 ㅠㅠ 전자 후자 다 그리드에 안 맞춰져있는데 왜 후자만 가능한가요?
그리드에서 거터에 해당하는 영역에 물체가 들어오는 것을 침범하지 않아야한다는 내용이고, 16:23은 컨테이너의 폭은 조절이 가능하다는 내용이지만, 그 안에 거터를 침범해서는 안됩니다ㅎㅎ
그리드의 요소는 전체폭, 컬럼수, 거터값, 마진 이렇게 있는데 후자는 전체폭은 변경해도 된다!라고 이해하시면 됩니다.
@@designbase 너무나도 좋은강의 감사합니다 정말 많은 도움이되었습니다
추가로 궁금한게 있어서요 제가 이해한내용이 맞는건지요 14:31초에 안된다고하신것은 거터를 침범하게되면 타이포와 거터값 24px이 달라지게되고 16:23초에 된다고하셨던 내용은 전체폭을 800으로 잡고 거터값은 24px로 통일성있게 맞추게되니 된다고하시는게 맞는걸까요 제가 이해를잘못한걸까요?
좌우마진을 빼고 디자인해야된다는 얘기를 들었는데 컨테이너 1200이면 좌우 여백을뺄필요없나요?
이해가잘안되네요ㅜ
컨테이너 폭이랑 좌우 마진은 별개입니다~!
제 폰이 320입니다
엄청나네요...
저 설치하려하니까 스케치는 맥 만 쓸 수 있다고 하는데 대신 어도비xd로 진행해도 될까요?
넵 스케치로 하면 더 좋긴한데 xd나 피그마로 하셔도 됩니다👍
@@designbase 넵~지금 xd로 강의 보고 있어요~답변감사합니다🤗
웹 개발을 하실때 디자인을 다 만들어놓고 코드로 옮기시나요?
반반이에요..ㅎㅎ 기본적으로는 디자인을 다 끝내고 개발에 들어갑니다. 반응형 테스트할때 UI툴로는 확인하기 애매할때는 코드로 먼저해보고 후에 디자인하는 경우도 종종있어요👍
패스트캠퍼스 선생님이신가? 목소리가 비슷하네유
아니에요ㅎㅎ🤣
해당 웹사이트 컨텐츠 다운로드 받을수 있는곳이 있나요?
그리드로 css 하신거 다운받아보고 싶습니다.
offset이 뭔가요?
좌측으로부터 몇 px 떨어뜨리고 그리드를 생성할건지 입니다
크롬으로 웹사이트 뜯어 보는 법 알려주세요!! 처음 뜯어봤는데 보는 방법이 좀 어렵네요…ㅜ
뜯어보는 법이라는게 정확하게 어떤 정도를 원하시는걸까요 ㅋㅋ
오늘 네이버를 f12로 열어봤는데 디자이너가 해상도는 몇으로 잡았고 그리드는 어떤걸 썼는지 잘 모르겠더라구요.. 반응형이라 계속 바뀌는거 같기도 한데 그래도 기본 작업 사이즈는 몇으로 잡고 했는지 모르겠어요ㅠ 그리고 스케치 강의에서 네이버가 컨테이너 넓이가 1080이라 하셨는데 그런건 어떻게 아는건지도 궁금해요
@@user-iq9zs7iv3j 아 그렇다면 그런 강좌 만들어서 올려드릴게요!
@@designbase 정말 감사합니다ㅠ uxui 독학하고 있는데 정말 도움 많이됩니다!
혹시 질문 하나만 더 드리자면 시각디자인학과 재학중인데 전공엔 uxui는 없어서 독학으로 공부중인데 유튜브, 인강 보고 공부하면소 포폴만들고 취업까지 할 수 있을까요...? 아니면 학원을 다녀야할까요 고민이 많이되는 uxui 입문자입니다...ㅠㅠ
혼자배우는게 어려울 수 있는 영역입니다.. 저도 독학은 했지만, 창업 경험과 회사 실무 경험이 쌓이면서 알게되는 부분이 커서 무조건 유튜브로 보고 혼자 공부하는것만 추천드리진않아요. 배울수있는 모든방법을 다 동원해보세요ㅎㅎ
웹사이트 보고따라할때 그리드까지 똑같이 알아내서 하는게좋을까요??
그리드를 잡고 작업하는 연습하는게 중요하죠ㅎㅎ 완전 똑같이 할필욘 없어요
@@designbase 감사합니다!
반응형이 아닌 사이트도 그리드시스템을 이용하나용? 반응형 아닌 일반사이트를봤는데
거터값이 다다르더라구요,,ㅎㅎ컨테이너는 1200인데
네 반응형이 아니라도 그리드는 시각디자인의 기본이죠ㅎㅎ 안써도 상관없는 디자인들이 있긴한데 그리드를 사용하는게 좋죠
@@designbase 감사합니다 선생님!
한가지더 궁금한게 생겼는데 반응형이 아닌
일반사이트를 보면 거터값이 다 다르던데
이럴땐 그리드 거터값을 어떻게 잡고 따라해야하나요??
거터값을 안잡고 디자인을 하는경우도 있는데 좋은 방법은 아니에요ㅎㅎ
혹시 와이어프레임 강좌 올리셨는데 제가 못찾는거인걸까요?? ㅠㅠ
아직 안올라갔습니다ㅠㅠ😢
디자인베이스 아 그러시군요 ㅎㅎㅎ 좋은 강의 감사합니다. 기다릴게요 ㅎㅎㅎ
조만간 올리겠습니다!ㅎㅎ
? 근데 교수님이신가여 왜케 폭넓게 많이 아시는지..?
아뇨... 지나가는 디자이너 1 입니다.
대학 교수님이면 이렇게 잘 가르칠 리 없죠 ㅎㅎ
@@user-ro3pr2qn5z 대학 교수님들은 디자인이라는 학문을 좀 더 깊이있게 연구하시는 분들이라서 실무 디자이너와 비교하자면 지식의 카테고리가 좀 다른 것 같습니다.ㅎㅎ
해외전문 김기자 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 인정합니다..
정수 변태 ㅋㅋㅋㅋ
ㅋㅋㅋㅋ 중요하죠
정수 변태 ㅋㅋㅋㅋ
정수변태 존중합니다☺️