[내배캠] 프로덕트 디자인 / 38일차 / 2024_12_12

2024_12_12 목요일

 

 

 

코딩 4일차

 

어제까지는 실시간으로 웹퍼블리싱 강의가 진행됬었고,

오늘부터는 VOD강의로 노코드툴인 Webflow를 사용하여 강의가 진행되었다!

1주차 강의를 모두 수강했고 1주차 강의 과제도 무사히 제출완료했다🙆‍♂️

 

 

 

 

 

                                                       ✅  배운점                                                          

 

 

어제까지는 웹퍼블리싱 HTML, CSS를 개발 언어를 구성해서 웹페이지를 구현해보는 걸 배웠다면,

 

오늘은  노코드툴인 웹플로우(Webflow)를 사용하여 웹파이지를 구현하는 법을 배웠다.

 

 

 

 

노코드(Nocode)는

개발 언어를 이용하지 않고 웹, 앱, 응용프로그램 등을 설계 및 제작하는 접근방법이다.

 

 

오늘 하루 체험해본 결과 노코드 툴에 대해 내가 이해한 바는,

이전 개발 언어를 툴과 같은 형태로 만들어서 우리가 이전에 사용하던 '피그마'나 여러 어도비 제품과 같이

이전에는 입력해야하는 개발언어를 UI인터페이스 방식으로 클릭이나 수치를 변경하여 적용할 수 있는 툴로 만든 것이다.

(라고 느꼈지만 검증이 되지 않은 뇌피셜임미다...)

 

 

 

이런식으로 '피그마'를 예로 들면 좌측에 있는 것들이 레이어 패널 우측에 있는 것들이 툴 패널(?)이라고 볼수 있는 것 같다! 

웹플로우

 

 

 

 

 

내가 느낀 장점은 확실 쉽고 편하다,,,,

아무래도 코드로 구현해내려다보면 요소를 찾는 것 부터가 너무 일이였고,,,

뭔가를 하고자한다면 해당 코드를 검색해서 찾아봤어야 했지만,

노코드 툴에서는 툴 패널쪽만 유심히 찾아보면 다 찾아서 사용할 수 있다!

그리고 코드를 사용할때의 클래스나 상태값을 알아보기도 너무 편하게 되어있어서

어제까지에 비하면 약간 아주 조금 천국,,

 

 

 

그리고 예를 들어 flex나 grid같은 경우도 row, column과 같은 용어가 아닌 아이콘화 되어있어서 알아보기도 너무 편하다.

 

 

 

 

 

 

오늘 1일차인 내가느낀 단점은,

일단 메모리 사용량이 엄청나다.

처음에는 몰랐지만 강의를 진행하면서 구성요소들이 점차 늘어나기 시작하더니 언듯 메모리 사용량 1.6GB를 봐버렸다,,,

그외에도 배우는데 시간과 비용이 적게 들지만 툴을 사용하는데 돈이 들고 구현의 한계가 사용하는 툴에 의해 정해진다.

 

 

 

 

 

 

 

 

오늘 사용한 웹플로우(Webflow)는

웹 사이트를 만들어주는 툴이다. 프론트엔드 영역에 속한다고 볼 수 있다.

 

디자인적 구현의 폭이 가장 넓은 웹 빌더이고 자유도가 높다고 말할 수 있다.

코드만 작성하지 않을뿐 CSS에서 대응하는 모든 개념이 다 들어가 있다!

그리고 미리 만들어둔 탬플릿, 컴포넌트 들을 사용할 수 있는 기반이 아주 잘 마련되어있다는 장점을 가지고 있다.

 

일전 배웠던 박스 모델(Box Model)과 기본적인 CSS의 개발 원칙을 따르기 때문에 코딩을 배우지 않아도

기본적인 개념에 대한 이해가 필요하다. (그래서 3일동안 코딩을 배운건가라는 생각이 들었다....)

 

 

 

Style이 CSS의 역할 이라고 볼수 있고,

꾸미는 요소들을 설정할 수 있다.

Interaction은 JavaScript의 역할이다!

 

 

 

 

 

 

 

그리고 오늘 강의 실습을 따라서 만든 나의 피땀 눈물의 결과물,,,,

https://reutaniyi-nokoding-gyosil-a7925c.webflow.io/

1주차 과제

 

 

 

 

 

이상 1주차 학습에 대한 내용이였다!

 

 

 

 

 

 

                                                        🤔  느낀점                                                          

어제 튜터님과의 면담아닌 면담 이후로 부담감이 확실히 덜어졌고, 부담감이 덜어지니 뭔가 좀 잘 되는 느낌이였다.

물론 오늘 배운내용들이 코딩에서 벗어나 아주 조금은 툴형식의 UI인터페이스여서 그런것 일 수도 있지만은,,,?

그래도 앞전 3일 지옥훈련과 비교하면 여기는 비교적 천국이다🥹

 

그래서 오늘 실습을 진행하면서도 힘들고 이해가 어려운 부분도 있었지만,

피그마를 배울 때 처럼 조금은 재미있었던 것 같다.

 

물론 진행하면서 강의의 웹플로우 버전과 내가 실습을 하는 버전이 차이가 좀 많이나서,

컬러설정하는 부분이나 이것저것 난관이 많았지만 코딩에 비하면 이쯤이야~~~~~~

(라고 다 지나서 얘기할수 있는것,, 난관 당시 상황은 심각했다)

 

여튼 노코드 툴을 활용해서 웹페이지를 만들다보니,

이전 코딩에서의 클래스 개념이나 <div>같은 개념이 훨씬 더 잘 이해되는 느낌이여서 묶였던 실이 풀리는 느낌도 들었다.

그래서 앞으로의 노코드 툴도 조금은 재미를 붙여서 진행해 볼수 있을 것같다!