ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko nb ko ko ko en en ko ko ko ko ko ko ko ko ko ko ko ko ko ko en ko ko ko ko ko ko ko ko ko ko ko ko en fr ko ko ko ko ko ko ko ko ko ko ko ko ko ko en ko ko ko en ko ko ko en ko ko ko ko en es ko ko ko ko ko ko en
웹플로우, 코딩 공부 전에 배워야 할 웹 제작 툴 - 방구석 클래스 | 디자인베이스
홈 방구석클래스 웹플로우, 코딩 공부 전에 배워야 할 웹 제작 툴 – 방구석 클래스
이번 방구석 클래스에서는 코딩을 공부하기 전에 알아두면 좋은 웹 제작 툴인 웹 플로우를 알아볼게요. 웹 플로우(webflow)는 코딩 없이 사이트를 쉽게 제작이 가능합니다. 윅스와는 또 다른 느낌의 툴입니다. 디자인 툴과는 다르게 코딩이 어떻게 되는지 알아볼 수 있는 시간을 가져봐요. HTML과 CSS를 웹플로우 서비스에서 빌더 UI로 조작 가능하게 되어 있습니다.
제가 만든 사이트 샘플 주소입니다.
*방구석클래스는 다양한 주제로 폭넓게 배워갈 수 있도록 만든 강좌입니다. 매주 다양한 주제로 만나보세요 🙂
웹플로우는 코드 개념 없이 누구나 반응형 웹사이트를 만들 수 있도록 도와주는 웹 기반 툴 서비스입니다.
직접 사용해보면서 느낀 것과 웹 플로우가 인기 있는 이유를 찾아보며 정리를 해보면 이렇습니다.
디자이너가 쉽고 빠르게 제작이 가능.
디자인과 개발이 시각적으로 동시에 제작.
에디터 기능을 제공해서 클라이언트가 콘텐츠를 직접 작업이 가능. CMS 기능 제공
쇼케이스와 디자이너 탭을 들어가 보면 상당히 많은 디자이너들이 사용하고 있는 것을 알 수 있습니다.
여기서 핵심은 두 가지입니다.
첫 번째는 박스로 바라보는 눈을 기르는 것입니다. 사이트는 디자인 툴과는 다르게 블록으로 쌓이는 개념이라서 가상의 네모 테두리를 보는 연습을 하셔야 합니다. 웹플로우에서는 X-Ray Mode라는 기능을 제공하고 있어서 쉽게 마진과 패딩 값을 조절해서 레이아웃을 작업할 수 있습니다.
두 번째는, Class라는 개념인데 같은 Class 값으로 묶인 요소들은 스타일을 동시에 바꿀 수 있습니다. 만약 다른 스타일을 주고 싶다면 새로운 Class를 주거나 기존의 Class를 제거하는 방법이 있습니다. 스케치로 따지면 Layer Style, Text Style과 비슷한 개념이죠. 그 외에 웹플로우에서도 ‘심볼’이라는 기능이 있습니다. 이 심볼은 헤더, 푸터와 같은 반복적으로 사용될 컴포넌트를 만들 때 사용하는데 스케치에서 심볼과 같은 개념입니다.
짧은 시간 안에 웹플로우를 살펴봤는데요. 좀 더 자세한 기능을 알고 싶다면 웹플로우에서 제공하는 강좌를 통해 배우실 수 있습니다.
#10 스케치 플러그인 추천 – 스케치 강좌(멤버십 전용)
#21 카드 UI 예제 코드로 만들기 – 웹 코딩 강좌
#11 XD 프로토타입 & 디바이스 미리보기 – 어도비 XD 강좌 (멤버십 전용)
그라데이션 컬러 추천해주는 사이트
디자이너에게 가장 힘든 클라이언트 유형은?
웹 주소 URL 짧게 만들어 주는 웹사이트
날씨 아이콘셋 Frosted Glass
Mac Studio & Studio Display 목업
풍부한 색감의 친근한 일러스트
10. 자유롭게 화면 조절하는 방법 OrbitControls – Three.js 강좌
27. 귀여운 꿀벌 일러스트 쉽게 만드는 방법 – 일러스트레이터 기초 강좌
09. 3d 물체에 그림자 적용하는 방법 – Three.js 강좌
26. 프리폼 그라디언트로 5초 만에 부드러운 그라데이션 배경 만드는 방법 – 일러스트레이터 기초 강좌
Youtube Instagram Pinterest Naver Blog
포토샵 일러스트레이터 피그마 스케치 XD 프로토파이
웹디자인 웹코딩 인비전 프린서플 Lottie Three.js
소개 매거진 디자인 사전 북마크 무료 소스 문의하기 멤버십
© 2022 Designbase. All rights reserved.