노코드로 완성도 있는 웹페이지 만들기-1주차
노코드 방법론이란?
노코드(Nocode)는 개발 언어를 이용하지 않고 웹, 어플리케이션, 응용 프로그램 등을 설계, 제작하는 접근 방법
(개발 언어를 사용하지 않는다면 무엇을 이용? > "노코드툴"을 이용! 각각의 툴마다 간단한 사용자 인터페이스(UI) 방식의 틀을 제공함. 그 사용자 인터페이스에서 제공되는 기능을 이용해 개발을 하는 것!
노코드 방법론의 장단점
장점: 배우는데 드는 시간과 비용이 적게 듦 / 구현이 쉽고 빠름
단점: 툴을 사용하는데 돈이 듦 / 구현의 한게가 사용하는 툴에 의해서 정해짐
이번 수업에 배울 노코드툴
웹플로우: 웹사이트를 만드는데 쓰는 툴 (실제로 사용자가 보는 화면)
에어테이블: 데이터 베이스를 담당하는 툴 (백엔드)
재피어: 자동화랑 연동하는데 쓰이는 툴 (API)
웹페이지 기본 구조 이해하기
뼈대를 담당하는 HTML
디자인을 담당하는 CSS
동작을 담당하는 JavaScript
HTML 구성요소
HTML은 head와 body로 이루어져 있음
head는 눈에 보이지 않는 요소, 페이지에 대한 속성이 들어감: 안에 들어가는 대표적인 요소는 meta, script, link, title 등이 있음
body 안에는 우리 눈에 보이는 요소들이 들어감: 열려있는 네이버 창에 보이는 모든 것은 body 태그 안에 들어가 있음
디자인을 담당하는 CSS
CSS는 디자인, 뼈대에 옷입히기! 네이버에서 개발자 도구로 <head> 태그를 날려버리면 CSS로 입힌 디자인이 모두 사라지면서 페이지의 구조인 뼈대만 남게 됨
동작을 담당하는 JavvaScript
유저가 어떻게 행동하는지에 따라 동적인 변화를 담당하는 부분
(ex. 네이버 메인에서 '언론사'에 마우스를 대면 로고가 있던 모습에서 [구독] [기사 보기] 버튼이 있는 모습으로 바뀌는 것, 이 때 개발자 창에서도 class에 thumb_hover라는 부분이 새롭게 추가되는 것을 확인할 수 있음)
웹플로우의 기본적인 구성요소
Webflow: Create a custom website | Visual website builder
Create custom, responsive websites with the power of code — visually. Design and build your site with a flexible CMS and top-tier hosting. Try Webflow for free.
webflow.com
웹플로우의 유저 인터페이스
프로젝트(Project)
웹플로우 왼쪽 상단의 웹플로우의 로고인 "W" 표시가 있는 버튼을 클릭하면 [Site settings]이 나옴
[Site setting] 페이지에서는 가장 상위에 속하는 정보를 설정할 수 있음
도메인, 라이브러리, 폰트, 그리고 모든 페이지에 설정될 수 있는 커스텀 코드를 설정할 수 있는 페이지
(모든 페이지에서 설정하고 싶은 속성을 다루는 페이지)
페이지(Page)
좌측의 문서 아이콘을 누르면 웹 사이트의 페이지를 만들거나 수정, 설정할 수 있음
페이지 섹션에서 페이지 우측의 설정 버튼을 누르면 "해당 페이지에서의 속성" 설정 가능
모든 페이지는 각각의 header와 body를 가지는데, 설정이 페이지의 header 정보를 입력하는 곳!
엘리먼트 (Element)
엘리먼트는 각각의 페이지에서 실제로 페이지를 구성하는 요소들
좌측 패널의 [+] 버튼을 누르면 웹플로우의 엘리먼트들을 모두 볼 수 있음
페이지 영역(div), 문자, 이미지, 동영상 등 실제로 페이지를 구성하는 모든 실제로 눈에 보이는
요소들은 모두 엘리먼트에 있음
CSS = Style
CSS에 대응하는 Style은 디자이너 페이지의 "오른쪽" 붓 모양을 클릭하면 볼 수 있음
'Style 패널'이라고 부르며 레이아웃, 사잊, 포지션, 타이포그래피 등 요소를 꾸미는 모든 것들은 여기에서 설정함
JavaScript = Interaction
오른쪽에 있는 번개 모양을 클릭하면 JaveScript에 해당하는 '인터랙션 패널'을 볼 수 있음
인터랙션은 트리거(특정 조건을 만족하면)와 액션(동작 발동)으로 이루어짐
웹플로우의 장점과 단점
웹플로우의 장점
- 디자인적 구현의 폭이 가장 넓은 웹 빌더로 자유도가 높음. 사실상 코드만 안짤 뿐이지 CSS에서 대응하는 모든 개념이 다 들어가 있음.
(3D 모델링까지 가능!)
- 컨텐츠 관리와 관련된 기능인 CMS가 아주 잘되어 있고, SEO(검색 엔진 최적화)도 잘 되는것으로 유명함
* 검색 엔진 최적화: 쉽게 말해 구글 등의 검색엔진에서 상위 노출될 수 있는 가능성이 높다는 의미
- 생태계가 잘 마련되어 있음: "더 적은 시간을 들여 빠르게 구현"하는 것이 목표일 때 교육, 컨설팅, 그리고 미리 만들어둔 템플릿, 컴포넌트 등을 사용할 수 있는 기반이 잘 마련되어 있다는 것을 의미함 > 이런 기반을 잘만 활용하면 디자인도 필요없이 더욱 빠르게 구축할 수 있음
웹플로우의 단점
자유도가 높은 만큼 다른 툴에 비해 어렵고 복잡하게 느끼기 쉬움
박스 모델(Box Model)과 기본적인 CSS의 개발 원칙을 따르기 때문에 코딩하는 법은 배우지 않더라도 기본적인 개념에 대한 이해는 필요
웹플로우 구현에 도움되는 CSS 기본기
웹플로우는 기본적으로 HTML, CSS 로직을 따름
박스 모델(Box Model) 이해하기
모든 HTML 요소는 “박스 모델(box model)”로 이루어져있음
즉, 웹플로우의 모든 요소는 기본적으로 박스 모델의 형태를 띄고 있음
박스 모델: HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분하는 것을 의미함
- 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분
- 패딩(padding) : 내용과 테두리 사이의 안쪽 여백. 패딩은 눈에 보이지 않음
- 테두리(border) : 내용와 패딩 주변을 감싸는 테두리
- 마진(margin) : 테투리와 이웃 요소 사이의 바깥 여백. 마진은 눈에 보이지 않음
부모 - 자식 요소 이해하기
모든 HTML 요소는 부모 자식관계 혹은 형제 관계로 이루어져 있음
[중요] 부모 요소의 디자인을 수정할 경우 자식 요소에도 영향을 미칠 수 있음
ex) 바깥에 있는 부모 요소의 글씨(타이포그래피) 색상이나 글자 크기를 수정하면 안에 있는 자식 요소들 모두에게 영향을 미침
클래스(Class) 이해하기
동일한 클래스를 공유하는 요소는 동일한 디자인이 적용됨
두 개의 클래스를 가지고 있는 요소를 웹플로우에서는 "콤보 클래스"라고 부름
ex) 아래 예시에서 둘은 "Box Example" 이라는 클래스를 공유함. 하지만 Box B의 경우는 "Box Example"과 더불어 "Red"라는 클래스를 추가로 가지고 있음
Box A의 디자인 수정은 Box B에도 영향을 미치지만, Box B의 디자인 수정은 Box A에 영향을 미치지 않음. → 콤보 클래스로 지정된 "Red"에 디자인이 기록되기 때문
Made in Webflow란?
Made in Webflow 페이지는 웹플로우 유저들이 미리 만들어둔 요소들을 공유해둔 곳
여기를 활용하면 원하는 요소를 직접 구현할 필요 없이 재료들을 잘 찾아서 사용할 수 있음
내 홈페이지를 위한 스타일 가이드 잡기
스타일 가이드란?
스타일 가이드는 다른 말로는 디자인 시스템이라고 함
홈페이지에서 사용될 디자인의 약속들을 미리 설정하고, 설명해주는 것이라고 볼 수 있음
색상, 타이포그래피, 이미지 설정, 버튼 디자인 등등 디자인과 관련된 많은 부분을 정의함
스타일 가이드가 필요한 이유
스타일 가이드는 효율적인이고 구현과 유지 보수를 위해 필요함
- 페이지 제작의 효율성
홈페이지를 한 번만 만들더라도, 자주 사용할 스타일들을 미리 정의해두면
그때그때 어떻게 폰트, 텍스트 사이즈, 디자인, 색상들을 사용할지 고민하지 않아도 됨
일관된 디자인을 유지할 수 있어 깔끔하게 만들 수 있음
- 수정작업의 효율성
ex. 20장의 페이지에 똑같은 제목글(Header)를 사용했다고 했을 때
미리 정의해둔 스타일 가이드가 없다면? → 20페이지를 일일이 들어가서 모든 헤더를 수정해야 함
스타일 가이드에 따라Header Main 이라는 클래스를 만들고 적용해두었다면? → 하나의 요소만 변경하면 20개의 요소를 한번에 변경 가능
Flex와 Grid의 차이점 바로알기 (둘 다 하는 일은 비슷! 상황에 따라 더 간편한 방식을 골라서 사용하기만 하면 됨)
하는 일 :
[point] 가장 큰 차이점
가로만 있거나, 세로만 있는 1차원 레이아웃을 만들거야 → Flex
가로 X 세로로 2차원 레이아웃을 만들거야 → Grid
[참고] 브레이크 포인트
렙탑 : 992px 이상 (별도로 랩탑 보다 더 큰 넓이의 브레이크 포인트를 추가할수도 있음)
테블릿 : 768px~991px
가로 모바일 : 480px ~ 767px
세로 모바일 : 480 미만
웹플로우 브레이크포인트 관련 알아두면 좋은 3가지!
별표가 되었는 브레이크 포인트가 베이스가 되는 브레이크 포인트이며, 해당 페이지를 수정할 경우 전체 브레이크 포인트에 영향을 미침
브레이크 포인트로 부터 위에서 아래로 순방향으로만 영향을 미치고, 역방향으로는 디자인 수정이 여향을 미치지 않음
단 한 번 하위 브레이크 포인트의 디자인을 수정할 경우, 상위 브레이크 포인트의 디자인을 수정하더라도 하위 브레이크 포인트는 수정 X
예) 모바일 디바이스에서 타이틀을 32px로 수정하고 난 뒤 랩탑 디바이스에서 타이틀 사이즈를 24px로 수정하더라도 모바일 디바이스에서 수정한 디자인은 유지된다.
CMS란?
CMS란 보통 회사의 디지털 콘텐츠 관리를 지원하는 소프트웨어
보통 컨텐츠라고 하면 블로그, 동영상 등을 생각할 수 있는데, 넓은 의미에서 내가 판매하는 상품, 강의 등등도 모두 컨텐츠가 될 수 있음
보통 CMS는 아래와 같은 기능들을 이용할 수 있음
데이터베이스의 전체적인 구성과 관리
콘텐츠의 제작, 수정, 삭제, 배포
콘텐츠의 시각적 노출 등의 기능
CMS는 보통 프론트엔드와 백엔드로 구성됨
프론트엔드는 콘텐츠가 웹 사이트의 시각적 구조화 및 스타일 지정이 이루어지는 것을 담당하고,
백엔드는 웹 사이트에 보여질 콘텐츠를 추가, 수정, 삭제, 배포가 이루지는 부분을 담당함
웹플로우 CMS 구성요소
콜렉션 (Collection) - 백엔드
콘텐츠를 담는 하나의 DB (ex. 블로그 DB)
콜렉션 리스트 (Collection List)
콘텐츠를 리스트 형태로 보여주는 요소 (ex. 블로그 포스트 리스트)
콜렉션 페이지 (Collection Page)
각 콘텐츠의 내용을 보여주는 요소 (ex. 블로그 포스트)
'[내일배움캠프] 프로덕트 디자인 8기 > TIL(Today I Learned)' 카테고리의 다른 글
| [TIL] 24.12.17(화) (1) | 2024.12.17 |
|---|---|
| [TIL] 24.12.16(월) (0) | 2024.12.16 |
| [TIL] 24.12.11(수) (0) | 2024.12.11 |
| [TIL] 24.12.10(화) (0) | 2024.12.10 |
| [TIL] 24.12.09(월) (2) | 2024.12.09 |
