[나를 찾는 스타트업 활동법] 10(완). 진로 포트폴리오 홈페이지 제작 및 설계

[IT동아]

[연재순서]

연재를 시작하며 - http://it.donga.com/32126/

1부. 창업과 다른 스타트업 이야기 - https://it.donga.com/32184/

2부. 진짜 ‘나’를 찾는 스타트업 활동 - http://it.donga.com/32229/

3부. 스타트업 활동 도구, 스타트업 코딩 - https://it.donga.com/32270/

4부. 스타트업 생태계와 관심 스타트업 조사 - https://it.donga.com/32337/

5부. 관심 스타트업의 비즈니스 모델 분석 - https://it.donga.com/32354/

6부. 서비스 스토리텔링 프로토타이핑 - https://it.donga.com/32387/

7부. 목표 고객 인터뷰 기반 비즈니스 모델 검증 - https://it.donga.com/32447/

8부. 관심 스타트업 컨택트 및 미팅 - https://it.donga.com/32541/

9부. 진로 포트폴리오 홈페이지 설계 - http://it.donga.com/32606/

10부. 진로 포트폴리오 홈페이지 제작 및 관리

크리에이터링크에서 웹사이트 디자인 템플릿 선택하기

드디어 이번 연재의 마지막 글을 소개할 차례다. 이번에는 지난 번에 설계한 진로 포트폴리오 홈페이지를 제작해본다. 앞서 소개했듯, IT전문지식 없이 홈페이지를 쉽게 제작할 수 있는 웹빌더 서비스를 사용하면, 누구나 웹사이트를 쉽고 간편하게 제작 가능하다. 여기서는 국내의 관련 전문 스타트업이자 서비스 이름인 '크리에이터링크(https://creatorlink.net)'를 사용하기로 한다. 크리에이터링크에서는 회원 로그인 후 무료로 웹사이트를 만들 수 있다.

처음 만드는 경우라면 '+ 사이트 만들기' 버튼을 선택한다. 이미 만든 웹사이트가 있는 경우 대시보드 화면에서 웹사이트 목록 콤보박스를 선택해 '+ 사이트 추가하기'를 선택하면 된다. 그 다음에는 생성할 웹사이트의 접속주소(URL)를 설정하는 화면이 나오는데, 원하는 호스트 이름을 기본 도메인 'creatorlink.net' 앞에 입력한다. 그러면 URL은 '(호스트 이름).creatorlink.net'이 되는데, 최초 설정하면 이후로 변경이 불가능하니 신중하게 입력해야 한다. 만일 이미 사용되고 있는 호스트 이름이라면 다른 이름을 입력하도록 안내된다.

웹사이트 접속주소를 정상 생성한 경우에는 웹사이트를 쉽게 제작할 수 있는 디자인 템플릿 선택화면으로 넘어간다. 크리에이터링크에서는 현재 30여 개의 템플릿을 제공하며, 새로운 템플릿을 계속 추가하고 있다. 각 템플릿은 다시 수십 개의 블럭 조합으로 구성되어 있는데, 원하는 스타일의 템플릿을 선택한 후에 필요없는 블럭을 삭제하고 다른 디자인의 블럭을 추가하면서 자신만의 개성있는 웹사이트를 만들 수 있다.

만일 각 블록을 자유롭게 사용할 수 있다면, 템플릿 목록 마지막의 '빈 페이지에서 시작하기' 옵션을 사용해 처음부터 웹사이트를 만들 수도 있겠지만, 일단은 템플릿을 하나씩 살펴보고 마음에 드는 걸 선택해서 사용하는 것이 훨씬 간단하다.

크리에이터링크 템플릿으로 웹사이트 편집

이제 선택한 템플릿으로 웹사이트를 편집하는 기능을 살펴보자. 먼저 상단에는 웹사이트 관련 메뉴 영역인데, 웹사이트 메뉴를 관리하는 ‘메뉴 설정’, 웹사이트의 전체 스타일을 관리하는 ‘사이트 설정’, 작업 결과를 이전 상태로 ‘되돌리기’, 현재 제작한 웹사이트를 웹브라우저에서 ‘미리보기’, 제작한 웹사이트를 외부에서 공개하는 ‘사이트 게시’, 그리고 웹사이트 편집을 종료하고 웹사이트 대시보드로 돌아가는 ‘편집 끝내기’ 메뉴가 있다.

