소개
기업 및 기관 대상 IT와 인문학강의를 해오면서 ‘강사도 함께 성장하는 커뮤니티가 필요하다’는 갈증을 느끼게 되어 다양한 콘텐츠 챌린지를 중심으로 서로 배우고, 함께 성장하는 강사 커뮤니티를 운영 중입니다. 현재는 단톡방과 SNS를 기반으로 커뮤니티를 운영하고 있는데요,
이제는 이러한 흐름을 하나의 플랫폼으로 연결하고, 웹사이트로 시각화하고자
이번 노코드 도구 실험을 시작하게 되었습니다.
진행 방법
1. same.dev
UI 만 복사하십시오
입력창 clone [웹사이트 주소]를 입력하면 너무도 쉽게 웹사이트를 복제해서 만들어주는 same.dev 입니다.
테스트삼아 지피터스(GPTers) 사이트를 클론 대상으로 선택했습니다.
입력창에 https://www.gpters.org/ URL을 넣자 아래 그처럼 복제본을 만들기 전 웹사이트를 방문하여 디자인과 내용 을 살펴봅니다.
한국어 텍스트가있는 웹 페이지의 스크린 샷
웹사이트 레이아웃과 기능을 더 잘 이해하려면 더 많은 페이지를 스크래핑 해야한다는 메시지와 함께 아래처럼 실제 구조와 디자인을 파악하네요.
사람들과 함께 소셜 미디어 페이지의 스크린 샷
이후 소스를 코딩하기 시작합니다.
시행착오도 있었는데요.
same.dev 실행 중 “인류학적 속도 제한”이라는 메시지가 발생했는데요,
여러 번 클론을 시도하다 보니 서버에서 리밋이 걸렸더라고요.
한국어 웹 사이트의 스크린 샷
한국 문자 메시지의 스크린 샷
또한 백신에서 악성 사이트 경고가 떴는데,
실제로는 문제가 없는 도구임에도? 시스템상 알림이 나온 것으로 유추됩니다.
코드 편집기의 스크린 샷
사이트 구조가 어떻게 구성되어 있는지를 분석하기 위해 same.dev에서 zip 파일 형태로 소스를 받아,
기획자 입장에서 그 안의 메뉴 구성과 콘텐츠 흐름을 들여다보았습니다.
다운로드된 zip 파일은 .tsx, .json, .config 중심의 개발자 코드이기 때문에 직접 수정은 어렵지만, 구조를 파악하는 데에는 도움이 되었습니다.
2. 퍼블 (PUBL)
테이블 주위에 앉아있는 사람들의 스크린 샷
퍼블(publ)은 대한민국의 SaaS 스타트업 키클롭스 (CYCLOPS Corp.)에서 제공하는 노코드(No-code) 방식으로 다양한 형태의 비즈니스 플랫폼을 제작할 수 있는 글로벌 올인원 콘텐츠 플랫폼 빌더로 IT 관련 지식이 부족하거나 외주 개발 문턱이 높았던 개인 및 중소 비즈니스 사업자, 비 IT 기업들이 막대한 초기 투자 비용 없이도 클릭 몇 번으로 웹 또는 앱 플랫폼을 구축할 수 있어 타 플랫폼의 이용자 중 한 명이 아닌, 나만의 콘텐츠 유니버스를 만들 수 있는 서비스를 제공하는 플랫폼입니다.
여행가 K스터디장 님께서 퍼블 20% 할인쿠폰도 이야기해주셔서 쉬는시간 짬내어 사이트 접속해 첫 페이지만 제작해보았습니다.
실행 과정 요약
same.dev에 접속해 GPTers 사이트 클론 실행
zip 파일로 다운로드된 웹사이트 구조 분석
퍼블에서 첫 화면 시안 제작 (슬로건, 메뉴 구성 포함)
실험을 통해 얻은 인사이트
1. 기획을 시각화하면 실행력이 급상승한다
단톡으로 운영하던 커뮤니티를 퍼블에서 실제 페이지로 그려보니 ‘시도해볼 수 있겠다’는 실행력이 생겼습니다.
2. 개발자가 아니어도 웹사이트 구조를 읽을 수 있다
same.dev로 받은 코드(zip 파일)를 열어보며 헤더, 섹션, 콘텐츠 배치 방식 등을 이해할 수 있어 저에게는 충분히 유의미한 경험이었어요.
3. 도구는 ‘목적에 따라’ 선별하는 감이 생긴다
same.dev은 구조 참고용으로, 퍼블은 브랜드 및 콘텐츠 시각화에 딱 적합하다는 것을 실험을 통해 체감했습니다.
실험하며 얻은 나만의 팁
퍼블은 웹사이트 콘텐츠를 기획하는 데 매우 유용한 도구예요.
특히 브랜드 언어, 콘텐츠 흐름, UX 설계를 직접 ‘눈으로’ 그려볼 수 있다는 점이 강점입니다.괜찮은 홈페이지 레퍼런스도 찾아봐야겠어요.
same.dev은 완벽한 클론보다는,
“이런 구조도 있구나” 하는 식의 웹사이트 정보 흐름 학습용으로 활용하는 것이 좋은것 같아요.
앞으로의 계획
퍼블에서 강신시, 강유시, 강책시 등 챌린지별 섹션을 시각화
‘가입 → 참여 인증 → 성과 공유’ 흐름을 한눈에 보여주는 구조 설계 이후에는 콘텐츠 자동화도 해보고 싶네요.
아직 시작만 했고 완성된 플랫폼이 아닌 실행하며 배우는 중이지만 이번 실험을 통해 확실히 느낀 점은 작은 시도라도 실제로 움직이면, 더 구체적으로 다가온다는 걸 공유드리고 싶어요.
저의 실험기가 조금이라도 인사이트를 얻게 되었기를 바랍니다.
