[나를 찾는 스타트업 活動法] 9. 進路 포트폴리오 홈페이지 設計

[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部. 進路 포트폴리오 홈페이지 設計

10部. 進路 포트폴리오 홈페이지 製作 및 管理

나를 紹介하는 포트폴리오 必要性

지난 連載까지 '나를 찾는' 一連의 스타트업 活動 方法에 살펴봤는데, 이제부터 그 過程을 整理하고, 그렇게 찾은(또는 찾고 있는) 나를 紹介하는 方法에 對해 살펴본다.

'나를 紹介한다'는 것은 나에 對해 궁금한 相對方에게 願하는 內容을 說得力있게 들려주는 意味로서, 이를 위해 持續的인 改善 作業과 整理가 必要하다. 眞짜 '나'를 찾기 위해 스타트업 活動을 持續하고, 그 結果를 體系的으로 整理하고 管理해야 하는 理由다.

讀者들 大部分은 이미 自己紹介書를 여러番 作成해 봤으리라 생각한다. 高等學生이라면 大學校 支援할 때, 大學生이라면 奬學生이나 인턴(現場實習)에 支援할 때, 就業準備 過程에서는 會社 入社 支援 等 다양한 境遇에 入社志願書를 쓴다. 支援할 相對에 따라 要求하는 內容이 若干씩 다를 수 있지만, 相對가 願하는 人材임을 說得力있게 强調하는 內容으로 作成해야 한다는 點은 同一하다. 要求 樣式에 맞게 自己紹介書를 作成하고, 追加 提出이 可能하다면 그 內容을 뒷받침할 수 있는 活動 結果를 整理한 포트폴리오를 添附하기를 推薦한다.

흔히 '포트폴리오'라고 하면 디자이너가 自身의 디자인 프로젝트와 그 結果 作品을 紹介하는 것으로 생각한다. 하지만 보다 넓게 생각하면 어떤 分野에서든 누구에게나 自身의 活動을 포트폴리오로 整理하는 過程이 必要하다.

例를 들어, 소프트웨어(SW) 開發者라면 SW 프로젝트와 그 結果 SW를 포트폴리오로 紹介하는 것처럼, 各自의 專攻 學習 結果를 포트폴리오로 整理할 수도 있다. 또한, 그동안 여기서 紹介되어 各自가 直接 遂行한 스타트업 活動 結果 또한 包含될 수 있다. 自身의 進路에 活用할 스타트업 活動 포트폴리오가 된다.

온라인 포트폴리오 홈페이지 構成 및 活用

最近에 實際 오프라인 空間과 假想의 온라인 空間이 漸漸 가까워지고 있다. 特히, 코로나19 時代에 들어 그 速度는 더욱 빨라져, 온택트(Ontact), 메타버스(Metaverse) 等 온라인 環境이 實生活에 자연스럽게 스며들고 있다. 때문에 온라인에서 自身을 紹介하는 活動이 當然히 必要하고, 自身만의 온라인 空間을 積極的으로 活用해야 한다.

一般的으로 페이스북, 인스타그램 等 個人 SNS 活動을 통해 自身을 나타낼 수 있고, 링크드인, 리멤버 같은 비즈니스用 SNS로 專門家 人脈을 管理할 수도 있다. 또한 유튜브 等의 미디어 채널로 自身의 콘텐츠를 만들어 共有하면 더 좋겠다.

이처럼 自身을 紹介할 수 있는 다양한 온라인 서비스를 活用할 수 있는데, 各 서비스別로 固有의 特徵이 있고, 相互 補完的으로 活用될 수 있기에 여러 個를 活用하는 것이 一般的이다. 따라서, 基本的으로 自身의 포트폴리오를 다양한 方式으로 紹介할 수 있는 나만의 온라인 空間을 直接 꾸미고, 그를 基盤으로 SNS, 미디어 채널 等 다른 온라인 空間까지 連結하는 허브 役割이 되도록 하길 勸한다. 바로 自身만의 온라인 포트폴리오 홈페이지(웹사이트)를 準備하면 좋다. 이와 같은 온라인 허브로 活用되는 포트폴리오 홈페이지에는 基本的으로 다음과 같은 機能이 包含된다.

? 個人 프로필 紹介 : 自身의 過去, 現在, 未來에 對해 紹介하는 空間이다. 自身이 志向하는 삶의 目的과 目標를 定義하고, 그것을 實現하기 위한 現在의 主要 活動과 過去 主要 經歷, 특별한 受賞 經歷, 資格證 等을 紹介한다. 그 情報에 信賴感을 줄 수 있도록 寫眞을 함께 보여주면 좋다.

? 온라인 채널 허브 : 各各 따로 利用하는 페이스북, 유튜브 等 여러 온라인 서비스의 링크를 한데 모아서 서로 連結하는 허브 役割을 遂行한다. 여기서 링크는 사이트 링크가 基本이며, 追加로 主要 콘텐츠 一部를 보여주고 細部 內容을 確認할 수 있는 링크까지 提供한다면 더 좋다.

? 포트폴리오 管理 : 自身의 進路 計劃과 關聯된 그間의 프로젝트 活動 및 그 結果를 紹介한다. 그 프로젝트로는 學業, 동아리, 業務 等 다양한 種類로 分類할 수 있으며, 포트폴리오에 對해서도 目錄, 主要 內容, 細部 內容 等 多樣한 레벨로 나누어 紹介할 수 있다. 活動 結果를 簡單한 텍스트 說明과 함께 이미지 및 動映像 等으로 생생하게 表現하면 좋다.

? 連絡 채널 : 홈페이지에서는 運營者와 訪問者가 서로 疏通돼야 한다. 揭示板이 있으면 좋은데, 萬一 效率的으로 管理하기가 어렵다면, 적어도 온라인에서 바로 作成해 連絡하고 이메일로 確認할 수 있는 機能을 提供하는 것이 좋다. 포트폴리오 結果 等 궁금한 事項을 問議할 수 있고, 間或 作業 依賴를 받을 수 있는 機會도 생길 수 있으며, 그런 過程을 통해 關心 分野의 人脈으로 發展될 可能性도 있다.

整理하면, 포트폴리오 홈페이지는 自身에 對한 紹介와 함께 그間의 活動 結果를 整理하는, 이른바 情報 管理 目的으로 割用된다. 한便으로 向後 活動 計劃을 整理하는 時間 管理 用途로도 活用할 수 있다. 例를 들어, 現在 遂行 中인 프로젝트의 主要 活動 狀況을 持續 整理하며 管理해 나가고, 追後 그 프로젝트가 終了되면 포트폴리오 結果로 狀態를 變更해 保管할 수 있다.

또한, 向後 必要한 主要 프로젝트의 主要 活動 計劃도 미리 整理해 管理해 뒀다가, 그 프로젝트를 遂行할 時期가 되면 現在 遂行 中인 프로젝트로 狀態를 變更해 記錄해 나가는 方式이다. 追加로, 會員 管理와 揭示板 機能을 活用하면 다양한 온라인 커뮤니티 空間으로서 人脈 等 사람 管理도 可能하다. 이 같이 포토폴리오 홈페이지는 그 안에서 다양한 情報와 時間 計劃, 그리고 사람을 쉽게 管理할 수 온라인 上의 有用한 綜合 管理 道具다.

홈페이지 製作을 위한 웹사이트 빌더(Builder) 서비스

다음 連載에서는 直接 포트폴리오 홈페이지를 製作할 것이다. '웹開發에 對해 아무것도 모르는데, 果然 그게 可能할까?'라는 생각이 들 수 있을 텐데, 괜한 걱정이다. 우리는 네이버와 같은 웹사이트를 크롬(Chrome), 파이어폭스, 사파리 等의 웹브라우저로 자유롭게 利用하고 있다. 한 웹페이지에서 어떤 링크를 눌렀을 때 다른 웹페이지 內容으로 어떻게 바뀌게 될까? 그 過程을 理解하려면 HTML, HTTP, 네임 서버(Name Server), 도메인 住所(Domain Address) 等 웹 技術을 理解해야 하지만, 事實 이런 技術 內容을 全혀 몰라도 每日 웹사이트를 便하게 利用하고 있다. '웹사이트는 어떻게 만들어질까?'에 對한 答辯도 마찬가지다. 요즘에는 이런 技術을 몰라도 웹사이트를 簡單하게 만들 수 있는 웹사이트 '빌더(Builder)' 서비스들을 利用해 나만의 웹사이트를 쉽게 만들 수 있다. 그것도 無料로 웬만한 機能을 利用 可能하다.

代表的인 웹사이트 빌더 서비스로는 海外의 워드프레스(Wordpress), 윅스(Wix), 國內의 아임웹, 크리에이터링크 等이 있다. 워드프레스는 基本的인 블로그 디자인을 基盤으로, 다양한 디자인의 웹사이트 構築이 可能하지만, 初步者에게 조금 어렵긴 하다. 反面, 윅스는 다양한 디자인 템플릿을 提供해서 좀더 쉽게 웹사이트 構築이 可能하다. 다만, 海外 서비스의 限界로 國內 利用에는 多少 不便함이 있다.

아임웹의 境遇 다양한 디자인 템플릿을 活用한 쇼핑몰과 챗봇과의 聯動이 優秀하지만, 無料 機能의 制約이 큰 便이다. 크리에이터링크 또한 有料로만 活用할 수 있는 機能이 있긴 하지만, 無料 機能만으로도 어지간한 웹사이트는 充分히 만들 수 있는 强力한 機能을 提供한다. 이런 理由로 筆者가 定義한 '모두의 스타트업 코딩' 프로세스에서는 크리에이터링크 서비스를 活用해 포트폴리오 홈페이지를 製作하길 推薦하고 있다.

크리에이터링크 서비스 紹介

크리에이터링크 서비스를 利用하면, PC, 스마트폰, 태블릿 等 여러 端末 畵面에 自動으로 맞춰 보여주는 反應型 홈페이지를 쉽게 만들 수 있다. 홈페이지 製作 5段階를 段階別 1分 內外의 動映像으로 쉽게 確認할 수 있으며, 1時間 分量의 풀버전 動映像으로 仔細히 살펴볼 수도 있다.

크리에이터링크는 다양한 템플릿, 이미지, 인터넷 住所, 揭示板, 홈페이지 多衆 管理 等의 機能을 無料로 提供한다. 크리에이터링크를 使用하려면 먼저 會員加入을 해야 한다. 會員加入에 必要한 情報는 使用할 이름(닉네임), 이메일, 그리고, 祕密番號 等이다. 會員加入 完了를 위해서는 入力한 이메일을 통한 認證 確認을 거쳐야 하는데, 크리에이터링크가 보낸 會員加入 認證 이메일에서 '計定 活性化'를 클릭하면 된다. 크리에이터링크 서비스에 對한 仔細한 利用 方法은 크리에이터링크 홈페이지 또는 'Start! 모두의 스타트업 코딩' 圖書 等을 參考할 수 있다.

進路 포트폴리오 홈페이지 디자인

우리는 웹브라우저로 檢索이나 포털사이트 等 자유롭게 利用하고 있는데, 마우스 클릭 한番으로 새로운 內容의 웹페이지로 넘어가게 된다. 例를 들어, 웹브라우저 上段 住所窓에 'http://startupcoding.kr'라고 入力하면 筆者의 '모두의 스타트업 코딩' 웹사이트의 初期畵面, 卽 홈페이지에 接續된다. 홈페이지 上段 메뉴領域의 'About'을 클릭하면 사이트 紹介 웹페이지를 볼 수 있고, 'Profile'을 누르면 筆者의 프로필을 볼 수 있다.

앞서 言及했듯, 웹페이지 移動 技術은 仔細히 몰라도 되지만, 이番 連載에서 다루는 進路 포트폴리오 홈페이지 製作을 위해서는 웹사이트의 基本 構造를 直接 構想해야 한다. 홈페이지를 構成하는 여러 페이지를 트리 構造로 서로 連結한 情報構造度(Information Architecture) 設計가 必要한데, 이런 情報構造度를 머리로만 생각할 것이 아니라 實際로 그려보고 改善하는 過程을 거치는 것이 바람직하다.

例를 들어, 앞서 紹介한 포트폴리오 홈페이지의 機能을 아래 왼쪽 그림과 같이 페이지들의 情報構造道路 表現할 수 있다. 이때, 페이스북 等 온라인 채널이 單純히 該當 서비스로의 移動을 提供하는 程度라면, 個人 프로필 페이지 내 外部 사이트 링크로 包含해도 되기 때문에, 오른쪽 그림과 같이 情報構造度를 單純化할 수 있다.

그러면 各 웹페이지를 어떻게 設計할 수 있을까? 웹사이트를 제대로 만드는 境遇라면, 여러 페이지로 構成된 情報構造度를 設計한 다음, 各 페이지別로 詳細 構造 및 內容을 整理한 畵面設計書인 스토리보드를 作成하는 것이 一般的이다. 인터넷에서 스토리보드 樣式을 쉽게 찾을 수 있는데, 簡單하게는 MS 파워포인트 樣式으로 作成한다.

그렇게 作成된 스토리보드가 準備되면 實際 作動되는 웹사이트 模型인 프로토타입을 만드는데, 移轉 連載에서 簡單히 紹介한 카카오 오븐(http://ovenapp.io) 또한 使用하기 쉬운 프로토타입 製作用 서비스다. 카카오 오븐을 利用하면 各 페이지 內容을 簡單히 整理하고, 페이지들을 서로 쉽게 連結할 수 있으며, 웹브라우저에서 바로 確認할 수 있다.

우리는 簡單한 進路 포토폴리오 홈페이지를 設計하기 때문에, 여기서는 各 페이지別 詳細 스토리보드 作成을 省略하는 代身, 카카오 오븐으로 바로 프로토타입 製作과 同時에 페이지別 畵面 設計를 함께 進行하면서 修正해 보기를 推薦한다. 參考로, 카카오 오븐으로 簡單히 製作한 進路 포트폴리오 홈페이지 프로토타입을 아래 그림의 QR코드로 確認할 수 있다.

모두의 스타트업 코딩 敎科目의 期末課題 홈페이지 設計 事例

筆者가 大學校의 16週 正規 敎科目으로 開設한 '모두의 스타트업 코딩'에서는, 여기서 紹介한 進路 포트폴리오 홈페이지 構造와 거의 같은 홈페이지를 製作하는 期末 課題를 8週次에 出題하고 있다. 關心 스타트업을 찾고 檢證하는 스타트業 活動 代身, 自身의 생각과 關心 製品/對象의 스토리를 SW로 具現한 오븐 프로토타입과 스크래치 코딩을 포트폴리오로 構成하는데 差異가 있을 뿐이다. 受講生들은 期末課題 가이드로 紹介되는 全體 사이트의 情報構造도와 簡單한 畵面設計書를 參考해 自身만의 포트폴리오 홈페이지를 製作하게 되는데, 期末課題 가이드 一部를 參考로 紹介하면 다음과 같다.

이런 方式으로 全體 웹사이트의 情報構造度를 構想하고, 웹사이트를 構成하는 各 페이지別로 簡單한 畵面設計 및 페이지間의 連結을 表示하는 것만으로도 웹사이트 構造를 理解할 수 있고 實際 製作에도 큰 도움이 된다. 仔細한 說明은 'Start! 모두의 스타트업 코딩' 圖書 8張을 參考하거나, 지난 여름放學 때의 季節學期 受講 學生들 對象으로 進行한 온라인 說明會 유튜브 映像을 視聽해도 좋다(아래 그림 QR코드). 參考로 '모두의 스타트업 코딩' 敎科目 全體의 基本的인 運營 情報도 들어 있으니 接續해 살펴보기 勸한다.

이番 連載에서는 '진로 포트폴리오 홈페이지 設計'를 主題로 그間의 스타트업 活動을 整理하는 홈페이지 構想 方法에 對해 紹介했다. 먼저 나를 찾기 위한 活動 結果인 포트폴리오에 對한 理解 및 必要性을 紹介하고, 포트폴리오를 效率的으로 管理할 수 있는 온라인 홈페이지의 構成 要素와 活用 方法에 對해서도 살펴봤다.

다음으로 SW 코딩을 몰라도 홈페이지를 쉽게 製作할 수 있는 웹사이트 빌더 서비스에 對해 說明했으며, 그 代表的인 國內 서비스로서 크리에이터링크를 推薦하고, 그 利用 過程에 對한 動映像도 共有했다. 그동안의 스타트업 活動이 들어간 進路 포트폴리오 홈페이지를 디자인하는 情報構造도와 畵面設計書를 살펴보고, 直接 製作한 簡單한 프로토타입度 確認할 수 있도록 提供했다. 마지막으로 大學校 關聯 敎科目에서 實際로 期末課題로 出題한 포트폴리오 홈페이지 設計 가이드와 說明 映像을 設計 事例로 紹介했다.

다음 連載는 마지막 글로서, 이番에 設計한 나의 進路 準備 活動 포트폴리오 홈페이지 製作을 說明하고 그 事例에 對해 살펴보며, 스타트업 活動에 參與한 學生들의 意見 等을 紹介하는 것으로 마무리하겠다.

글 / 釜山創造經濟革新센터 센터長 송용준 (zikimi@startupcoding.kr) 20餘 年間 인터넷 벤처부터 KT까지 多樣한 ICT 分野 經歷을 基盤으로, 2014年부터 스타트業 멘토 活動을 始作해 創造經濟타운, 서울創造經濟革新센터에서 스타트業 支援 業務를 遂行. 2018年부터 2021年1學期까지 건국대학교에서 基礎 SW 敎育, 스타트업 協力, 스타트업 인턴 等 取/創業 指導 活動했는데, 特히 大學e러닝 學點認定 컨소시엄 敎科目으로 '모두의 스타트업 코딩', '비즈니스 모델 디자인과 린스타트업 活動' 敎科目을 開設해 講義하며, 'Start! 모두의 스타트업 코딩' 書籍을 著述했다. 現在 韓國奬學財團의 社會리더 大學生 멘토링 멘토로, 2021年8月 中旬부터 釜山創造經濟革新센터 센터長으로 活動하고 있다.

整理 / IT東亞 이문규 (munch@itdonga.com)