다음으로 메뉴 영역 아래에 블록 영역이 있는데, 크리에이터링크가 제공하는 다양한 블록들 중에서 선택한 블록을 한칸씩 세로로 쌓아 웹페이지가 만들어진다. 각 블록의 우측 상단에 마우스 커서를 올리면 톱니바퀴 모양의 설정 메뉴가 나타나, 해당 블록에 해당하는 다양한 속성을 설정할 수 있다. 블록과 블록 사이에 마우스를 올리면 파란색 선 중앙에 '+' 원 모양이 나타나고, 그 원을 누르면 새로운 블록을 추가할 수 있도록 좌측에 블록 모음이 나온다. 여기서 원하는 블록을 선택하면 그 위치에 선택한 블록이 추가된다.

상단의 메뉴영역 중에서 웹사이트 정보구조도(IA)를 구현할 수 있는 ‘메뉴 설정’에 대해 보다 자세히 살펴보자. ‘메뉴 설정’을 누르면 웹사이트 우측 상단(메뉴블록)의 메뉴들이 세로로 보이고, 각 메뉴에 이름 변경하는 ‘수정’, ‘복제’, ‘삭제’, 이동할 웹페이지를 연결하는 ‘링크’, ‘숨김’, ‘비공개’를 지정할 수 있다.

또한, 하단의 ‘+ 메뉴 추가’로 새로운 메뉴를 추가 가능하며, 각 메뉴를 마우스로 선택해 메뉴 사이의 적절한 위치로 배치할 수 있다. 처음에는 1단계(하위의 서브 메뉴가 없는) 메뉴를 보여주고 있는데, 특정 메뉴를 마우스로 클릭해 배치할 때 1단계 메뉴의 우측에 배치하면 아래 방향 열림을 표시하는 작은 역삼각형이 나타나면서 2단계의 서브메뉴로 옮길 수도 있다. 이와 같은 ‘메뉴 설정’의 작업 결과는 웹사이트 메뉴블록의 우측 메뉴에 바로 반영되어 확인할 수 있다.

이렇게 만든 웹사이트를 어떻게 공개할 수 있을까? 처음에 웹사이트 접속주소(URL)를 지정했는데, ‘사이트 게시’ 메뉴를 누른 다음에야 외부에서 그 URL로 접속해 작업한 웹사이트를 볼 수 있다. 따라서 일정 수준 이상으로 웹사이트를 완성한 후에 ‘사이트 게시’ 메뉴를 누르는 것이 바람직하다. 그 전에 현재 작업 중인 웹사이트가 웹브라우저에서 어떻게 보이는지 확인하려면 ‘미리보기’ 메뉴를 이용하면 된다.

크리에이터링크 블록으로 웹페이지 만들기

이처럼 크리에이터링크에서는 블록쌓기 방식으로 웹페이지를 만들 수 있다. 다양한 용도의 웹페이지를 쉽게 만들 수 있도록 쇼케이스, 타이틀, 콘텐츠, 갤러리/쇼핑 등 14개의 카테고리별로 다양한 디자인의 블록이 제공된다. 홈페이지 초기화면이나 개인 프로필과 같이 타이틀과 콘텐츠로 구성된 웹페이지는 텍스트, 이미지, 그리고 다른 웹페이지로 가는 URL 링크를 이용해 쉽게 제작할 수 있다.

이런 웹페이지는 크리에이터링크의 블록을 적절히 활용해 직관적으로 제작할 수 있으니 자세한 방법은 생략하고, 여기서는 콘텐츠를 구성하는 주요 데이터인 내외부 이미지를 활용하는 방법과 웹페이지로 이동하는 URL 링크를 활용하는 방법을 소개한다.

먼저 이미지는 자신이 갖고 있는 이미지 파일을 사용하거나, 적절한 외부 이미지를 검색해 얻을 수도 있다. 크리에이터링크의 블록 설정에서 이미지 데이터 변경이 필요한 경우를 선택하면 이미지 보관함 창이 나오는데, 거기에서 자신이 보유한 이미지 파일을 사용하려면 ‘내 PC에서 가져오기’로 크리에이터링크에 그 파일을 올려놓은 다음 사용하면 된다.

단 외부 이미지를 사용하는 경우 저작권 이슈가 없는 무료 이미지를 찾아야 하는데, 크리에이터링크는 ‘무료 이미지’ 탭에서 저작권 걱정없는 다양한 이미지를 제공하고 있다.

