'2018 스타트업 생태계 컨퍼런스' 사이트 제작기
개발은 1도 모르는 스얼 매니저의 스타트업생컨 사이트 만들기
지난 6월 21-22일 이틀 동안 열린 '2018 스타트업 생태계 컨퍼런스'의 홈페이지 제작기입니다.
Invitation-only인 행사 특성상 행사 전에는 퍼블릭하게 홈페이지 노출을 하는 것이 좋지않아 이제야 사이트 제작기를 올리게 되었습니다.
PM의 전체 행사 후기가 아닌 웬 사이트 제작 후기?라고 생각하실 수도 있으실 텐데요.
개발자가 없는 척박한(?) 지원기관 및 스타트업 환경에서 이벤트 사이트를 만들면 좋겠지만 선뜻 내키지 않는 담당자들에게 '우리도 할 수 있다고요!'식 용기를 북돋아 주기 위한 목적에서 써보았습니다.
스얼 매니저 데이나가 먼저 좌충우돌로 만들어보고 쓴 사이트 제작기. 바로 시작하겠습니다.
들어가기 전에 상황 요약
아래 네 가지 해시태그 상황이라면 도움이 될만한 사이트 제작기입니다.
#연례이벤트용사이트
#개발자없음
#빨리만들어야함
#그런데디자인이구리지는않아야함
무서울 정도로 바보였던 제작의 서막,
'아차 개발자가 없지?'
저는 스타트업얼라이언스의 커뮤니티 매니저로 4개월째 일하고 있습니다. 첫 스타트업이었던 IGAWorks에서 애드 네트워크 PM 및 CPR 담당으로, 데일리 금융그룹에서까지 핀테크 서비스 기획 및 마케팅을 담당해오며 모든 스타트업이 그렇듯 일인다역에 익숙한 직원이기도 합니다.
데일리금융그룹에서 맡았던 마지막 프로젝트 '옐로마케톤'의 보람된(?) 추억을 통해 이벤트 기획 및 운영 업무에 대한 좋은 인상을 받았고 여차 저차 하여 운이 좋게도 스타트업 얼라이언스 매니저에 입문하게 되었습니다.
저에게는 이전 커리어를 통해 스얼에 어떤 기여를 할 수 있을까가 가장 큰 미션이었는데요. 입사한 지 며칠되지 않은 3월 9일, 생컨 킥오프 미팅에서 그 작은 구석을 찾아냈습니다.
이번에는 홈페이지가 하나 있었으면 싶은데
안내 페이지가 없으니 예비 연사들에게 홍보하기가 쉽지 않더라고요.
누가 할 수 있을까요?
애드 네트워크 솔루션 페이지 기획, 핀테크 앱 기획 등이 제 업무였으니 원 페이저(one-pager) 사이트 정도야 쉽게 할 수 있겠다 라는 가벼운 생각에 손을 들었습니다.
하이~제가 해볼게요오오
라고 뱉자마자 번개처럼 드는 제정신
'아 맞다. 여기는 개발자가 없는데?'
내 관을 내가 짰구낭 해햇근데 말은 뱉었고, 뭐 방법이 없지는 않겠지 하고 시작하게 된 이벤트 페이지 제작.
어쩌겠습니까. 차근차근해보는 수밖에.
#1. 어떤 플랫폼을 쓸까?
비개발자용 사이트 제작 플랫폼이 그렇게 많지는 않습니다. 그래도 여러 장단점을 비교하기 위해 많은 구글링을 했는데요. 그 결과는 역시 역사가 깊은 두 플랫폼, 워드프레스와 WIX였습니다.
새롭게 나온 플랫폼들 중에 더 화려하고 비주얼적으로 멋진 서비스들이 많았지만 안정적이고, 한글 폰트가 구리게 출력되지 않으며 제공하는 기능의 영역이 넓은 플랫폼을 찾고자 한 결과였죠.
그중에 저는 윅스를 선택했는데요.
가장 큰 이유는 Drag & Drop 에디터 기반으로 제작할 수 있다는 점이었습니다. 이것은 생각보다 큰 차이를 가져오는데요.
제작을 시작할 때
1. 내가 만드는 편집 화면과 이용자가 보는 출력 화면이 같습니다.
: 사이즈, 컬러, 위치를 수치, 컬러코드, 좌표 등으로 입력할 필요 없이 마치 파워포인트에서 장표를 만드는 것과 똑같이 할 수 있다고 생각하면 됩니다.
2. 제작을 시작하는데 아주 적은 양의 코딩도 전혀 필요 없습니다.
: 사이트 제작이 서툰 사람일수록 시작하는데 장벽이 높으면 실행하기가 어렵습니다. '계정 만들기 > 템플릿 선택 > 바로 드래그 앤 드롭으로 편집' 이면 사이트 제작을 바로 시작할 수 있습니다. 아주 단순합니다.
3. 적당한 수의 템플릿이 제공됩니다.
: 기본적으로 너무 많은 템플릿이 주어지거나 집단지성 기반의 구매 테마 중에 하나를 고르는 것은 탐색비용이 더 듭니다. 물론 회사 홈페이지 같은 정말 중요하고 오랜 제작기간을 들여 신중하게 만들어야 하는 사이트라면 다른 이야기겠죠. (개발자도 있다면요!)
나중에 더 좋다고 생각했던 점
1. 편집과 수정을 아주 빠르게, 나 혼자 할 수 있습니다.
: 컨퍼런스라는 이벤트 특성상 연사가 교체되거나, 연사의 소속 및 직함을 수정해야 하거나, 스케줄 시간이 바뀌거나 강연의 제목이 바뀌는 일은 너무나 비일비재하죠.
특히 저희 스타트업생컨 사이트를 제작하는 목적은 초청하고자 하는 예비 연사들에게 컨퍼런스의 정보를 쉽게 보여주고 홍보하려는 목적이 큽니다. 즉, 모든 연사를 정해놓고 사이트가 오픈하는 것이 아니라 연사 한 명이 추가될 때마다 그들의 정보들을 즉각적으로 추가해야 하는 것이죠.
만약 이때마다 개발자에게 부탁해야 한다면 어떨까요.
두 사람 모두 스트레스를 주고받으며 커뮤니케이션을 해야 할 테고, 당연히 시간도 훨씬 오래 걸릴 겁니다. 제 경우 새로운 연사가 추가될 때 연사 사진, 직함 및 소속 정보를 확보했다면 홈페이지에 적용하는 데에는 겨우 5분 정도 걸리더라고요. 그만큼 빠르고 쉽게 편집과 수정을 할 수 있습니다.
#2. 원하는 걸 말해주세요
스타트업 투자 및 지원기관을 대상으로 하는 '스타트업 생태계 컨퍼런스'는 4년째 이어져오고 있는 행사입니다. 하지만 초청대상이 아닌 스타트업에서 계속 일해온 저로서는 이 컨퍼런스가 어떤 행사인지 정확한 이해가 없는 상황이었죠.
그러므로 스얼 멤버들이 생각하는 사이트의 목적과, 탑재되어야 할 기능을 듣는 것이 첫 기획의 토대가 될 수밖에 없었습니다. 그래서 '~했으면 좋겠다' 류의 요청사항들을 모으고 기능적으로 번역해보았습니다.
1. '스타트업 생태계 컨퍼런스' 단독 사이트로 매년 행사를 같은 사이트에서 볼 수 있으면 좋겠다.
- 스얼의 홈페이지와는(워드프레스) 다른 플랫폼을 이용해도 괜찮겠군.
- 스타트업 생태계 컨퍼런스의 정보는 여기서 다 볼 수 있게 하자.
2. 2017, 2016, 2015 역대 컨퍼런스의 기록을 아카이브 할 수 있었으면 좋겠다
- 그럼 원 페이저 사이트보다는 메인 페이지에서는 당해 컨퍼런스 소식을 보여주고
- 지난 컨퍼런스 소식은 별도 페이지로 한 해씩 내용을 담자.
- 지난 컨퍼런스 정보들 간에 공통 구성요소를 뽑아내야겠다.
3. 연사들과 컨퍼런스 스케줄이 보이면 좋겠다.
- 올해와 지난 컨퍼런스들의 공통적인 필수요소는 연사와 스케줄
- 주요 연사들을 담을지, 모든 연사들을 담을지가 디자인에 관건
그 세 개뿐이었답니다....
속이 새까매졌엉#3. 벤치마크 사이트로 기본적인 구성요소를 공부하자
이렇게 구성요소들이 구체적으로 주어지지 않고, 테스크를 요청한 상사 및 동료들 또한 '이런 느낌이면 괜찮지 않을까?' 정도의 환경이라면 세부 구성요소를 정의하는데 어려움이 큽니다. 특히 저처럼 해당 목적의 서비스를 처음 기획해보는 사람이라면 무엇이 필요한지 즉각적으로 생각이 나지 않겠죠.
이럴 때는 벤치마크 사이트를 찾는 것이 빠릅니다. 멤버들의 추천 사이트와 구글링, 핀터레스트, 여러 웹디자인 사이트를 서핑하며 우리가 원하는 목적과 기능이 맞다고 생각한 사이트들을 찾았습니다. 아래는 가장 많이 참고했던 2개의 사이트입니다.
1. Startup Fest
http://www.startupfestival.com/
2. 체인지온 컨퍼런스
http://changeon.org/conference_2017_intro/
이때 화려한 그래픽과 컨퍼런스의 명성보다는 원하는 목적과 기능에 맞는 사이트인 것이 더 중요합니다. 그래서 꼽은 두 사이트.
먼저, Startup Fest는 첫 페이지의 구성요소와 구조를 잡는데 큰 도움이 되었고, 체인지온 컨퍼런스 사이트에서는 글로벌한 페이지에서 얻을 수 없는 국내 컨퍼런스 아카이브의 필수요소들을 공부할 수 있었습니다.
리서치를 하다 보니 타 컨퍼런스 사이트들에는 있지만 우리에게 필요 없는 티켓 구매 기능과 같은 요소도 정확하게 보였죠.
이런 것들이 정리가 되면서 페이지의 주요 섹션들을 구성할 수 있게 되는 것입니다.
#4. 그래서 정해진 페이지 구성 (섹션)
위에서 정의한 필수요소와 벤치마크 사이트를 참고해서 정해진 구성요소들을 기반으로 윅스가 가진 템플릿과 과 앱들을 이리저리 설치해보며 정해진 페이지별 섹션입니다.
홈
- 메인 대문 헤더
- 카운트다운
- 작년 컨퍼런스 갤러리
- 생컨 개요
- 스얼 슬로건
- 올해 연사
- 컨퍼런스 스케줄
- 주최 : 스얼 소개
- 후원사
- SNS 채널
지난 컨퍼런스 페이지 (2017, 2016, 2015 공통)
- 메인 헤더
- 주제과 개요
- 3단 바로가기 메뉴 (주요 연사, 주요 강연, 스케줄)
- 주요 연사 9인
- 주요 강연 3개
- 스케줄표
- OOOO생컨이 남긴 말 (Quote)
- SNS 채널
문의
-메인 헤더
- 제목과 안내문
- 문의 접수 영역
- SNS 채널
#5. 컨텐츠 채우기 협업 방법;
내가 모르는 컨텐츠를 어떻게 ‘빠르게’ 채울까?
다수의 멤버들에게 사이트에 들어갈 정보들을 요청해야 한다면 어떤 방법이 가징 좋을까요?
오랜 고민 끝에 스얼이 자주 사용하는 협업 방법인 구글 스프레드시트를 사용했습니다.
먼저 탭을 아래처럼 페이지별로 나눠줍니다.
그 후 페이지 내 요청사항을 주고받기 위해 필요한 컬럼들을 추가합니다.
- 섹션 : #4에서 공유한 페이지별 구성요소를 의미합니다.
- 설명 : 왜 이 섹션이 필요한지, 섹션에 어떤 내용을 넣을 것인지 설명합니다.
- 제작 중 : 아직 작업 중 or 완료 상태를 기록합니다.
- TBD : 컨텐츠가 정확하게 정해지지 않아 제작 상태에 들어갈 수 없는 요소를 적습니다.
- 요청사항 : 제가 채우지 못하는 컨텐츠를 기록해 요청하거나, 제가 임의로 설정해놓은 것들에 대한 의견을 묻습니다.
- 담당 : 요청사항을 채울 수 있는 멤버 이름을 적습니다.
- 요청사항 답변 : 담당자가 요청받은 섹션에 들어가야 할 컨텐츠를 적어주는 곳입니다.
- 요청사항 적용 상태 : 제가 담당자의 답변을 사이트에 적용하는 status를 기록합니다.
이렇게 구글 스프레드 시트를 만들고 슬랙에 공유합니다.
참고로 '홈'에서는 거의 제가 임의로 채워놓은 컨텐츠들에 대한 의견을 묻고, 제가 모르는 '지난 컨퍼런스' 페이지들(2017,2016,2015)에 대해서는 주요 강연, 주요 연사들을 꼽는 것을 부탁드렸죠.
'문의' 페이지에 대해서도 작년까지 어떤 문의 히스토리가 있었는지 몰랐으므로 문의 안내문구를 부탁드렸습니다.
위의 구글 스프레드시트 협업을 통해 지금 보시는 생컨 홈페이지의 1차 버전은 다 만들 수 있었습니다.
제 상황과 비슷하다면, 괜찮은 방법이라고 생각합니다. :)
#6. 이후에는 끊임없는 수정, 수정 또 수정
윅스의 장점을 설명하며 어떤 부분에서 수정사항이 주로 발생하는지 설명했기에 이 부분은 넘어가도록 하겠습니다.
만약 이 글을 보시는 분이 사이트 제작 담당자라면 수정사항은 흐르는 물처럼 당연하게 받아들이시길 바라겠습니다. 그래도 나 혼자 지지고 볶는 게 낫습니다.
아! 그리고 디자인적인 부분은 정말 손대는 만큼 더 나아집니다. 시간이 조금 걸리더라도 내가 이용자의 시각에서 보았을 때 적당히 괜찮은 디자인 수준까지는 노력해봅시다.
결과적으로 네 가지 상황에 따른 결과값은
#연례이벤트용사이트 = 매년 쓸 수 있는 포맷으로
#개발자없음 = 개발자가 눈길 한번 주지 않음
#빨리만들어야함 = 전체 기획부터 도메인 연결까지 25일만에 완료
#그런데디자인이구리지는않아야함 = 윅스 기본 템플릿이 구원자
로 마무리 할 수 있었습니다.
즉 이 네 가지에 들어맞는 상황이라면 꽤 참고하실만한 제작기라고 생각합니다.
여기까지 스얼 매니저 데이나의 '2018 스타트업 생태계 컨퍼런스' 사이트 제작 후기였습니다.
저처럼 사이트는 만들고 싶지만
- 개발자-Free존에서 일하고
- 개발 에이전시를 통하면 비싸기만 하다는 걸 알고
- 가진 거라곤 도전정신뿐인데 또 구린 건 못 참는
많은 PR·마케터·커뮤니티 매니저들을 위해 공유해보았으니 아무쪼록 도움이 되기를 바라봅니다.
혹여나 작은 도움이라도 필요하시다면 말씀해주세요. 저도 또 좌충우돌하며 가르쳐드리겠지만요 :) ㅎㅎ
생컨이 끝났습니다!!!!!!by 스타트업얼라이언스 매니저 데이나
