[나를 찾는 스타트업 활동법] 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)