웹페이지 이동 링크는 외부 웹페이지 주소를 지정하는 ‘URL 직접 입력’, 제작하는 웹사이트에 등록한 메뉴 웹페이지를 지정하는 ‘메뉴 링크’, 그리고 제작하는 임의의 내부 웹페이지를 지정하는 ‘블럭링크’를 지정하는 세가지 방식으로 제공되는데, 추가 설명이 필요한 마지막의 ‘블럭링크’ 방식을 간단히 소개한다.

크리에이터링크에서 블록을 사용하면 임의의 블록 이름이 지정되는데, 그 이름으로는 어떤 블록인지 구분하기 어렵기 때문에 해당 페이지 내용과 관련된 이름으로 변경하는 것이 좋다. 예를 들어, 첫 번째 포트폴리오의 상세 내용을 보여주는 웹페이지의 상단 배경 블록의 이름을 ‘portfolio1’으로 지정하는 방식이다. 이렇게 지정한 블록 이름 ‘portfolio1’은 ‘블럭링크’에서 선택가능한 링크로 자동으로 포함되고, 해당 블록을 포함한 웹페이지로 이동할 경우에 ‘블럭링크’에서 ‘portfolio1’ 링크를 선택하면 된다.

크리에이터링크 갤러리 블록으로 포트폴리오 목록 만들기

진로 포트폴리오 홈페이지에서는 전체 포트폴리오 목록을 먼저 보여주고, 거기서 특정 포트폴리오를 선택하면 자세한 내용을 보여주는 포트폴리오 상세 페이지로 이동하는 방식으로 설계했다. 크리에이터링크에서는 이와 같은 포트폴리오 목록 페이지를 갤러리/쇼핑 카테고리에서 제공하는 블록으로 쉽게 구현할 수 있다. 적절한 디자인의 갤러리 블록을 선택한 다음, 갤러리 타입을 여러 종류의 콘텐츠를 한 페이지에 올릴 수 있는 ‘상세 페이지형’ 타입으로 지정하면 된다. 참고로, 갤러리 블록 설정 창에서는 다른 디자인의 블록으로 추후 수정할 수도 있으므로, 다양한 형태의 포트폴리오 목록으로 변경할 수도 있다.

스타트업 활동 관련 홈페이지 및 수강생 홈페이지 제작 사례

