[나를 찾는 스타트업 活動法] 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)