Dongjun Kim

웹 프론트엔드 개발자

99

about me

내 이야기
바닐라코딩 제주도 원정코딩

바닐라코딩 3기 프로젝트 발표

'개발자들과 뜻을 나누고 개발에 대해 좀 더 깊게 익히고 싶습니다.'

20대 초반, 저는 창업에 대한 꿈이 있었습니다.
창업 아이템은 어떤 것이든 상관 없었고, 그저 사용자들이 정말 필요로 하고 만족하며
쓰는 서비스가 내가 만든, 혹은 내가 깊게 관여한 회사에서 만든 것이면 정말 행복할 것 같다는생각이었습니다.  하지만 디자인을 전공하고 있던 저에게 창업은 머나먼 일처럼만 느껴졌고 어떻게 접근해야 할 지 감이 잡히지 않았습니다. 그 때 당시에는 국내에 스타트업이란 단어도 생소했던 시기였습니다. 주변 친구들 중에 창업을 생각하는 사람은 찾아보기 힘들었고, 심지어 전공을 버리고 공무원, 대기업 스펙쌓기에 동참하는 친구들도 많았습니다.

졸업에 가까워질 무렵, 저는 창업에 대해 현실적으로 생각하기 시작했습니다. '창업을 하기 위해서는 스타트업에 들어가서 경험을 쌓아야 하고 관련 인맥을 많이 넓혀야 한다. 스타트업이 올바로 성장하기 위해서는 최대한 적은 인력으로 최대의 효율을 낼 수 있어야 한다. 그러기 위한 최소한의 포지션은 기획,영업 / 디자인 / 개발이다.'

다행히도 제가 속해있던 디자인은 초기 스타트업에 필요한 포지션이었고 그 중에서도 가장 많이 필요로 하는 웹디자인을 실무에서 적용할 정도 키우기 위해 상경하여 웹디자인, UI, UX와 관련된 많은 교육 및 세미나에 참가해서 지식을 쌓고 주변 인맥을 통해 디자인 외주도 종종 받아 경험을 쌓았습니다.

15년 3월, 조그마한 웹서비스 플랫폼 스타트업에 들어가게 되었습니다. 그 곳의 대표는 신기하게도 저와 동갑이었고, 저 이상으로 스타트업에 대해 많이 알고있고 스타트업에 관한 이야기 나누는 것을 좋아했습니다. 창업에 뜻을 두고 공감대 형성이 됐던 첫 번째 사람이라 정말 행복했고 일하는 것이 즐거웠습니다. 6월에 사무실을 옮겨야 하는 시점이 됐을 때, 의논하다가 코워킹스페이스란 것에 대해 알게 되었고, 공유경제로 저렴한 비용으로 좋은 사무실에서 업무를 보는 것이 가능하며 창업비용 또한 불가능한 수준이 아니라는 것을 알게 되었습니다. 또한 웹 플랫폼과 달리 바로 매출이 발생했기에 매력적이라는 생각이 들었고 곧바로 창업을 하게 되었습니다.

20대 젊은 패기로 운영한 결과, 1년이 안되서 지점을 확장할 수 있었고 국내 코워킹스페이스 중에서는 나름 알려진 곳이 될 수 있었습니다. 3년차에 다다랐을 무렵, 저는 기술력을 갖춰 더 많은 사용자를 상대로 하는 IT 서비스 쪽으로 나아가고 싶었습니다. 회사는 이미 어느정도 안정되어 있었기에 서로의 꿈을 기원하며 정리하고 나왔습니다.

디자인, 창업 운영을 하면서 지속적으로 들었던 생각이 '개발이 정말 중요하다.' 였습니다. 창업을 제대로 하기 위해서는 온라인 활동은 불가피한데 웹서비스를 만들 때는 무조건 개발이 필요했습니다. 개발외주도 해봤고 개발자도 고용해 봤지만 조그만 스타트업이 적은 비용으로 괜찮은 곳, 괜찮은 사람을 찾기는 정말 쉽지 않았습니다. 코워킹 스페이스 내에 상주하던 스타트업, 그 안에 소속된 개발자들과 가까워진 사람들이 있었지만, 개발에 대해 모르니 공감대 형성이 안되고 늘 어느정도의 거리감이 있었습니다.

그러던 중 예전에 피치트리를 이용했던 멤버 중 일류급 프론트엔드 개발자가 자바스크립트 교육을 하고있다는 것을 인지하게 되었고, 시기가 잘 맞아 바로 프론트엔드 교육을 배울 수 있게 되었습니다. 그곳은 저같은 비전공자가 개발자로 커리어를 전환할 수 있도록 하루에 10시간 이상을 투자하여 단기간에 개발능력을 끌어올려 줄 수 있는 코딩부트캠프였습니다.