이제까지 크리에이터링크를 활용한 홈페이지 제작 방법을 간단히 소개했는데, 자세한 방법은 건국대학교, 한양대학교 등 여러 대학교들에서 정규 교과목으로 e러닝 강의 중인 ‘모두의 스타트업 코딩’ 홈페이지(http://startupcoding.kr)와 그 교재 ‘Start! 모두의 스타트업 코딩’ 도서(21세기사 출판사)를 참고하기 바란다.

특히, 각 홈페이지에는 교과목 수강 학생들의 기말과제 결과물로 제출한 ‘MyPortfolio 홈페이지’ 등 일부 홈페이지를 ‘SHARE’ 메뉴의 하위 메뉴들로 제공되고 있다. 주어진 제작 가이드를 기본으로 다양한 아이디어와 콘텐츠로 제작한 자신만의 홈페이지 사례가 들어 있다.

이 스타트업 코딩 홈페이지 또한 크리에이터링크로 제작했으며, 대학교 정규 교과목을 수강한 대학생 뿐만 아니라 일반 기업 직원들 대상의 SW 코딩 교육과 아이디어 발전 과정 등 다양한 용도로 활용할 수 있다. 실제로 한국수자원공사(K-Water) 인재개발원은 스타트업 활동 방법을 배우고 현장에서 바로 홈페이지를 제작하는 3일 간의 'SW 리터러시 집합 교육 과정'을 필자와 운영하기도 했다. 그 결과 중 일부도 ‘모두의 스타트업 코딩’ 홈페이지에서 살펴볼 수 있다.

나를 찾는 스타트업 활동 성과 소개

필자는 지난 2018년 1학기부터 2021년 1학기까지, 건국대학교에서 캠퍼스 스타트업 문화 확산을 위한 다양한 활동을 수행했다. 이번 연재는 그 과정과 결과를 개선해 정리한 내용이다. ‘나를 찾는 스타트업 활동’이 수강 학생들에게 과연 얼마나 도움이 되었을까?

먼저 스타트업 활동 교과목으로서 ‘비즈니스 모델(BM) 디자인과 린스타트업 활동’과 ‘모두의 스타트업 코딩’을 수강한 학생들 대상으로 조사한 강의 만족도 주관식 요약 결과를 최근에 받았는데, 그대로 소개하면 상당히 긍정적인 의견들이 많았다.

그리고, 건국대학교의 학점연계 현장실습 프로그램을 활용해, 스타트업 대학생 인턴을 매년 70명 내외로 매칭해 지도했다. 성장 잠재력있는 인재 확보가 어려운 스타트업과 자신의 진로 분야를 찾아 헤매는 대학생의 이해가 서로 잘 맞는 스타트업 활동 프로그램이었다. 참여 스타트업과 학생들 모두에게 서로에 대한 이해도 향상과 학생의 향후 진로 설계 구체화 등 전반적인 만족도가 상당히 높았다. 특히, 인턴 종료 후 해당 스타트업에 취업한 학생들도 10% 정도 됐다.

또 다른 프로그램으로, 스타트업 대학생 인턴 대상의 장학금(연 4800만 원)을 2년 간 유치, 스타트업에 관심있는 재학생과 졸업생을 위한 커뮤니티 운영 및 지도 활동도 수행했다. 이 성과를 인정받아 건국대학교 LINC+사업단이 진행한 산학협력 성과 확산 포럼 시상식에서 2019년도 개인부문 우수상, 2020년도 개인부문 대상을 수상한 바 있다.

그 활동 과정을 기록하려 4분 22초 분량의 동영상을 직접 기획/제작했는데, 다양한 스타트업 활동 프로그램 소개 뿐 아니라, 나를 찾아 성장하는 학생과의 인터뷰, 스타트업 대표 및 멘토의 전달 메시지 등 참고하면 좋을 정보가 많이 있으니 시청해 보기를 추천한다. (아래 그림의 QR코드 참조)

이번 마지막 연재에서는 ‘진로 포트폴리오 홈페이지 제작 및 관리’를 주제로, 그동안의 스타트업 활동을 정리하는 나만의 홈페이지를 크리에이터링크로 제작하는 방법과 그 활용 사례를 소개했다. 실제로 크리에이터링크로 제작한 홈페이지 사례로서 ‘모두의 스타트업 코딩’ 웹사이트와 함께 실제 수강 학생들이 직접 제작한 홈페이지도 공개했으며, 지난 3년 이상 동안 수행한 스타트업 활동 지원 프로그램의 운영 결과와 참여한 학생들의 의견도 공유했다.

흔히 인생은 미완성이라 말한다. 그렇기에 나를 찾는 활동도 우리가 살아가는 동안 지속돼야 한다. 스타트업 또한 인생과 비슷하다. 끊임없이 문제를 찾고, 그것을 해결하고 개선시키는 과정의 연속이다. 이 정도면 우리 인생 자체를 자신만의 스타트업이라 생각할 수 있지 않을까?

지금까지 10회에 걸친 연재에서 소개한 나를 찾는 스타트업 활동 프로그램 또한 이것으로 완성된 것이 아니라, 앞으로 지속적으로 수정되고 개선되는 과정이 필요하겠다. 아무쪼록 많은 분들이 스타트업 활동에 관심을 갖고, 공감하며, 실제로 참여하기를 기대한다. 그 결과로 앞으로 ‘나를 찾는 스타트업 활동 사례’들이 많이 소개되고, 각자에게 맞는 활동 방법 또한 다양하게 만들어지길 바란다.

글 / 부산창조경제혁신센터 센터장 송용준 (zikimi@startupcoding.kr)

20여 년간 인터넷 벤처부터 KT까지 다양한 ICT 분야 경력을 기반으로, 2014년부터 스타트업 멘토 활동을 시작해 창조경제타운, 서울창조경제혁신센터에서 스타트업 지원 업무를 수행. 2018년부터 2021년1학기까지 건국대학교에서 기초 SW 교육, 스타트업 협력, 스타트업 인턴 등 취/창업 지도 활동했는데, 특히 대학e러닝 학점인정 컨소시엄 교과목으로 '모두의 스타트업 코딩', '비즈니스 모델 디자인과 린스타트업 활동' 교과목을 개설해 강의하며, 'Start! 모두의 스타트업 코딩' 서적을 저술했다. 현재 한국장학재단의 사회리더 대학생 멘토링 멘토로, 2021년8월 중순부터 부산창조경제혁신센터 센터장으로 활동하고 있다.

정리 / IT동아 이문규 (munch@itdonga.com)