BD 31일차
노코드 웹 서비스 배포 방법
안녕하세요! 오늘은 노션으로 작성한 회사 소개 페이지를 웹플로우를 통해 어떻게 배포할 수 있는지 알아볼게요. 웹플로우는 모바일 반응형 웹 디자인을 쉽게 제공해서 개발자의 작업 효율성을 크게 높입니다.
웹사이트의 식별성과 브랜드 인식을 높이기 위해 파비콘과 공유 이미지를 설정할 수 있어요. 또한, 색상 테마, 페이지 상단 기능, 모서리 둥글기 효과 등 다양한 스타일 옵션을 통해 웹사이트를 커스터마이징할 수 있습니다. 이미지 슬라이드 효과와 CTA 버튼 추가를 통해 사용자 경험을 향상시키고 특정 행동을 유도할 수 있답니다.
웹사이트 기능 개선 방법
우피의 페이지 뷰 기능을 통해 방문자 수와 페이지별 접속 통계를 무료로 확인할 수 있어요. 페이지 유입 경로 분석은 프로플랜에서만 가능하며, IP 제외 기능을 활용하면 더 정확한 방문자 통계를 얻을 수 있습니다.
이미지 슬라이드 기능을 추가하려면 노션 페이지의 콜아웃 블록 내에 YAML 코드를 삽입하면 돼요. 코드 블록 언어를 YAML로 설정하고 제공된 코드를 붙여넣으면 크로스페이드 등의 애니메이션 효과를 적용할 수 있죠. 이러한 기능들을 활용하여 노코드로 만든 웹사이트의 퀄리티를 높일 수 있습니다.
노코드 웹 서비스의 고급 기능
노션에서 슬라이드 기능은 베이직 플랜에서 2개까지만 지원되지만, 프로플랜에서는 더 많은 이미지와 설정 옵션을 제공해요. 페이지 배경 이미지를 삽입하려면 원본 이미지 링크를 사용하거나 이미지 호스팅 서비스를 통해 가능하며, HTML 코드 블록을 페이지 최상단에 배치해야 합니다.
전체 페이지에 배경 이미지를 적용하려면 우피 콘솔의 HTML 편집 기능을 사용해야 해요. 페이지 애니메이션 효과는 HTML 코드 블록을 통해 구현할 수 있으며, 페이드 인 효과 등을 적용할 수 있죠. 디스커스 플러그인을 활용하여 댓글 기능을 추가하면, 사용자와의 소통이 가능해집니다.
웹사이트 상호작용 강화 방법
Disqus를 활용해 웹사이트에 댓글 기능을 추가하고, 'Balanced' 설정으로 사용자 친화적인 환경을 구성했어요. 채널톡을 통해 실시간 채팅 기능을 구현하여 사용자와의 즉각적인 소통이 가능해졌습니다.
웹플로우에서 제공하는 다양한 템플릿을 활용해 '윈이브 사내 카페' 페이지를 생성하고, 페이지별로 다른 폰트와 스타일을 적용할 수 있어요. 템플릿 커스터마이징을 통해 회사 소개 페이지에 새로운 페이지를 추가하는 과제를 수행할 수 있죠. 다음 강의에서는 프로플랜의 기능을 살펴볼 예정입니다.
프로플랜의 주요 기능
프로플랜의 핵심 기능은 상단 메뉴바, 하단 내비게이터, 무제한 이미지 슬라이드, 페이지 유입 경로 통계 등이에요. 상단 메뉴바를 통해 정보를 쉽게 분류하고, 사용자가 편리하게 사이트를 이용할 수 있게 합니다.
하단 내비게이터는 모바일 앱과 유사한 경험을 제공하여 사용자 편의성을 높여요. 이미지 콜아웃에 무제한으로 이미지를 추가할 수 있고, 크로스페이드 효과를 적용할 수 있어요. 페이지 유입 경로 통계 기능을 통해 광고 효율성을 확인하고 마케팅 전략을 수립할 수 있습니다.
강의 마무리 후 알아야 할 정보
우피 웹사이트는 도메인 연결 방법과 유용한 팁을 제공하여 사용자에게 큰 도움이 됩니다. 우피의 챗봇 기능이 잘 구현되어 있어 사용 중 어려움이나 의문점 해결에 유용하죠. 강의를 통해 노코드 웹 서비스 제작에 대한 전반적인 내용을 다루었으니, 추가 정보나 도움이 필요할 경우 우피 웹사이트를 활용하는 것이 좋답니다.