어느덧 배운 지 8개월 째가 되었고 마지막 프로젝트를 끝냈습니다. 한 스타트업의 개발자로 취업할 수 있도록 열심히 준비했고 좋은 사람들을 만나 뜻을 나누며 개발자로 커리어를 쌓고 나아가 서비스를 이용하는 유저들에게 행복을 안겨 드리고 싶습니다.


Project & Activity

대외활동
2016-05 ~ 2016-05

혼자 서울에서 부산까지 도보여행

서울 시청을 시작으로 부산 시청까지 경로 내에 있는 각 시,군,구청을 도보로 혼자 여행했다.
총 14박 15일이었고 바퀴달린 모든 것이 부러웠다.
포기하고 싶었던 순간이 3번 가량 있었는데 '이거하나 못 버티면 창업은 어떻게 할까.' 라는
생각을 하며 참고 버텼다.

Work Experience

경력
2015-06 ~ 2017-12

(주)피치트리 컴퍼니

운영

(17-12-31 퇴사)
15년 3월, 젤리스케치라는 스타트업에 웹디자이너로 들어가서 업무를 시작했습니다. 얼마 지나지 않아 사무실이 필요해 사무실을 찾아보다가 마땅한 사무실이 없어 젤리스케치 팀원들과 뜻을 맞춰 직접 '피치트리'라는 코워킹스페이스를 만들었습니다. 코파운더였기에 재정관리를 제외한 거의 모든 분야에 관여하였고 총 3개지점까지 확장했었습니다.
로고네이밍, 로고 및 애플리케이션 제작, 서비스 기획, 인테리어 기획 및 디자인, 콘텐츠 제작, 굿즈 제작, 공간관리, 마케팅, 웹(데스크탑&모바일)디자인, 이벤트 기획, 웹사이트 제작관리 등을 했습니다.
운영하면서 많은 스타트업 기업들을 알게 되었고, 회사 운영에 대한 전반적인 내용들을 익힐 수 있었습니다.

Attitude & Ability

특별한 역량
thumb_up
0
웹디자인
thumb_up
0
커뮤니케이션
thumb_up
0
서비스 기획
thumb_up
0
스타트업 경험자
thumb_up
0
사업기획-개발자-디자이너 사이에 협업경험 풍부
thumb_up
0
창업에대한욕구
thumb_up
0
창의적아이디어
thumb_up
0
공간기획
thumb_up
0
공간 운영
thumb_up
0
책임감이 강함
thumb_up
0
디테일을 중요시 생각

Language

언어
영어 캐주얼 작문이 가능해요.
한국어 현지인 수준의 회화, 현지인 수준의 작문이 가능해요.

Portfolio

포트폴리오
2018.7
Texpeech

Texpeech는 음성 또는 텍스트로만 소통가능한 상황의 사용자를 소통 가능하게 해주는 메신저 앱입니다.

제작배경 -
평소 친구들과 메신저를 사용했을 때, 1명은 채팅만 가능하고(주로 조용한 곳에 있을 경우) 다른 1명은 전화만 가능한(이동중이거나 운전중인 경우) 상황이 종종 있었습니다. 그래서 결국 대화가 중단되고 나중에 동일한 상황이 되었을 때 소통이 됐었는데 이 문제를 해결해보고 싶었습니다.

기능 -
1. 메신저 실시간 대화가 가능합니다.
2. 음성모드 토글 시 상대방이 작성한 대화 및 접속 정보를 음성으로 들을 수 있습니다.
3. 음성모드 토글 시 버튼을 누르고 말을 하고 끝에 ‘전송’이라고 말하면 메시지를 음성으로 전송이 가능하며 상대방은 텍스트로 메시지를 확인할 수 있습니다.
4. 사용자 기기에 있는 주소록에 접근하여 리스트화 할 수 있습니다.
5. 회원가입하여 로그인을 할 수 있습니다.

기술스택 -
React-Native, Firebase Realtime Database, 음성-텍스트 변환 3rd Party React-Native Libraries

