UX 디자이너 포트폴리오 뭘로 만들지? webflow 웹플로우 사용후기

UX 직무로 이직 및 취업을 준비하시는 분들은 포트폴리오 제작에 고민이 많으실 텐데요.

 

필자 역시 새 포트폴리오 만들면서 많이 고통받고 있습니다..!

 

그러던 중 포트폴리오 사이트를 빌드하는데 아주 유용한 툴을 알게 되어 사용해보았습니다.

 

 

 

 

webflow

 

 

 

 

웹플로우는 해외기업에서 만들어진 커스텀 웹사이트 빌드 도구입니다.

 

https://webflow.com/

Webflow: Create a custom website | No-code website builder

 

 

 

기존 우리에게 익숙한 웹사이트 빌드 도구로는 카페24, 윅스, 워드프레스 등이 있습니다.

이런 사이트들은 보통 컴포넌트를 끌어다 사용하는 웹사이트 빌딩 도구이며,

간편하게 마우스 드래그로 컴포넌트들을 배치하여 사이트 제작이 가능합니다.

특히 사용자가 많은 사이트일수록 사용자 요구사항에 맞게 진화되어 목적에 맞는 다양한 템플릿을 제공하기도 합니다.

 

 

그렇다면 여기서 질문이 생길 수 있을 텐데요.

 

 

 

 

웹플로우와 기존 웹사이트 빌드 도구,
차이가 있을까?

 

 

 

 

네, 아주 큰 특징이 있습니다.

 

 

웹플로우 구성 컴포넌트와 지정 속성 값이 웹사이트를 코딩하는 수준으로 구성되어 있습니다.

최신 HTML, CSS 구성으로 최적화된 웹사이트를 구성할 수 있습니다.

 

 

기본적으로 section 같은 시맨틱 태그 컴포넌트를 끌어다 화면 구성으로 배치합니다.

마진과 패딩 같은 spacing, flexbox와 같은 최신 레이아웃 구성 방식도 아주 쉽게 클릭으로 설정할 수 있습니다.

이렇게 쉽게 시맨틱 태그로 사이트를 구성하고 CSS 스타일을 선택하여 적용할 수 있습니다.

이때 클래스를 지정하여 여러 엘레먼트에 동시 적용할 수도 있습니다.

또, Add font와 같은 기능은 웹플로우에서 구글 폰트를 바로 다운로드하도록 간편하게 연결되어 있기도 합니다.

 

 

 

 

 

 

 

 

웹플로우는 실제 코딩을 알지 못해도 쉽게 만들 수 있습니다. 

 

 

 

 

다른 그래픽 디자인 툴처럼 쉽게 컴포넌트를 끌어다 속성 값을 지정해주기만 하면 됩니다.

그래픽 도구를 이용해 자연스레 웹 코딩 개념도 배울 수 있는 도구라는 생각이 들었습니다. 

사용하는 컴포넌트 구성과 속성이 웹 코딩에서 사용되는 기본 구조 그대로 만들어졌기 때문입니다.

 

 

 

 

 

 

 

 

 

필자가 생각한 웹플로우의 특징은 이렇습니다.

 

 

 

코딩은 컴퓨터가 이해할 수 있는 언어로 작성한 '글'입니다.

전 세계 공용어인 영어로 작성된 컴퓨터 작업 지침서로 이해할 수 있습니다.

여기에는 실제 많은 언어 규칙들이 정의되어 있습니다. 

 

웹플로우의 경우, 이런 글(코딩)을 도식화한 형태라고 생각합니다.

 

글보다 그림이 더 이해하기 쉬운 것처럼,

도식화된 컴포넌트 방식이 코딩 개념을 이해하기 더 쉽습니다. 또, 웹사이트를 만들기도 수월해집니다.

직접 코딩을 할 수도 있으니 필요한 기능을 웹사이트를 커스터마이징 할 수도 있습니다. 

 

 

웹플로우는 코딩 지식이 있든 없든 모두에게 장점이 있는 툴이라고 생각합니다.

필자가 생각하는 각각의 장점은 이렇습니다.

 

 

 

 

코딩 지식 없는 사람 (ex. 디자이너, 기획자)

 

• 비주얼 컴포넌트를 사용해 쉽게 코딩 개념을 익힐 수 있다는 장점
• 코딩 개념과 용어를 자연스레 익힐 수 있어 개발자와 협업 시, 웹 기본구조를 이해하고 소통하는데 도움 될 수 있음
• 디자인 툴(Figma) 연동 가능
• 퀄리티 있는 포트폴리오 사이트 제작 가능

 

 

 

 

2. 코딩 지식 있는 사람 (ex. 개발자, 웹퍼블리셔)

• 굳이 코딩을 하지 않고도 코딩 지식을 활용해 쉽게 웹사이트 빌드 가능한 장점
• CSS 스타일링에 힘들이지 않고 간단하게 웹사이트 UI 배치 가능
• 퀄리티 있는 포트폴리오 사이트 제작 가능

 

 

 

 

코알못이든 코잘알이든 둘 다에게 매력적인 장점이 있습니다.

컴퓨터공학을 전공해 UX를 공부하는 필자는 웹플로우가 확실히 장점이 많은 툴이라고 생각합니다.

 

 

무엇보다 웹플로우의 가장 큰 장점은..

 

 

 

아주 짱짱한 자체 무료 교육과 트레이닝 코스

 

 

 

교육과 트레이닝 퀄리티가 어마어마합니다. 부트캠프 느낌으로요!!

근데 심지어 공짜입니다.. 이거 안 들으면 손해 아닌가요?

 

웹플로우가 궁금하다면 유튜브 공식 채널의 교육 영상 한번 찾아보세요.

진짜 재밌습니다ㅋㅋㅋㅋ 코디미 미드 같은 느낌이라 배우인 줄 알았는데 전부 직원이었다는...

교육이 지루하지 않고, 보는 재미가 있어 집중이 더 잘 되는 것 같습니다.

재밌어서 교육 퀄리티가 떨어지지 않냐고요? 전혀요!

재미를 챙기면서 중요한 개념을 명확하게 알려주더군요.

 

필자 역시 현재 UX 포트폴리오를 제작 중인데요, 웹플로우를 이용하여 만드는 중입니다.

코딩을 알아도 툴에 적응하는 건 또 다른 문제..  처음 시작하는 모두가 동등한 입장으로 배울 수 있습니다.

그것도 아주 쉽고 재밌는 무료 교육을 통해서요!

 

지금 듣고 있는 코스 정보는 아래 링크 첨부합니다.

21일 디자인 포트폴리오 코스로 기본적인 포트폴리오 구성으로 제작하는 코스입니다.

UXUI 포트폴리오 만들기로 고민하고 계시는 분들의 심정을 너무 잘 알기에.. 

웹플로우와 21일 디자인 포트폴리오 코스 추천드립니다!

 

이 코스 들으며 만든 포트폴리오 제작 시리즈도 블로그에 올려볼까 합니다.

혹시 이 글을 보시는 분들 중.. 포트폴리오 제작 시리즈가 궁금하다면 좋아요 눌러주시면 정말 큰 힘이 될 것 같습니다:)

 

좋은 정보는 나누면 배가 된다고 하네요.

UX 취업을 위해 열심히 공부하시는 모든 분들과 개발자분들, 기획자, 디자이너 등

포트폴리오를 준비하시는 분들에게 도움이 되길 바라며 여기서 마무리하겠습니다.

 

 

 

https://university.webflow.com/courses/21-day-portfolio-course?video=S8CMTdl8oV4 

21 day design portfolio course | Webflow University