손쉽게 웹사이트 구조를 설계하는 ‘Octopus.do’
복잡한 웹사이트를 기획하거나 리뉴얼할 때, 정보 구조를 깔끔하게 정리하는 일은 생각보다 많은 시간이 필요합니다. 특히 하위 구조가 많은 경우, 어떤 페이지에서 어떻게 연결되는지 등 페이지 단위로 신경 써야 할 내용이 많아 관리가 점점 어려워집니다.
저도 처음 이런 작업을 할 때는 페이지 구성 요소를 하나하나 종이에 그려 같이 확인한 뒤, 스프레드시트로 관리했는데요. 이후 변경 사항을 반영하기가 어려워 다양한 도구를 활용하기 시작했습니다. 오늘 소개할 ‘Octopus.do’ 역시 그중 하나로, 이러한 상황이나 문제를 해결하기 위해 등장한 서비스입니다.
Octopus.do의 주요 기능과 특징
Octopus.do는 웹사이트 정보 구조를 시각적으로 설계하고 관리할 수 있는 전문적인 사이트 맵 빌더 서비스입니다. 스스로를 ‘번개처럼 빠른’이라고 표현한 점이 눈에 띄는데요. 사용자가 드래그 앤 드롭 방식으로 직관적인 사이트 맵을 만들 수 있도록 돕고, 프로젝트의 모든 단계를 체계적으로 정리할 수 있는 기능을 함께 제공하는 것이 가장 큰 특징입니다.
무엇보다 Octopus.do 역시 최근 흐름에 맞춰 AI 기반의 페이지 제안 기능을 제공, 사용자가 사이트 맵을 구성할 때 관련성 높은 페이지나, 구성 요소를 추천해 줍니다. 이는 아이디어는 있는데 아직 페이지와 같이 세부적인 내용이 결정되지 않은 상황에서 유용하게 활용할 수 있습니다. 특히 복잡한 프로젝트를 진행할 때 효율적으로 정보 구조를 설계하는 데 도움을 줍니다.
Octopus.do의 주요 기능을 살펴보면 아래와 같습니다.
- 사이트 탭 생성: 웹사이트 정보 구조를 쉽게 설계하고, 직관적으로 시각화할 수 있습니다.
- AI를 통한 사이트맵 제작: 페이지 제안 기능으로 빠른 스케치가 가능합니다.
- 템플릿 제공: 다양한 템플릿을 제공하여 작업 속도를 빠르게 높일 수 있습니다.
- 콘텐츠 정리: 페이지 단위로 필요한 기능, 포함될 내용 등을 관리할 수 있습니다.
- 협업: 실시간으로 팀과 협업, 피드백을 주고받을 수 있습니다.
- 공유: 구성된 사이트 맵을 PDF, 이미지로 내보내거나 URL로 공유할 수 있습니다.
한 문장으로 사이트맵 제작하기
저는 먼저 AI와 함께 사이트맵 하나를 만들었습니다. ‘IT, 스타트업 소식을 다루는 뉴스레터’라고 간단한 설명을 입력했고, 이를 바탕으로 메인 화면부터 뉴스레터 구독, 지난 뉴스레터, 서비스 소개, 도구(리소스) 소개 등 하위 페이지와 쿠키 설정 및 404 에러 페이지까지 순식간에 구조를 만들었습니다.
페이지 단위를 조금 더 자세히 보면, 이 서비스의 특징을 보다 잘 확인할 수 있습니다. 페이지 이름으로만 구성된 것이 아니라, 페이지에 필요한 구성까지 함께 포함되어 있기 때문입니다. 헤더, 푸터 등 섹션의 성격에 따라 컬러를 구분해서 생성된 모습이며, 원하는 페이지를 추가하거나 페이지 내에 구성을 변경하는 등의 작업을 본격적으로 진행할 수 있습니다.
가장 먼저 서비스에서 ‘콘텐츠’라고 불리는 기능입니다. 페이지에 포함된 구성(블록) 별 작성이 가능하며, 원하는 내용을 텍스트 에디터로 자유롭게 입력할 수 있습니다. 간략한 정책을 입력할 수도 있고, 어떤 방향에 따라 내용을 채워갈 것인지 등에 대한 초기 방향이나 기획 내용을 채우는 것도 가능합니다. 이미 작성된 파일이 있다면 별도 첨부를 할 수 있고, 인라인 코드 입력도 지원합니다. 무엇보다 이 공간에서도 AI를 활용할 수 있는데, 제가 위 이미지 속 선택한 블록에 대한 콘텐츠를 요청했더니 아래와 같은 내용을 빠르게 생성해 줬습니다.
“엄선된 최신 IT 및 스타트업 뉴스를 통해 최신 정보를 받아보세요. 뉴스레터의 각 에디션은 빠르게 변화하는 스타트업 생태계를 탐색하는 데 도움이 되는 새로운 트렌드, 혁신적인 기술, 전문가 조언에 대한 인사이트를 제공합니다. 독자 커뮤니티에 가입하여 창업 여정에 활력을 불어넣을 수 있는 귀중한 정보에 액세스하세요. 지금 바로 구독을 신청하고 받은 편지함으로 바로 업데이트를 받아보세요!”
내용을 보니, ‘octopus.do’는 이 기능을 각 영역에 실제 채워 넣을 구성 내용으로 고려한 게 아닐까 싶습니다. 아무튼 이 콘텐츠 기능을 잘 활용하면, 초기 웹사이트 구조는 물론 채워 넣을 내용 등도 빠르게 작업할 수 있어 가장 핵심이 되며, 중요한 기능이라고 생각합니다. (협업의 관점에서 페이지 단위의 콘텐츠 화면에서는 댓글 기능도 지원하여 피드백을 주고받는 것도 가능)
무료로는 사용할 수 있는 범위가 제한되어 있지만, 와이어 프레임 기능도 지원합니다. 앞서 콘텐츠를 블록 단위로 편집할 수 있다고 설명했는데, 와이어 프레임 역시 블록 단위로 11개 구성을 활용할 수 있습니다. 다양하고 넓은 범위는 아니더라도, 대략적으로 이렇게 구성하고 싶다는 표현은 충분히 가능한 수준입니다.
위 이미지는 같은 프로젝트인데, 앞서 확인한 이미지 대비 배경, 블록, 페이지 컬러가 변경되었는데요. 라이트, 다크, 블루프린트 등 세 가지 편집 환경을 제공하기 때문입니다. 블루프린트로 변경한 뒤 추가 기능을 활용했는데, 블록 단위로 화살표 연결 기능을 지원하는 모습입니다. 각 블록에는 CTA 등이 포함될 수 있기에 이 경우 경로가 어떻게 되는지 시각적으로 쉽게 표현할 수 있습니다.
사이트맵 제작을 돕는 편의 도구
‘octopus.do’는 사이트맵과 콘텐츠 등을 더욱 쉽게 제작하고 관리할 수 있는 다양한 편의 도구를 제공합니다. 대표적으로 AI를 활용한 번역 기능을 제공하는데, 제가 처음 생성한 사이트맵의 내용은 영어로 구성되어 있었지만, 한국어로 번역한 모습을 이미지로 확인할 수 있습니다.
이는 다국어를 고려하거나 다양한 언어를 사용해 업무를 진행하는 경우 특히 유용합니다. 또, 외부 링크를 임베드하거나 노트를 작성할 수 있는 기능도 무료로 제공됩니다. 참고 사례를 덧붙이거나, 페이지 단위로 작업 시 놓치지 않아야 할 중요 내용 등을 관리할 때 사용하기 좋습니다. 그 외에, 페이지가 많은 경우를 고려해 편집 섹션을 구분하는 기능도 제공합니다.
한 번은 꼭 써봐야 하는 이유
주요 기능을 소개하는 데 있어, 저는 AI를 활용한 사이트맵 제작 과정을 살펴봤는데요. 이곳에서는 크롤링 기능을 지원, URL을 입력하면 해상 웹사이트의 사이트맵을 생성할 수 있습니다. 물론 콘텐츠까지 자세히 긁어오는 건 아니지만, 대략적인 구조가 어떤지 파악하기 좋습니다.
위 이미지는 제가 요즘IT URL을 입력해 확인한 사이트맵의 모습입니다. 사이트맵 자체를 다양하게 활용할 수 있다는 점을 잘 보여주는 기능이라고 생각합니다. 물론 AI와 크롤링이 아니라, 직접 페이지를 하나씩 추가하는 것도 가능하고요.
또한 링크를 통한 공유는 기본이며, 피그마 플러그인을 제공하기에 피그마로 작업 내용을 불러오는 것도 가능합니다. 사이트맵과 페이지 단위의 콘텐츠가 잘 정리되어 있다면 실제 화면 작업 시 충분히 유용한 기준이 되지 않을까 싶네요.
구독 플랜의 경우, 1개의 프로젝트까지 무료로 사용할 수 있습니다. (협업도 가능) 기준은 제가 앞서 설명드린 기능들이며, 월 10달러의 계정으로 업그레이드할 경우, SEO 대응이나 버전 관리, 심볼 및 브랜드 기능 등 보다 다양한 장치들을 이용할 수 있습니다. 웹사이트 구조를 손쉽게 설계하고 싶을 때 활용해 봐도 좋겠습니다.
<참고>
©️요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.
