#2 스케치(Sketch)툴 인터페이스 파악하기 - 스케치 강좌
HTML-код
- Опубликовано: 24 сен 2024
- 스케치 강좌 두 번째입니다. 스케치를 왜 사용해야 하는지를 알아봤으니, 익숙해지려면 인터페이스를 훑어봐야겠죠? 툴이 어렵게 느껴지는 이유는 딱 두 가지인데 진짜 너무 어렵거나 아직 익숙하지 않아서입니다. 스케치는 후자이기 때문에 익숙해질 때까지 사용하시면 아주 쉽다고 느껴지실 거예요.
스케치에서 제공하는 메뉴바부터 툴바, 레이어, 캔버스, 인스펙터 등 하나하나 살펴봅시다.
🌟예제 다운은 멤버십 회원 전용 커뮤니티에 올린 링크에서 받으실 수 있습니다.🌟
🚀 디자인베이스 멤버십 가입하면 다양한 고급 강좌와 예제 파일을 받아볼 수 있어요 🚀
┗ / @designbase
*스케치 툴은 Mac OS에서 사용이 가능합니다.
누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 스케치 툴의 첫단추는 디자인베이스에서 시작하세요. 열정만 준비하시면 다 따라 할 수 있습니다. : )
☞ 디자인베이스 소개 : designbase.co.k...
☞ 공식 웹사이트 : designbase.co.kr/
☞ 네이버블로그 : blog.naver.com...
*BGM 사용 출처
Track: Robin Hustin x TobiMorrow - Light It Up (feat. Jex) [NCS Release]
Music provided by NoCopyrightSounds.
Watch: • Robin Hustin x TobiMor...
Free Download / Stream: ncs.io/LightitupYO
------
Track: NIVIRO ft. PollyAnna - Fast Lane [NCS Release]
Music provided by NoCopyrightSounds.
Watch: • NIVIRO ft. PollyAnna -...
Free Download / Stream: ncs.io/FastLaneYO
![웹디자인 시작한다면 이건 꼭 보세요[포토샵]](/img/1.gif)
윈도우 기반으로 에이전시에서 일하던 디자이너입니다. 이직을 준비하면서 스케치 프로그램의 배움을 절실히 깨닫고 유튜브를 검색하던중 디자인베이스님의 강의를 보게되었습니다. 좋은 강의 만들어주셔서 감사하며 정주행 해보겠습니다. :-) 오늘하루도 행복하세요!
안녕하세요~!ㅎㅎ 좋게 봐주셔서 감사합니다 :)
설명이 자세하고 이해가 쏙쏙 너무 잘 보고 있습니다. 다음편이 기대됩니다~ ~
감사합니다.👍 빨리 다음편들 올려야되는데 갑작스레 노트북을 고치게돼서 다음영상 업로드가 늦어지고 있네요ㅠㅠ
신세계..! 프로그램 대충알다가 디테일하게 보니 유용성이 장난아닌데요!! 이랬으면 좋겠다 싶은게 다있다니!!
아주 좋은 툴이에요ㅎㅎ 한번 사용해보세요!
밑에 개발자라고 한 사람 입니다. 디자인베이스님, 영상 또 보고 있습니다 ㅋㅋㅋ
다시 봐도 좋네요. 다시 한번 감사드립니다.
ㅎㅎ감사합니다!ㅎㅎ😊👍👍
곧 졸업예정인 학생입니다! 학교에서는 xd만 배웠는데 현업에서는 스케치를 사용한다는 말을 듣고 독학을 시작했습니다. 막막했는데 정말 도움되는 기초 가이드 영상 감사합니다! 구독누르고 갑니다!
감사합니다!ㅎㅎ 스케치가 짱이죠🙌
몇년 전부터 스케치를 쓰긴했는데 툴 강좌도 안보고 업데이트도 안하고 있다가 디자인베이스님 강좌보고 지금까지 너무 무식하게 일했다 싶습니다 ㅋㅋㅋㅋㅋ 업데이트 된 기능들도 플러그인도 살펴보며 공부 잘 할게요! 정말 감사합니다!
ㅎㅎㅎ그런분들 많아요! 디자인 실력과 툴사용 능력과는 별개이지만 UI 쪽은 툴의 잘사용해야 디자이너 본인이 편하죠ㅎㅎ 잘만 사용하면 업무 능률이 엄청 올라갑니다ㅎㅎ
일하면서 스케치 파일이 오갈때 이걸 어떻게 봐야하는지 곤란했는데 유용한 프로그램이군요! 좋은 강좌 감사합니다
감사합니다ㅎㅎ 알아두면 아주 좋은 툴이에요 :)
2년차 디자이너입니다. 방금 구독하기 눌렀어요 ! 저희는 윈도우를 써서 스케치를 못쓰는데 맥북을 사고싶어지네요.. 자세한 설명 감사드립니다 !
안녕하세요 뱀피님ㅎㅎ 반가워요😄👍
감사합니다~!
감사합니디👍
아주 잘가르켜 주시네요 원따봉 드립니다
😊👍
웹디자이너가 알면 좋은 퍼블리싱 강좌 기대됩니다 !!!
넵!ㅎㅎ 해당 강좌도 준비중입니다~!
현재 실무에서 ui작업을 하고있는대 기능들이 엄청나네요.. 실무업무랑 별도 따로 준비해야할만큼 매력적입니다~!
스캐치의 매력이란...👏🏻👏🏻 빠져나올수없죠
디자이너가 아닌 개발자인데도, 이해하기가 너무 쉽네요. 좋은 강의 감사합니다.
감사합니다ㅎㅎㅎ! 개발자분이 영상을 봐주시다니😊😊
싫어요 없는 거 실화냐? 근데 없을만 하네요!! 사실 개인적으로 웹페이지 만들어 보려고 HTML, CSS를 넘어 파이선까지 하나하나 힘겹게 해오고 있는데 뭔가를 배울수록 새로운 영역이 펼쳐져서... 이럴 때마다 내가 어디에 서있는지 혼란스럽기도한데 그래도 기회라고 생각하고 열심히 해보려고요. 말이 주절주절 길었는데 좋은 영상 만들어 주셔서 감사합니다~
감사합니다 :)
너무너무 유용합니다. 감사합니다!
재밌다니 다행입니다 ㅎㅎ
쓴생님.. 조은강좌 감사합니다,, 새벽에 작업하다가 보고갑니다,,
감사합니다ㅎㅎ 디자인 작업은 새벽에 해야 제맛이죠👍
맥북 어제 구매하고 스케치부터 배우려고 검색했는데 베이스님 강좌가 제일 많이 보이네요 ㅎㅎ 바로 완강 달립니당
반가워요ㅎㅎ👍 화이팅입니다
오늘도 알차게 강의 들었네요! 감사합니다!
감사합니다! ㅎㅎㅎ
와... 엄청좋은 프로그램이네요 ! 교육 찾고 있었는데 디테일하게 천천히 설명해주셔서 너무너무 감사합니다 ! !
감사합니다ㅎㅎ :) 👍
정말 도움이 많이 됩니다!! 너무너무 감사드리고 앞으로도 컨텐츠 많이 올려주세요~
도움되셨다니 기분 좋네요ㅎㅎ 좋은 강좌 많이 준비중입니다. 연말에 갑자기 어려운 프로젝트 하느라 잘 못올리고 있긴 한데... UI 강좌를 올릴 예정입니다.
정말 귀에 쏙쏙!! 설명 잘 하시네요~ 스케치 독학중인데 많은 도움이 되네요! 굿굿굿입니다 ^^ 감사해요
감사합니다😊👍
스케치 툴을 배우는 시점에서 너무 도움이 됩니다! 앞으로도 남은 영상과 더 많은 영상 즐겁게 보겠습니다!
안녕하세요 송수민님ㅎㅎ 조금이라도 도움되셨으면 좋겠네요😀
@@designbase 답변 감사합니다 :-) 독학으로 하다보니, 스케치 툴을 익숙하게 사용하기 위해서 좋은 연습방법 추천해주실게 있을까요?
@@포잉-x8f 포트폴리오 만든다고 생각하시고, 특정 앱을 리디자인해보세요. 더 쉬운 방법으로는 잘 만들어진 앱을 따라해보세요. 대신 하나의 앱 디자인할 때 최소 10페이지 이상 작업해보세요. 그래야 심볼이랑 스타일 가이드를 이용해서 작업하면서 편리함을 느끼게 됩니다.ㅎㅎ 작업하다가 궁금한 게 있으면 언제든지 댓글로 질문해주세요~!
감사합니다 너무 잘 봤습니다
감사합니다 :)
감사합니다 이해가 쏙쏙 되네요!!
다행이네요🙌🙌
너무 도움이 됩니다~! 이런 좋은 정보 공유해주셔서 감사합니다~^^
연말 잘보내세요ㅎㅎ🤩👍
우와 진짜 이해가 쏙쏙 잘가요.. 정독해야겟습니다 !
감사합니다 류소르님🤩
감사합니다 🙂
감사합니다☺️
감사합니다
😌👍
도움이 많이 되었습니다 감사합니다 :)
댓글 감사합니다ㅎㅎ🙌
xd 기반으로 디자인하다가 스케치가 현업에서 많이 사용된다는 것을 알고 스케치로 옮겨오는 디자인 취준생입니다.
영상이 많이 도움이 돼요! 감사해서 댓글 남겨요! 총총..
일러스트에서 작업한 아이콘을 바로바로 불러오기는 힘들까요?
xd에서는 일러스트에서 복사하고 바로 붙여넣기만 하면 됐었는데
스케치에서는 이미지로 인식하고 잘 안되더라구요ㅠ
SVG파일로 저장하고 일일이 불러오는 방법밖에는 없는지 궁금합니다!
일러스트레이터로 만든 아이콘 복사 붙여넣기로 스케치에 불러오면 벡터가 살아서 들어옵니다ㅎㅎ
정말 감사합니다:-)
설연휴 잘보내세요~!😊
독학하고 있는데 차근차근 잘 알려주시는거 같아서 너무 좋아요ㅎ 혹시 xd랑 스케치랑 비교해서 알려주실 수 있나요?
댓글 감사합니다~!ㅎㅎ 스케치를 먼저 사용하고 xd를 나중에 접해서 사용해보면서 느낀점을 짧게 말씀드리자면, 스케치는 UI 제작 및 유지보수에 최적화된 툴이고, XD는 포토샵 대신 가볍게 UI 제작하고 쉽게 간단한 프로토타입만드는 정도의 툴이라는 생각이드네요. 포토샵과 호환되는 장점 + 맥사용자가 아니라도 쓸수있는 장점 + 무료라는 장점 이렇게인데.. 사실 이 세 장점보다 스케치로 작업했을때 훨씬 높은 퍼포먼스를 낼 수 있는 단계라서 좀 더 지켜봐야될 것 같아요.
@@designbase 답변 너무 감사해요ㅠㅠㅎ
디자인 베이스님 ! 친절하고 디테일한 강의 잘듣고있습니다 ..! 다름이 아니라 이번에 웹사이트 제작을 해보려고 하는데 애니마 플러그인으로 웹사이트에 영상 삽입하는 방법 알려주실수있으실까요 ? 계속 찾아보고 플러그인도 설치해보았는데 컴퓨터 내에있는 영상은 인식을 못하고 동영상이 삽입이 안되네요 ㅠ
09:08 갈매기 사진과 헛웃음ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
ㅋㅋㅋㅋ😛
넘 조아요 ㅠ
감사합니다ㅎㅎ☺️👍
1월부터 새로운 회사에서 스캐치를 써야하는데 많은도움이 되었습니다. 질문있는데요 가이드라인 위치를 수정해서 이동하려면 어떻게 해야하나요
가이드라인 설정은 상단 툴바에 view > Layout Settings에서 하실 수 있습니다ㅎㅎ👍
안녕하세요! 웹디자이너를 지망하고 있는 미대생입니다
포토샵 기초 강좌부터 해서 너무 도움이 되는 영상이 많아서 항상 챙겨보고 있습니다ㅠㅠ
근데 웹디자인은 학교에서도 배운적도 없고, 개인적으로 시작한 거라 정말 하나도 모르는 상태에서 시작했는데, 어떤 영상부터 차럐로 보는게 좋을까요,,? 대략적인 순서라도 알려주시면 감사하겠습니다 ㅠㅠ
안녕하세요~!ㅎㅎ 음... 저라면 툴 강좌를 먼저 학습해서 기본적인 사용법을 익히고 이론으로 돌아와서 웹디자인 입문 강좌를 보시면 좋을 것 같습니다. 웹에 들어가는 배너나 그래픽 작업은 포토샵이나 일러스트레이터를 사용하기때문에 필수 툴이고, UI 툴은 스케치나 피그마를 사용하시는 걸 추천드립니다. 피그마 강좌는 별도로 안올라가지만, 멤버십 강좌로 올라갈 예정입니다. 툴은 쉽게 배우실 수 있어요ㅎㅎ
쓴생님 키보드 어떤거 쓰세요? 맥 키보드의 타건이 아닌거같은데..! 🤔
애플 매직키보드2 사용합니다😌
일러스트랑 더 비슷하네요 포토샵보단
네 벡터기반의 툴이라서 일러스트레이터랑 비슷하죠. 기능들이 GUI에 초점을 두고 제작된 툴이라서 ui작업에 많이 쓰이는 툴입니다
스케치로 디자인을 하면 그 디자인을 어떻게 웹이 적용시킬 수 있나요?
웹 코딩 입문 강좌를 참고하시면 더욱 이해가 가실꺼예요. 프론트앤드 개발은 HTML, CSS, JS 같은 웹 코딩 언어로 제작을 하고, 백앤드 개발은 Node.js, 파이썬, php, java 등으로 개발을 해서 웹사이트가 만들어집니다.
@@designbase 아 넵 알고있습니다. 제 질문은 스케치로 웹 디자인을 하면 디자인을 한 것을 html, css로 변환을 시켜서 웹에 적용 할 수 있는 건가요? 아니면 디자인 한 것을 보고 직접 html, css로 코딩을 해야되는 것인가요?
@@푸드-l5c 아 넵~! 스케치에서 별도로 html, css로 변환해주는 기능은 제공하지 않습니다. 제플린 같은 가이드라인 툴을 통해서 프론트앤드 개발자분들이 작업을 해야됩니다.
@@designbase 아 그렇군요. 정말 감사합니다.
안녕하세요~ 밑에 댓글 보고 궁금한 것이 있는데, 디자이너로서 배워야할 코딩과 개발자로서 배워야할 코딩이 다를 것이라고 얼핏 느껴지긴 하는데.. ux/ui 디자인을 전문적으로 하려면 어떤 코딩들을 제대로 학습하는 것이 좋을까요? html,css로 시작해서 jquery 까지는 필수인 지 궁금합니다ㅠ
네 다릅니다. 디자이너로서 배워야할 코딩은 눈에 보여지는 영역에서도 퍼블리싱쪽이긴한데 html, css만 가볍게 배워도 반응형 웹 레이아웃잡을때 감이 올거에요.. jquery를 배워도 좋죠. 배움에는 다다익선이..👍
오른쪽 사이드바 옆에 얇고 긴 바는 어떻게 불러오는걸까요? (플레이,번개모양 등등 있는 바)
안녕하세요~! 저건 Craft라는 플러그인 설치을 설치하면 나옵니다. ruclips.net/video/jmAf2XHwHrY/видео.html 이 영상 참고하시면 됩니다 :)
피그마 , 어도비 잘사용하다가.... 옮긴회사가 스케치를 사용해서 디베님강의 모두 시청중입니다 ! 개인적으로 3가지 중에 스케치가 제일 입문 허들이 높은 것 같습니다. 이거보고 겨우 발맞춰가고 있습니다. 감사합니다 !
혹시... 맥기본 설정은 마우스휠 줌방향을 바꾸었는데, 스케치앱은 안바뀌더라구요 환경설정에어도 없고 혹시 바꿀수 있는 방법이 없을까요 ㅜㅜ🤦🏻🤦🏻🤦🏻
감사합니다ㅎㅎ 제 컴퓨터에서는 마우스휠 줌방향은 맥 설정에서 스크롤방향:자연스럽게를 체크한것과 체크하지 않은것이 다른데요?? 다시한번 해보세요~!
스케치 독학 하고싶은데 윈도우 사용자라면 맥을 사는 방법밖에는 없는건가요?? ㅠㅠ
네 그렇습니다.. 맥전용 툴이라서 어쩔수가 없네요ㅠ
최근에 처음 다운 받았는데, 디베 슨생님이랑 인터페이스 화면이 다르네요ㅠㅠ 버전 차이 문제인가요??..
네 맞습니다.. 벌써 1년이란 시간이 지나서..ㅠㅠ 업데이트가 많이 됐네요
선생님 유익한 강의 정말 잘듣고있습니다. 여기저기 물어봤지만 아시는분이 안계셔서 죄송하지만 여기다 질문 한가지만 드릴게요..! 15:30에서 선생님의 폰트셀렉 환경에서 '나눔고딕', 'Apple SD 산돌고딕 Neo'와 같이 한글폰트들은 한글명으로 적혀있습니다. 그런데 제 화면에서는'NanumGothic', 'Apple SD Gothic Neo'등과 같이 한글폰트라도 전부 영어로 표기되어 보입니다. 때문에 폰트를 찾을때 가독성이 떨어지고 오래걸려서 불편함을 겪고있습니다. 선생님화면 처럼 한글로 보이게 설정하는법이 있을까요? 꼭 해결하고싶어요..ㅠㅠ
폰트명을 한글로 보이게 하는 방법까지는 모르겠네요 ㅠㅠ
@@designbase 아, 오늘 해결되었습니다 ^^ 공부중에 버전업그레이드 얼럿창이떠서 업글했더니 한글로 보이네요~ 감사합니다!
무료로 지식 공유 해주셔서 감사합니다
감사합니다!ㅎㅎ
모바일 디자인 말고 pc ui 디자인으로도 활용가능하나요?
네 충분히 가능합니다~!
답변 감사합니다.
다운받을려고하는데 sketch Export for Xcode 맞을까요??
뭘다운받나요?? 스케치요??
@@designbase 구글에서 다운받았습니다 ㅎㅎ 이 강좌 전부 따라해봤는데 너무 유용하고 훌룡하고 가독성도 높습니다 ㅠㅠ 다만 마지막 부분의 16:30 초 부근의 텍스트 옵션에서 텍스트에 밑줄주는 부근은 못찾겠네요 ㅜ.ㅜ
@@민-v4x 감사합니다 :) 텍스트 옵션은 텍스트 레이어를 선택했을 때 나타납니다. Text Options - Decoration이라고 있습니다.
안녕하세요 디자인베이스님 오늘부터 스케치공부하기로 한 학....생..은 아니고 취준생입니다!ㅎ 제가 스케치를 작정하고(?) 공부하려 하는데 내용정리를 하면 공부가 더 잘되는 타입이라서요ㅠㅠ혹시 제 블로그에 비공개로 영상을 캡쳐해서 정리노트 하는 식으로 정리해도 될까요?? 상업적으로 이용이 절대절대아니구요 그냥 메모형식으로 공부하고 싶어서요! 철저한 비공개로 메모하고자 하는데 가능할까요??
안녕하세요. 공부에 도움되시면 그렇게 하세요.ㅎㅎ 혹시 공개로 올리시는거라면 출처랑 유튜브 링크 걸어주시면 저한테 도움 많이 됩니다~!:)
@@designbase 정말 감사합니다!!!신입디자이너에게 큰 도움 주셨습니다ㅜㅜ블로그를 일기식으로 사용해서 거의 비공개로 활용하지만 공개로 올리게 된다면 반드시 출처와 영상링크 붙이겠습니다! 고맙습니다!! :D
@@designbase 안녕하세요 디자인 베이스님, 저 리플러스님 UI디자이너의 시대는 끝났다 라는 영상의 댓글란에서 디자인베이스님 댓글을 봤습니다, 저도 디자이너가 디자인만 하기엔 길게봐선 어려울거라 생각합니다. 그래서 코딩을 배우고 싶은데 어떻게, 무엇부터 공부를 하면 좋을지 여쭙고 싶습니다. 조언 달아주시면 정말 감사하겠습니다!
개인적으로는 UI 디자인의 전망이 어둡다고 생각하진 않습니다. 5G, iOT 등 인터넷이 발전하고 다양한 디바이스에 맞는 서비스가 나오고 있고 인공지능 스피커도 발전하고 있어서 오히려 폭 넓어질 거라고 생각해요. 단지 우리나라의 상황이 수요에 비해 공급이 넓다는 것은 그만큼 밥그릇 싸움때문에 힘들어지는 건 맞다고 봅니다... 그래서 다른 디자이너와 다른 자신만의 차별화가 필요하고요.
코딩을 배우려는게 왜 배우려는 건지 부터 정하는게 좋습니다. 웹 코딩이면 생활코딩에서 배우시면 좋을것같습니다. Html,css 부터 시작해서 어느정도 흥미를 느꼈다면 jquery를 배워보는것도 좋을것같아요. 아예 개발쪽으로 배워보고싶다면 입문용으로 파이썬을 배우는것도 추천드립니다. 어디까지나 웹 퍼블리싱이 디자이너 입장에서 배우기 쉽고 알면 좋지만, 그쪽으로 진로를 갈아탈 생각이라면 또 다르게 접근하는게 맞아요ㅎㅎ 어찌됐든 디자이너로서 활동을 하실거라면 디자인에 대한 부분은 확실히 잘해야하죠..!
배경음악이 너무 으스스하네요.
무료 음악중에 괜찮은것들을 다시 찾아봐야겠네요ㅎㅎ😭😭