힘들었던 점 -
2주라는 제한적인 시간 내에 프로젝트를 완성해야 된다는 점이 프로젝트를 진행하는데 가장 힘들었던 점이었습니다. 그래서 다소 코드가 마음에 들지 않는 부분이 있음에도 불구하고 목표로 했던 핵심기능 구현을 최우선적으로 고려하여 트렐로로 일정을 체크해가며 진행했습니다.
react는 몇 번 사용해 봤었지만, react-native는 프로젝트를 하면서 처음 사용하게 되었습니다. 사용하기 전에는 react와 동일하게 앱을 무리없이 제작할 수 있을 거라 생각했는데, 막상 해보니 사실상 react와 비슷한 형식의 코드로 작성하면 java(Android)나 swift(iOS) 언어로 컴파일해서 제공해주는 정도였습니다. 그래서 어떤 기능을 구현하기 전에 컴파일이 가능한 기능인지를 먼저 알아본 뒤, 그에 맞게 적용해야 했습니다.
웹환경에서 일반적으로 사용하던 firebase도 react-native에 맞게 만들어 놓은 react-native-firebase를 써야 했고 다른 api를 사용할 때에도 react-native 용으로 만들어 놓은 api만 사용할 수 있었습니다. 그리고 xCode에 수동으로 세팅해줘야 하는 번거로움도 있었는데 여러 api를 꽂아보면서 점차 익숙해졌습니다.
웹환경과는 달리 디버깅이 힘들었습니다. 제가 쓴 코드에서 에러가 났을 때는 비교적 쉽게 해결할 수 있었지만 xCode의 세팅 문제였을 때는 어디를 어떻게 고쳐야 할 지 찾기가 어려웠습니다. 또한 상대적으로 웹에 자료도 적어서 구글링이 힘들었습니다.
음성변환 - [STT(Speech To Text), TTS(Text To Speech)] api 간에 충돌이 났을 때 해결방법을 찾는 것이 힘들었습니다. STT 이용 시 목소리 이벤트를 Listen 하는 상황에서는 Text를 음성으로 변환하여 출력하는 것이 불가능했습니다. 그래서 음성을 출력할 때는 STT api를 종료한 뒤에 TTS api를 실행하게끔 하여 문제를 해결했습니다.

아쉬웠던 점 -
시간적인 제약으로 인해 구현하지 못한 기능들이 아쉬웠습니다. 다른 메신저 앱들처럼 주소록에 앱을 이용하는 사람들만 띄워보고 싶었고 가입하지 않은 사람들에게는 메시지를 보내서 가입을 유도하게끔 하고 싶었습니다.

재밌었던 점 -
음성변환기술(Speech-To-Text api)을 이용하여 기기에 말한 목소리가 성공적으로 입력되었을 때 가장 재미를 느꼈습니다. 그리고 제가 사용하는 기기에 직접 쓴 코드로 실제로 사용하는 앱처럼 주소록을 들고 오거나 스피커, 마이크에 접근되는 것이 흥미롭고 재미있었습니다.

https://github.com/redant23/TexpeechIos

2018.8
우리동네 푸드트럭

우리동네 푸드트럭은 서울지역 푸드트럭 공공 api를 기반으로 자신의 위치 주변에 있는 푸드트럭은 물론 서울 내에 등록된 푸드트럭들의 위치와 운영상황을 확인할 수 있는 푸드트럭 플랫폼입니다. 함께 했던 팀원의 아이디어였고, 저는 NodeJS, Express로 Backend 쪽과 CSS를 맡아 진행하였습니다. DB는 MongoDB를 사용했고, Storage는 AWS S3를 사용했습니다. AWS Elastic Beanstalk(이하 EB)를 사용하여 배포하였고 추가적으로 AWS Code Pipeline으로 Github와 EB를 연동하여 배포를 자동화하였습니다.

제작배경 -
바닐라코딩 3기 팀원들과 아이디어 회의를 하던 중, 다른 팀원 분이 말씀하신 아이디어가 실제로 서비스화 되어도 좋겠다고 생각해서 frontend와 backend로 역할을 나누어 프로젝트를 진행하게 되었습니다.

기능 -
1. 이용자의 현재 위치를 기준으로 삼아 특정 거리 내(100M, 500M-기본값, 1KM, 2KM, 4KM)에 있는 푸드트럭을 리스트에 출력할 수 있습니다.
2. 리스트에 있는 아이템을 클릭했을 때, 아이템의 디테일 화면이 나옵니다. 디테일 화면에는 특정 푸드트럭의 메뉴, 정보, 댓글 정보를 확인할 수 있습니다.
3. 디테일 화면에 있는 찾아가기 버튼을 클릭하면 구글 찾아가기가 새 창으로 떠서 찾아갈 수 있습니다.
4. 디테일 화면에서 즐겨찾기를 할 수 있습니다.
4. 한 검색창에서 지역검색, 카테고리, 푸드트럭명 순으로 통합검색을 할 수 있습니다.
5. 페이스북 로그인 api를 사용하여 페이스북 회원가입/로그인을 할 수 있습니다. 로그인 되어 있는 경우, 댓글을 달 수 있고, 평점매기기 및 즐겨찾기를 할 수 있습니다.
6. 내 정보에서 내가 즐겨찾기한 트럭이 리스트에 나옵니다.

