시청 감사합니다 ㅎㅎ 컴포넌트에 사이즈 속성을 추가해서 각 화면에 맞게 쓰면 됩니다. 다만 모바일쪽은 가로를 fill(css기준 width 100%)로 많이 사용하게 되는데 피그마에서는 부모 없이는 fill이 막혀있기 때문에 컴포넌트를 화면에 넣은 후 fill로 지정해주면 됩니다 🙂
안녕하세요. 브레이크 포인트 관련해 질문이 있습니다. 보여주신 영상처럼 컨텐츠가 많을 경우 마진을 기준으로 설정을 하고 fill container 처리한다면 프레임을 줄일 때 그에 따라 맞춰서 줄어들 수 있을 것 같은데요. 다만 로그인 페이지 같은 경우 마진이 훨씬 여유가 있어서 마진을 기준으로 한다기 보다 container 기준으로 설정(desktop, laptop 기준으로 container가 480px이고, tablet에서는 400px가 되어 있음.)을 하고 있는데, 이런 케이스 처럼 유동적으로 container 기준으로 잡고 작업을 해도 되는지 싶어 질문드립니다! 강의 매번 잘 보고 있습니다. 질 높은 영상 공유해 주셔서 감사합니다 :)
시청해주셔서 감사합니다 :) 이야기주신대로 화면 센터에 위치하는 엘리먼트들은 fill컨테이너가 아닌, 이야기주신대로 고정값이 맞다고 생각합니다. 그게 고정값이다가 화면이 모바일처럼 줄었을 때 fill컨테이너가 되도록 할 수도 있을 것이구요 ㅎㅎ 상황에 맞게 디자인하는게 좋다고 봅니다 :)
우선 강의가 길지 않아서 빠르게 중요 정보만을 습득할 수 있어서 너무 좋았어요! 그리고 fill, hug등의 오토레이아웃 개념 은근히 헷갈리는데 깔끔하게 설명해주셔서 너무 좋았고요. 막연하게만 알고 있던 반응형이라는 것에 대해서도 확실하게 지식을 가지고 갈 수 있게 되었습니다. 너무 감사해요 ㅎㅎ 유튜브 편집도 너무 보기 편하게 잘하시네요 더 승승장구하시길!
안녕하세요 강의 너무 잘 들었습니다~!:) 궁금한 점이 하나 생겨 질문 드리고 싶은데요ㅠㅠ 반응형 카드 디자인 할 때, 웹 사이즈를 줄이면 가로줄의 카드가 카드 6개>5개>4개>3개 식으로 순차적으로 줄어드는데, 혹시 한 줄 카드 6개(6columns)에서 특정 브레이크포인트를 지나면 바로 카드 3개(3columns)가 되게 하는 건 피그마에서 구현이 어렵나요? ㅜ.ㅜ 좋은 강의 정말 감사합니다!
안녕하세요. 시청해주셔서 감사합니다 :) 카드의 경우는 제가 이번 반응형시리즈를 통해 쭉 강조드린대로 피그마에서는 원하는대로 반응시키는게 어렵기 때문에 제가 이번에 진행한 것 처럼 원하는 브레이크포인트 화면 디자인에서 3컬럼구조로 디자인을 해놓으면 됩니다. 그러면 css에서는 충분히 구현이 가능하기 때문에 퍼블리싱을 진행하는 분이 알아서 잘 처리해 주실거예요 ㅎㅎ
![[실전 반응형디자인 Part.2] '오토레이아웃' 할 때 중요한 이것?! #responsive design #autolayout #figma](http://i.ytimg.com/vi/n73wcwCT1wc/mqdefault.jpg)
![[실전 반응형디자인 Part.2] '오토레이아웃' 할 때 중요한 이것?! #responsive design #autolayout #figma](/img/tr.png)
![UI디자인을 예술작품으로 만들었네...? [시청자컨펌] [Figma]](http://i.ytimg.com/vi/ahElVueKyRI/mqdefault.jpg)
쌤~ 너무 감사해요! 풀시청중입니다^^
감사합니다 🤩🤩
유튜브에 댓글 다는 게 처음인 것 같은데 너무 좋은 강의라 안 달 수가 없었습니다 ㅠㅠ
디자이너 DK님보다 더 쉽게 설명해주는 강의가 있을까 싶을 정도입니다...
정말 최고의 강의 감사합니다!! 앞으로도 많은 꿀팁 전수해주세요~~
좋게봐주셔서 너무나 감사합니다 😊😊 앞으로도 좋은 콘텐츠 많이 공유드리겠습니다~~
선생님 예제가지고 연습해볼 수 있어서 도움이 크게 되었어요🥹
감사합니다❤
도움되셨다니 기쁩니다 🙂🙂
완강 완료! 완전 유익한 강의였습니다!
😍😍😍
피그마 강의에 댓글 다는건 처음이네요!
사수없이 디자인을 해야하다보니 막연한 부분들이 있었는데, dk님 영상 덕분에 해소된 부분이 많네요ㅜㅜ감사합니다:0
앞으로도 영상 많이 부탁드릴게요!!
저도 보람차네요😊😊 감사합니다!!
굉장히 도움됩니다! 감사해요 :)
감사합니다 🙂🙂
진짜 실무에서 너무 잘 적용해서 사용하고 있습니다!! 항상 감사드립니다.
저도 뿌듯하네요 ㅎㅎ 감사합니다😊😊
도움이 많이 됐어요. 공통요소를 컴포넌트로 만들어서 각 디자인 레이아웃에서 하나로 쓰고 싶은데 콤포넌트에 사이즈별 속성을 별도로 만들어놓고 불러오는 식으로 사용하면 되나요? 참고로 디자이너는 아닙니다 😅
시청 감사합니다 ㅎㅎ 컴포넌트에 사이즈 속성을 추가해서 각 화면에 맞게 쓰면 됩니다. 다만 모바일쪽은 가로를 fill(css기준 width 100%)로 많이 사용하게 되는데 피그마에서는 부모 없이는 fill이 막혀있기 때문에 컴포넌트를 화면에 넣은 후 fill로 지정해주면 됩니다 🙂
@@designer_dk 오오 감사합니다. 베리어블로 사이즈 별로 값 정의를 하는건지 막막했는데, 답변으로 클리어해졌어요~ 채널 번창하시길 바랍니다 👍🏻👍🏻
@@dowoorron 감사합니다 😀
덕분에 반응형 잘배우고 있습니다 여기 만큼 디테일한 곳이 없어요 ㅠㅠ 혹시 카드 이미지를 1:1 비율로 반응형에 맞게 변형은 어떻게 하나요?
시청 감사합니다 🙂🙂 저도 그게 항상 궁금했는데 피그마가 1:1 반응형이 안되는 것 같더라구요;; 그 부분은 개발-퍼블리싱으로 풀어야하는 것 같습니다
@@designer_dk 아 그렇군요…. 하루종일 찾아보고 해봐도 안돼서 처음 댓글 달아봤는데 리댓 주셔서 감사해요!!! Dk님 덕분에 피스마 반응형 많이 배우고 갑니다 즐거운 주말 보내세요🥹🥹
@@kkkk9240 저도 시청 너무나 감사드립니다 :) 좋은 주말 보내세요
안녕하세요. 브레이크 포인트 관련해 질문이 있습니다. 보여주신 영상처럼 컨텐츠가 많을 경우 마진을 기준으로 설정을 하고 fill container 처리한다면 프레임을 줄일 때 그에 따라 맞춰서 줄어들 수 있을 것 같은데요. 다만 로그인 페이지 같은 경우 마진이 훨씬 여유가 있어서 마진을 기준으로 한다기 보다 container 기준으로 설정(desktop, laptop 기준으로 container가 480px이고, tablet에서는 400px가 되어 있음.)을 하고 있는데, 이런 케이스 처럼 유동적으로 container 기준으로 잡고 작업을 해도 되는지 싶어 질문드립니다!
강의 매번 잘 보고 있습니다. 질 높은 영상 공유해 주셔서 감사합니다 :)
시청해주셔서 감사합니다 :) 이야기주신대로 화면 센터에 위치하는 엘리먼트들은 fill컨테이너가 아닌, 이야기주신대로 고정값이 맞다고 생각합니다. 그게 고정값이다가 화면이 모바일처럼 줄었을 때 fill컨테이너가 되도록 할 수도 있을 것이구요 ㅎㅎ 상황에 맞게 디자인하는게 좋다고 봅니다 :)
@@designer_dk 감사합니다. fil container를 max min 값을 지정할 수 없어 어떻게 해야하나 고민하고 있었는데 해당 부분은 container 기준으로 설정해야 겠습니다!
헤더 같은 경우 컴포넌트로 만들어 사용할 때, 예시처럼 디바이스마다 마진을 수정하게 되면 각 사이즈에 따라 컴포넌트를 만드는건가요?
안녕하세요 :)
디자인을 할 땐 한 컴포넌트로 하건 다른 컴포넌트로 하건 둘 다 괜찮아서 편한 방식으로 하면 되지 않을까 싶은데요~
개발(퍼블리싱) 차원에서의 컴포넌트로는 아마 한 컴포넌트로 두는 케이스가 많을 듯 합니다.
우선 강의가 길지 않아서 빠르게 중요 정보만을 습득할 수 있어서 너무 좋았어요!
그리고 fill, hug등의 오토레이아웃 개념 은근히 헷갈리는데 깔끔하게 설명해주셔서 너무 좋았고요. 막연하게만 알고 있던 반응형이라는 것에 대해서도 확실하게 지식을 가지고 갈 수 있게 되었습니다.
너무 감사해요 ㅎㅎ 유튜브 편집도 너무 보기 편하게 잘하시네요 더 승승장구하시길!
좋은 평 너무 감사합니다 😃😃
www.monimo.com/w/main/WPFMHP0101M0 / 모니모 같은 화면은 세로 높이를 어떻게 해두고 작업하는게 좋을까요?
웹이든 앱이든 세로는 스크롤이 가능하니 얼마든지 열어둬도 됩니다 🙂
안녕하세요 강의 너무 잘 들었습니다~!:) 궁금한 점이 하나 생겨 질문 드리고 싶은데요ㅠㅠ 반응형 카드 디자인 할 때, 웹 사이즈를 줄이면 가로줄의 카드가 카드 6개>5개>4개>3개 식으로 순차적으로 줄어드는데, 혹시 한 줄 카드 6개(6columns)에서 특정 브레이크포인트를 지나면 바로 카드 3개(3columns)가 되게 하는 건 피그마에서 구현이 어렵나요? ㅜ.ㅜ 좋은 강의 정말 감사합니다!
안녕하세요. 시청해주셔서 감사합니다 :) 카드의 경우는 제가 이번 반응형시리즈를 통해 쭉 강조드린대로 피그마에서는 원하는대로 반응시키는게 어렵기 때문에 제가 이번에 진행한 것 처럼 원하는 브레이크포인트 화면 디자인에서 3컬럼구조로 디자인을 해놓으면 됩니다. 그러면 css에서는 충분히 구현이 가능하기 때문에 퍼블리싱을 진행하는 분이 알아서 잘 처리해 주실거예요 ㅎㅎ
@@designer_dk 감사합니다 !!! 도움이 정말 많이 됐어요 ㅎㅎ:)