[실전 반응형디자인 Part.1] '브레이크포인트'의 개념과 '레이아웃 그리드' 설정방법
HTML-код
- Опубликовано: 20 окт 2024
- ▼예제 파일 링크▼
drive.google.c...
안녕하세요
디자이너 디케이의 '디자인 팁' 시리즈 입니다
제가 디자인 공부 및 실무 디자인을 하면서 알게된 유용한 팁들을
여러분들과 공유하고 함께 생각해보고자 만든 영상입니다.
구독 & 좋아요 부탁 드려요 :)
인스타그램 : / imagine_dk
![[실전 반응형디자인 Part.2] '오토레이아웃' 할 때 중요한 이것?! #responsive design #autolayout #figma](http://i.ytimg.com/vi/n73wcwCT1wc/mqdefault.jpg)
![[실전 반응형디자인 Part.2] '오토레이아웃' 할 때 중요한 이것?! #responsive design #autolayout #figma](/img/tr.png)
![Reactive Design Concept [Figma]](http://i.ytimg.com/vi/jaI2E50wu2k/mqdefault.jpg)
![[실전 반응형디자인 완결판] '브레이크포인트' 설정 노하우 대공개! #responsive design #figma #breakpoint](http://i.ytimg.com/vi/9rnpP-Bq8tE/mqdefault.jpg)
아아.. 선생님께서는 너무 필요한 정보를 깔끔하게 정리해주셔서 매번 저를 구원해주시는 것 같습니다..항상 좋은 영상 감사합니다😭
감사합니다 ㅎㅎ🤩🤩
와 댓글 잘 안다는데 정말 너무 명쾌하게 알려주시네요. 수치를 알려주시면서도 모든 디자인에 적용될수없는 이유와 예시를 설명해주시니 정말 속 시원합니다. 가장 이상적인 강의에요. 디케이님 구독하고 잘시청하겠습니다. 좋은 영상 너무 감사합니다!!!!
좋게 봐주셔서 감사합니다 ㅎㅎ 앞으로도 유용한 콘텐츠 많이 만들게요😊😊
정말 돈을주고 강의를 들어도 아깝지 않을것 같이 친절하고, 훌륭합니다.
좋은 말씀 너무나 감사합니다😊😊
피그마 강좌를 보면서 이렇게 이해가 잘되고 지루하지 않은 컨텐츠는 처음이네요! 구독하고 차근차근 보면서 따라해서 피그마를 실무에 잘 사용하고 싶네요 감사합니다
좋게 봐주셔서 감사합니다😊 앞으로도 좋은 콘텐츠 많이 만들게요 ㅎㅎ
현직 디자이너고, 이제 육아휴직에서 복직을 앞두고 있습니다 ㅎㅎ 시간 되는대로 다시 감 찾을겸 모든 영상 잘 보고있어요! :) 차근히 설명해주셔서 너무 좋아요 앞으로도 잘 보겠습니다! 감사해요!
안녕하세요~ 시청해주셔서 감사합니다 :) 저도 꾸준히 좋은 영상 만들어보겠습니다. 저도 육아하는 사람으로써 응원합니다 ㅎㅎ 화이팅~!
되게 꼭 필요한걸 잘 알려주시는 분!
감사합니다. 앞으로도 좋은 콘텐츠 꾸준히 만들게요 🙂🙂
감사합니다ㅠㅠㅠㅠㅠㅠㅠ 최고에요 정말!!! 항상 응원합니다!!
감사합니다 😆😆
강의 너무 좋아요 ㅠㅠ 계속 내주세요!!!!!!
감사합니다🤩🤩
와 선생님... 제가 너무 찾던 영상이에요 ㅠ_ㅠ 독학하는 저로써는 맨땅에 헤딩하는데 반응형웹을 어떻게 만드는지 전혀 감이 안잡히고, DK님 영상처럼 구성된 컨텐츠를 못찾았거든요!! 어서 다음편도 다다다 올려주세요오.....!
감사합니다. 열심히 만들어서 또 올릴게요 😆😆
결국 최종 반응형은 코딩을 배워야 하는 군요 ㅜㅜ 덕분에 피그마의 좋은 스킬들을 배워갑니다. 감사합니다.
프레이머는 관련해서 좋은 기능들이 있는 것 같았는데..피그마도 점차 좋아지길 기대해봐야죠 ㅎㅎ 감사합니다😊
감사합니다. 정말 도움이 많이 되는 시리즈가 될 것 같네요. 예제 써보면서 배워보겠습니다
감사합니다 ㅎㅎ 화이팅입니다👍👍
너무 유용한 강의영상입니다. 🙏 iOS와 Android OS별 앱디자인도 유의할 가이드를 적용하여 이 영상처럼 차별화된 강의영상도 있었으면 합니다!
감사합니다. 그 부분도 언제 한번 고민해보겠습니다 🙂🙂
감사합니다. 피그마에서 반응형을 만드는 와중 해결되지 않는 문제가 있어 질문드립니다. 반응형으로 가로 길이가 줄어들면 이미지가 정사각형 비율을 유지하며 가로 세로 같이 줄어들기는 코딩으로는 가능한데, 아무리 오토레이아웃과 콘스트레인 고정을 줘도 이미지의 가로만 줄어듭니다 ㅠㅠ 이미지 정사각형 비율을 유지하며 줄이는 방법은 피그마에서 없을까요?
안녕하세요~ 좋은 질문 감사합니다 :) 저도 그 부분을 많이 시도해봤는데 안되더라구요..피그마가 아직 지원히지 않는 걸로 알고 있습니다.
영상 너무 잘보고 있습니다. 한가지 궁금한것은 피그마에서 반응형 설정한것을 프리뷰에서는 테스트 못하나요?? 다른분께 공유하거나 플레이버튼 눌러서 확인하니 반응형이 안됩니다. 원래 그런건가요??
안녕하세요 시청해주셔서 감사합니다 :)
말씀주신 프리뷰로 보는 것은 제가 알기로도 화면사이즈 실시간 조정을 임의로 해볼 수 없는 걸로 알고 있습니다.
@@designer_dk 감사합니다. 안되니까 서운하네요. ㅎㅎ
Breakpoint 라는 플러그인이 있습니다!!! 7일? 체험판 이후 결제를 진행해야하지만 꼭 필요하시다면 이 플러그인을 결제해서 사용해보시는것도 좋을 것 같습니다. 프리뷰에서 바뀌는걸 보실 수 있습니다. 사용법는 유튜브에 검색하면 확인가능해요
@@Kalebee48 오호?! 감사합니다~
2:30 퍼블리싱 공부가 프론트앤드 공부 하셨나요?
시청 감사드립니다🙂 프론트엔드도 범위가 넓을 것 같은데 디자인과 관련된 프론트엔드는(퍼블리싱) 공부를 했고 약간의 기능 관련 공부도 짬짬이 하고 있어요 :)
피그마 토대로 퍼블리싱할때 자동으로 반응형 코딩소스 제공해주는 플러그인 같은건 없나요? ㅠㅠ 부트스트랩 기반으로 해서 반응형 퍼블리싱까지 해야하는데 넘나 힘듭니다 ㅠㅠ ...
보통은 어떻게 진행하시나요?
저같은경우 1. 부트스트랩으로 세팅 / 2. 레이아웃 세팅 / 3. 부트스트랩 제공에 없는 다른스타일은 피그마에서 css 복붙해서 씀 4. HTML도 귀찮아서 AutoHtml 플러그인 사용해서 복붙..
(참고로 전 디자이너고 퍼블리싱은 비전문..)
위 과정에서 수정없이 진행하면 참 좋은데 꼭 디자인 수정이 생기고, 또 코딩 수정하는데 이게 또 레이아웃 안맞고, 정렬 안맞고 , 그럼서 수정에 수정을 거듭... 하다보면 짜증나고 화나고
시간이 너무너무 오래걸리네요..
좀더 매끄럽게 할 방법은 없을까요? 그냥 완전 웹버전만 하면 뚝딱 끝나는데, 반응형 하자니 메뉴하나 만드는데 몇시간.. 화면 줄이면서 확인하랴, 정렬 안맞으면 또 맞추고.. 정렬안맞음 잘 모르니까 검색해서 찾아보고.. 또 찾고... 하다보면 하루젠종일 하는데 결과물은 탑메뉴 하낰ㅋㅋㅋㅋㅋ......
반응형코딩 공부하자니 일은 빨리 쳐줘야하고 ㅠㅠ 좀 괜찮은 방법 추천해주시면 .. 감사하겠습니다
참 그리고 DK유툽 보자마자 구독바로했습니다. 피그마의 정석입니다. 감사, 감사 또 감사합니다 ㅠㅠ
시청감사합니다 :) 저도 자동으로 반응형 코딩소스 제공을 해주는 플러그인은 잘 모르겠네요 ㅜㅜ
퍼블리싱은 저도 화면마다 노가다로 진행하긴 했었습니다. 정공법으로 html+css로 해왔어서 더 빡셌던 것 같네요 😂😂
그래서 기능이 적은 프로모션사이트는 프레이머로 하는 것으로 팀에서 추진 중입니다.
부트스트랩으로 하는 방법은 오히려 저도 참고해보고싶네요🙂🙂
감사합니다. 저의 구세주이십니다... 휴..ㅠㅠㅠㅠ
감사합니다 😍😍
선생님 다음 강의는 언제쯤 올라오나용?😊
일주일 후 쯤 예상합니다 ㅎㅎ
디자이너님 혹시 Rem과 px에 대한 강의도 해주시면 안되나염 ㅜㅠ
반갑습니다 :) 저도 rem은 유저에게 좋은 개념이라 꼭 써보고싶은데 아직 피그마가 rem을 단위로 사용하지 않고있다보니 저도 현실적으로 실전에 사용해보진 못한 단계입니다. 향후에 저도 사용하게되면 꼭 콘텐츠로 다뤄볼게요 :)
피그마인가요?
네 피그마입니다 ㅎㅎ