역할 -
백엔드 파트를 맡아 진행했습니다.

기술스택(백엔드) -
NodeJS, Express, MongoDB, AWS S3, EB(Elastic Beanstalk), CodePipeline, Github

힘들었던 점 -
바닐라코딩 수업시간에 과제로 잠시 해봤던 백엔드 부분을 프로젝트에서 진행하려니 처음에 작업이 더뎠습니다. 찾아가면서 점차 익숙해졌으나, DB Schema를 여러개 만들어서 참조하여 사용하는 것이 힘들었고, 처음에 DB Schema를 잘 짜는 것이 정말 중요하다는 것을 깨닫게 되었습니다.
MongoDB Query를 처음 이용해봐서 효율적인 코드를 짜는 것이 힘들었습니다. 시간관계상 처음에 짰던 코드를 수정하진 못했으나 공부하는 대로 반영해서 점차 개선된 코드를 작성할 수 있었습니다.
코딩 외적으로 개인프로젝트가 아닌 팀프로젝트로 진행하는 것에 대한 힘든 점이 있었습니다. 프론트엔드와 백엔드 코드를 어떻게 짜느냐에 따라 해당 파트에 대한 비중이 크게 달라지기 때문에 사전 조율을 제대로 하지 않으면 일을 여러번 하게 되는 상황이 생길 수 있었습니다. 그리고 UX적인 부분에서 의견이 다를 경우 맞춰 나가는 과정이 개인프로젝트를 할 때보다 힘들었습니다. 그래서 업무진행 프로세스를 진행할 때에도 트렐로를 통해 일정을 계속 체크해가며 진행했고 한 명이 힘들 때 다른 한 명이 더 분발하는 식으로 큰 문제없이 잘 마무리 할 수 있었습니다.

아쉬웠던 점 -
목적에 맞는 http요청(조회-GET, 생성-POST)을 받고 그에 맞게끔 처리를 해서 응답해주었지만 일정에 쫓겨서 작업을 진행하다 보니 요청에 따른 에러 처리를 다 해주지 못했습니다. 그리고 통합검색에서 Async와 Await을 이용하여 코드를 좀 더 깔끔하게 정리해보고 싶었습니다.
모바일웹으로 진행했는데 front와 지도api는 https로 세팅되어있고 AWS EB는 http로 세팅되어있어 모바일에서는 보안문제로 서버요청이 되지 않아 그 점이 아쉬웠습니다. EB에 유료로 결제하면 https로 세팅이 가능한 걸로 확인이 됐는데 프로젝트라 유료로는 미처 세팅하지 못했습니다.

재밌었던 점 -
프론트엔드와 백엔드를 역할을 나눠 소통하면서 진행하는 것이 힘들긴 했지만 재밌었습니다. 프론트 쪽에서 요청하는대로 자료를 가공해서 제공해 주면서 백엔드가 정확히 어떤 일을 하는 지 알 수 있어 재미있었습니다.
AWS EB에서 배포를 처음 해봤는데 배포할 때마다 코드 파일을 압축해서 올리는 것이 번거로웠습니다. 하지만 AWS Code pipeline을 통해 github에 push만 하면 자동으로 push한 파일을 압축해서 배포할 수 있게 되어 그 부분이 재밌고 편리하다고 느꼈습니다.

https://foodindahood.netlify.com

Design Showcase

비핸스/드리블
Behance

연결된 Behance 계정이 없습니다.

Dribble

연결된 Dribbble 계정이 없습니다.

Tech Stack & Tool

프로그램/언어

Code Archive

깃허브/비트버킷
GitHub
redant23.github.io

redant blog

CSS 0 0

texpeech

App

JavaScript 0 0

texpeech3

Texpeech New Setup

Objective-C 0 0

TexpeechIos

Texpeech for iOS

Objective-C 0 1

uphere-web

JavaScript 0 0

Bitbucket

연결된 Bitbucket 계정이 없습니다.

Team Info.

함께 일하는 팀

기업문화 엿볼 때, 더팀스

로그인

/