병역 특례 소집해제 되면서 퇴사를 하였습니다. 코딩 교육 플랫폼 회사에서 교육생들이 이용하는 메인 플랫폼인 LXP(학습자 경험 플랫폼)와 고용노동부 주관 교육생들의 학습 지원과 학습 과정을 관리하는 플랫폼인 LMS(Learning Management System)의 개발에 참여하였으며, 모두 React로 개발하였습니다. (LMS 소개서: https://hrd-demo.elice.io/notices/98) 1. LXP (메인 학습 플랫폼) - 강의 Course 소개 페이지 및 설정 페이지 일부 개발 - 교육 기간 설정 페이지 내 Stacked bar chart 형태로 설정한 기간 미리보기 View 구현 - 채널톡 커스텀 (고객사가 직접 운영하는 채널톡으로 변경하는 기능) 구현 - 메인 페이지 Course, Track 카드 설정 기능 구현 - 메인 페이지 내 메인 배너, 각 Section 항목들 반응형 View와 설정 기능 개발 - 종료된 화상 강의실 참여자 목록 페이지 반응형 UI 개선 - 내부용 강의 영상 다운로드 기능 - K-Ditigtal Training 기관 전용 필수 스펙 설계 및 개발 (인증 및 기관 설정 관련) - LMS를 통해 접속한 유저 권한별 다른 UI set을 제공하도록 구현 (Header, Footer, Floating Button, Logo, Custom Dialog 등) - 기타 이슈 처리 및 유지보수 2. LMS Gateway (수강생용 학습 게이트웨이) - 회원가입, 로그인, LXP SSO 연결, 마이페이지 기능 구현 - 메인 학습 시스템 Iframe으로 제공 (parent, child 간 통신으로 다음 강의 이동 및 수업 목록 조작 구현) - 사업 별 강의 목록 UI 구현 - 학습 상태별 수강생용 대시보드 페이지 UI 구현 - 학습 제한 기능 개발 (오프라인 수업 시간 내 학습 금지, 순차 학습 기능 등) 3. LMS Admin (수강생 관리용 어드민 페이지) - 수강생 정보, 강사 정보, 관리자 정보를 추가/수정/삭제가 가능한 관리 페이지 개발 - 회차 및 수강생별로 학습 상태, 체류 시간 및 진도율/점수 등의 학습 현황을 확인할 수 있는 대시보드 페이지 개발 - 추가한 과정에 회차를 등록하는 기능, 추가한 회차에 수강생 등록하는 기능 개발 - 검색, 순서 변경, 엑셀을 읽어서 항목들을 일괄 등록하는 기능 구현 - 과목 및 차시 설정 기능, LXP와 설정 항목 동기화 전에 추가, 삭제 상태를 미리볼 수 있는 View 개발 - UI 및 기능들을 사업 유형별로 구별하여 다르게 구현 - 등록한 강의의 컨텐츠를 추가하기 위한 LXP로 이동 및 자동 로그인하는 기능 구현 4. LMS Root (내부 관리용 어드민 페이지) - 기관 (고객사) 추가/수정 페이지 개발 - 권한별 관리자(내부/외부용 관리자) 추가/수정/삭제 페이지 개발 - 자동 로그인 기능 개발 - 텍스트 검색 기능 및 기관 유형별 필터 기능 구현 - LMS Root -> LMS Admin 페이지로 자동 로그인 후 이동 기능 구현 5. 비디오 플레이어 (Azure video player) - 조작부에 Description 추가 - 재생바 부분 시청, 미시청 구간 표기 구현 - 플레이어 내 옵션 변경 기능 6. 본인 인증 및 OTP - PC OTP, Mobile OTP 번호 입력 및 통신 기능 개발 - 휴대폰 본인 인증 및 공동인증서 인증 개발 7. LXP Payment Admin (LXP 결제관련 내부용 어드민 페이지) - 결제 내역, 상품 내역 페이지 개발 - 검색, 환불 처리, USD/KRW 지원, 영수증 확인, 기간별 데이터 다운로드 기능 개발 - 설정 페이지 내 약관 내용 커스텀(markdown) 기능 개발 8. 기타 - node version migration (14 -> 16) - UI Components 일부 컴포넌트 개선 및 UI 변경 - openapi-generator를 통한 LMS용 api client 개발 및 관리 - CI/CD로 배포 자동화

더보기

고객지원팀에서 하던 업무를 보다 효율적으로 줄일 수 있도록 지원(백오피스 개발)하는 업무와 고객사에서 메인으로 쓰고 있는 솔루션의 신규 기능 개발 및 유지보수를 주로 담당하였습니다. 1. 고객사(레스토랑)에서 사용하는 예약 관리 솔루션 웹 (AngularJS, Jquery) 층/룸/테이블의 예약을 일자별로 확인이 가능하며, 매장으로 전화 인입 시, 해당 고객의 정보를 노출하면서 정의해둔 테이블에 예약 접수를 할 수 있는 솔루션 [신규 기능 개발] - 고객 데이터 출력 페이지 테이블 형태로 매장에 방문한 고객들의 정보를 출력해주며, 조회할때마다 어드민에서 설정해둔 조회용 비밀번호를 입력해야 하며, 조회 내역을 보여 줌 - 사용 가이드 기능 기능 개발 모바일앱의 메뉴얼과 같이 실제로 버튼들을 눌러보며 체험해보는 기능 - 메뉴별 트래킹 작업 버튼을 누르거나, 페이지를 이동하거나, 로그인을 할 때, 이를 서버에 기록하는 기능 (통계 페이지에서 페이지별 이동횟수, 렌더링 시간, 로그인 여부, 기능 사용량 등을 확인하는 용도) - 문의하기 기능 문의하기 게시판, 특정 문의건에 대한 재문의(댓글 형태), 문의 게시물 상세보기, 파일 첨부, 젠데스크 API를 통한 답변에 대한 만족도 평가 - 알림 팝업 문의하기 답변 및 신규 공지사항에 대한 알림 (소켓) - 예약 수정 로그 기능 예약건을 수정할때마다 어떠한 항목을 수정했는지를 예약 상세보기 페이지에서 수정건별 테이블 형태로 출력 - 온라인 예약 설정 기능 고객지원팀에서 백오피스를 통해 하던 업무를 줄이고자, 온라인 예약 설정 기능을 솔루션 내에서 고객사들이 직접 설정 할 수 있도록 기능 추가 특정 일자에 해당하는 시간 정책을 가져와서, 해당 일자에 정책 시간을 변경하거나 예약을 받거나 받지않도록 설정하는 기능. - 공지사항 기능 공지사항 리스트 GET, 공지사항 게시물 상세 GET, 메인 페이지의 한줄 공지, 메인 페이지 접속시 신규 공지사항이 있으면 팝업 (소켓), 공지사항 다시 보지 않기 기능 (소켓) 2. 솔루션 어드민 페이지 (AngularJS, Jquery) 위 솔루션에서 사용하는 기능들을 설정하는 어드민 페이지 (백오피스) - 신규 기능 개발 및 유지보수 3. 젠데스크 트리거 및 자동화 활용 - 신규 고객문의 알림 챗봇(라인웍스, 행아웃 등) 연동 - 솔루션 내에서 고객문의 기능 (내역, 문의, 팝업 문의) 추가 4. 특정 법인 고객용 매장 페이지 (Angular(TS)) 기존 B2C 서비스는 특정 매장의 URL을 알고 있어야만 접속이 가능한 형태 (매장별 리스트 페이지가 존재하지 않았음) 였으나,특정 법인 고객이 본인들만의 리스트 형태의 페이지가 필요하다고 하여, 개발 진행 - 기존 예약기능 페이지에 연동 - 매장 정보 페이지 구현 - 영어-한국어 전환 기능 (i18n 적용) - 해외결제 적용 5. DID (Digital Information Display) 웹 페이지 (Angular(TS)) 매장별 로그인하여 당일 설정한 시간대에 맞는 예약건을 페이지별로 노출하는 서비스 카드의 한 항목당 크기를 확인하여, 화면 크기에 맞는 갯수가 노출 - 리스트 분할 모드 - 가로/세로 모드 (이전에는 화면크기에 맞추지 않아서 있었던 모드) - 폰트 크기 조절 - 카드형/리스트형 - 브라우저 크기 조절 시, 갯수 재조정 6. 통계 대시보드 (React) B2B 및 B2C의 예약 통계나 기능별 사용량 등을 대시보드 형태로 개발한 페이지 사용자 기준의 성능 측정 방식에 초점을 맞춰, 카드별로 API를 쪼개서 호출하여 최적화된 페이지가 구현되도록 하였음 - 기획 및 프론트 개발 담당 7. 포인트 충전 페이지 웹 (Angular, 기능 개선) 아이패드에서 숫자 버튼의 입력이 누락되는 이슈 해결 - tab 이벤트와 swipe이벤트 추가 - 클릭과 터치 이펙트 커스텀 디렉티브 추가 - 폰번호에 '-' (대시) 추가하는 로직 디렉티브로 옮기기 (개선),

더보기

병역특례 현역 (대기)로 입사, 보충역 4명 채용을 조건으로 입사 하였으나, 회사 사정이 안 좋아져 퇴사하였음. 담당업무: 본인 포함 3명 개발자로 이루어진 팀의 임시 PM역할을 하였습니다. 대표님께서 '한정된 자원으로 빠르게 정확하게 결과를 만들자'라고 늘 주문하시어 린 스타트업에 대해 이해하게 되었습니다. '어떻게하면 효율적으로 일할 수 있을까'를 늘 고민하여 일하는 방식을 매번 더 좋은 방향으로 개선하고자 노력하게 되었습니다. 아래는 그러한 지침을 통해, 지속적으로 발전하고자 해왔었던 업무들 내용 입니다. 1. 애자일 개발 프로세스 도입 - Jira 및 Confluence 툴을 이용 - 주 단위로 Task 등록하여 예상시간 및 작업시간 기록 - 매일 오전 Scrum 등을 통한 업무 정리 및 일과 파악 - 매주 Sprint 회고를 통한 문제점 파악 및 해결방안 모색 회의 진행 - 회의록, 스터디, 개발하면서 느낀점 및 정리 내용은 모두 자체 Confluence에 기록 2. 버전관리 - Semantic Versioning 2.0 가이드를 따름. * Major, Minor, Patch로 나누어 버전 관리 진행 * 기존 버전과 호환이 되는 신규 기능 개발 시, Minor Update. * 기존 버전과 호환이 되는 bug fix시, Patch Update. - Github에 Minor 업데이트 시 마다, Reademe.md 파일 및 Release에 업데이트 사항 기록 - Jira Task 등록 시, 버전명과 배포일이 설정되있는 버전을 선택하여 등록. (Minor 기준) * 각 버전별로 어떠한 Task를 진행하였는지, 언제 시작하였고 언제 배포하였는지 체크. - Git Commit 시, Minor Update때마다 해당 버전 Tag 등록. (Github Release에 Tag별로 기록하기 위함) - 신규 기능 개발 완료 시, Minor 버전 업데이트, 버그 및 기타기능(자잘한 기능 추가, UI 변경 등)은 3. GitFlow를 통한 git 전략 - master: dev용 서버에 배포할 때 사용. - Feature: develop branch를 base로, branch를 생성하여 진행. - Bugfix: 개발이 끝난 기능에 대해서 bug 발견시 develop 브랜치를 base로, bugfix/티켓번호 branch 생성 - develop: 신규 개발시 base branch로 사용, 팀원과 merge후 bug fix시 base branch로 사용. (github에서 해당 feature명으로 브랜치 pull request) - Release: bug fix가 완료되었을때와 develop 브랜치에서 기능 개발을 완료 후에 QA 및 테스트, 리뷰를 위한 브랜치로 사용. - production: Release단계에서 리뷰 및 QA 작업이 끝난 후 production용 서버에 배포할 때 사용. 4. Study Day 문화 - 금요일 마다 개발관련 본인이 관심있는 내용을 스터디 진행 - 2시간 동안 스터디 및 공부한 내용을 Confluence에 정리. - 각 10분 간, 각자 정리한 내용을 각 팀원들에게 발표하여 공유. 5. Linux 관리 - 각 팀원별 권한 부여 및 팀원별 폴더 생성 - 그룹별 권한 부여 및 팀원 계정별 그룹 배정. - sftp로 원격 접속하여 파일 및 폴더 관리. - disk 공간 관리 및 트래픽 모니터링 (AWS EBS volume Attach하여 리소스 해결 사례, AWS CloudWatch 및 경보 등록으로 트래픽 파악, Linux에서 iftop, iptop, whatap 등의 툴로 접속처 및 트래픽, 시스템 모니터링) - Nginx 및 PM2 이용한 Proxy 관리, Build된 App Serve, 프로세스 관리 6. AWS 인프라 - 비용 절감 사례 (불필요 EC2 삭제, RDS 비용 관련 최소화, 492$ -> 339$) - Reserve Instance 도입을 통해 비용 절감 건의 (약 850$ 절감 가능). - Route 53를 통한 도메인 관리, sub-domain으로 각종 서비스 serve. - RDS: MySQL 엔진 사용, 7일 간의 Snapshot으로 백업 관리 (snapshot을 불필요하게 30일간 backup하고 있었음. -> 7일로 줄이고 추후 필요시, 다른 EC2에 dump 파일을 backup하기로 함) - S3: 각종 이미지 및 기타 리소스 저장 관리로 사용. - AWS Service 파악 및 비용 절감을 위한 AWS 101 Seminar 참석. 7. Jenkins CI & Docker - 편리하게 Dev와 Production 서비스 구분&배포 - github webhook을 통한 git pull 시, 자동 배포. - Dev, Prod별 서비스를 Build. 8. Clean Code 부분 도입 - 스터디 시간에 진행했던 Clean Code를 부분 도입. - 각자 개발한 코드를 보고 변수명 관련하여 Review. - 적절한 변수명에 대한 토의 진행 후, '길어도 친절한 변수명' 규칙을 도입. 9. Dev용 DB 구축 - Dev DB를 구축하기 위한 EC2 생성 - Production용 MySQL 14.09 버전의 DB와 호환을 위해 MySQL 14.14버전으로 설치 - AWS와의 환경과 맞추기 위해 Time Zone을 UTC로 설정. - Production DB에서 테이블 자료만 Dump하여 import. 10. Telegram을 통한 커뮤니케이션 - Dev 혹은 Prod github push 진행 시, commit 내역 Telegram 알림봇 추가 - github에서 Pull Request 및 Issues 등록 시, Telegeram 알림 - PM과 개발팀원 간 커뮤니케이션 수단으로 사용 [개발 팀원으로써 한 업무] 1. 사내 관리 웹사이트 (Admin) - 프로젝트 소개: 고객사별 주문한 내역 및 사용자정보, 주별 식단표 만들기, 카테고리별 가격 관리, 음식 메뉴 관리, 발주 및 식재료 관리 등 개발 진행하였음. - 기존에 여러개의 이름으로 나뉘어져 있는 서비스들을 하나로 통합하는 작업을 주도적으로 진행하여 하나의 Admin 사이트를 구축하였음. - React-Admin 라이브러리 및 Material-UI를 이용하여 개발 - Authentic, Auth, Token 권한을 통해 접근 메뉴 구분(Super Admin, User 구분), - 고객사(Bluehole) 납품용 기능 개발 (주문내역, 사용자정보) - Redux-Form을 통한 여러개의 Field 관리, 자동저장 구현. - 한 페이지에서 Create, Read, Update, Delete 기능을 구현. (Id를 기준하여, id가 없는 Object는 Create, id가 있는 Object는 이전 값과 비교하여 Update) 2. 고객용 주문 페이지 3. Node 및 MySQL(Sequelize)을 통한 API 개발 - 설계 - DB REST한 개발 방식 - 가능한한 모든 기록은 문서화를 하도록 노력하였음. - API 설계 후 프로토콜 정의서를 Swagger라는 tool을 이용하여 기 개발된 API를 기록함. - Postman이라는 API Test tool을 이용하여 편리하게 test 진행. - 위 나열한 Tool 들을 이용하여, 서버 <-> 클라이언트 담당자간 소통. - 가능한한 Rest한 API를 개발할 수 있도록 담당자간 협의 * 복수/단수 표현(Document, Collection), * status code 200,204,400,401,404,500 정의, * 포맷 규칙 정의 (통일되지 않은 response 변수명을 단일화), * URI path 규칙 정의, * 같은 URI라도 용도에 따라 get/post/delete/put로 구분, * pagination 및 filter, sort 기능등을 위한 Header 규칙 정의 4. 기타 - Webstorm을 통한 Change Log와 Jira Ticket 관리(Task 시작,완료) - Jira Ticket name으로 git commit을 하여, git과 Jira Ticket 동기화 되도록 관리

더보기

병역특례 현역 (대기)로 입사 Ionic Framework 이용 (Cordova 엔진) - iOS, Android 대응 AngularJS, TypeScript, HTML5 사용 에콰도르, 사우디아라비아 소재 현대자동차 딜러사에 고객 시승용 앱 납품. 제품 정보: https://www.inventis.co.kr/testdrive-manager/ 고객 시승시 사용하는 앱으로, 현대 글로벌 딜러사에 납품하기 위한 하이브리드 웹앱을 개발하였음. cordova 엔진을 탑재한 ionic 프레임워크로 개발을 진행. 1. 블루투스를 이용하여 차량 목록을 검색하며, 연결이 되면 시승 프로세스가 시작됨 2. gps를 이용하며, 이동하는 위치를 실시간으로 서버에 전송하고, 어드민에서 트래킹할 수 있도록 함 3. 시작 지점과 시승 종료된 지점을 파악할 수 있으며, 시승을 하기 위한 일반적인 '예약 및 예약확인' 이 가능함. 4. 고객이 시승 예약한 날이 다가오면 담당자 계정에는 Notification이 옴. 퇴사 사유: 18년도 병역특례 제도 변경으로 인해 (선착순 접수제 -> 점수제), 본 기업에서는 병역특례로 편입이 어려울 것으로 판단하여 편입 가능성이 높은 기업으로 이직 함.

더보기

ReactJS 및 Webpack을 통한 프론트엔드단 개발 진행 - 사내용 관리자 페이지 중 일부 개발 - 공식 홈페이지 개발 참여 1. Bootstrap Table 및 Material UI, Autocomplete 등의 라이브러리 사용 2. 테이블 검색, 조회, 변경 기능 구현 3. ES6 문법 사용 4. nodeJS, express 을 통한 기본 서버 세팅

더보기

https://github.com/woosuk-oh/Healer 서울대학교 의과대학 납품용 프로젝트 진행 (프로젝트 비용 400만원대) '사진 촬영 및 오디오 플레이를 통한 트라우마 치료앱' 1. Retrofit2 를 통한 네트워크 연동 2. Camera 및 Mediaplayer 구현 3. Activity, Fragment, Dialog 사용 4. Firebase Crashlytics 연동으로 error 및 bug 모니터링

더보기

Drone Here - 드론 공역 정보 및 드론 제품 정보 제공 서비스 (런칭) https://brunch.co.kr/@dronestarting/195 https://play.google.com/store/apps/details?id=com.santamaria.dronehere -> 현재 유지보수를 하고 있지 않아 마켓에서 노출되지 않음. 1. 공역 정보 제공 – GoogleMap 위에 KML layer를 Overlay하는 방식을 통해 관제권, 금지구역, 제한구역, 위험구역 공역 표현 2. SlidingUpPanel를 활용 – Android Support Lib인 SlidingPanel를 커스텀하여 만든 Umano의 SlidingUpPanel 사용하여 UBER와 같이 밑에서 패널을 끌어올리는 UX 방식을 채용 (SlidingUpPanel 최신 버전의 경우, Scroll 중첩 이슈로 인해 ViewPager와 RecyclerView를 조합한 레이아웃 대응이 안되므로, 대응 되도록 fix된 버전과 최신 버전을 직접 Merge하고 Module Import하여 사용하였음) 3. Animaition – 내 현재 위치 버튼, 리뷰작성 버튼 애니메이션 표현 4. RecyclerView – 드론백과 컨텐츠들을 list형태로 표현 5. ViewPager – 비행가이드 및 드론백과의 상세페이지에서 드론 이미지 좌우 스와이프 기능 구현 6. GooglePlace를 통한 장소 검색 (국내로만 한정하여 검색할 수 있도록 구현) 7. ‘일출, 일몰’, ‘자기장’, ‘풍속’ 관련 API를 연동하고 해당 ‘장소’와 비교하여, 비행 가능 여부를 확인하는 ‘4대비행가능 팝업’ 기능을 구현 [기타 참여] 1. 디자인 컨셉 및 색상 결정에 참여: 지도를 사용하는 UBER를 벤치마킹 2. 레이아웃 구성 WireFrame 작업 진행. 3. GUI 초기 디자인 작업에 부분 참여 4. 프로젝트 일정 관리 조율 (PM 보조 역할 수행)

더보기

[인턴 - 교육생으로 참여] Dagym (피트니스 플랫폼 - 안드로이드) - 회원가입, 로그인 기능 개발 공부 - ListView, Item상세페이지, 개발 공부 - 기타 개발 보조 역할 수행 (검색 및 외부 라이브러리 연결에 대한 자료조사)

더보기

- 상록중학교 드론 SW/HW 방학 특강 참여 (7일 단기, 4H 진행) - 흥덕중학교 드론 SW/HW, C언어 기초, 아두이노 심화 과정, 드론 조종 실기 강의 진행 (2016.12) - `드론산업과 미래 직업` 교재 SW/HW 및 앱 관련 부분 집필 참여, 출간 (2017.03) - 인천 대건고 특별 강의 (2017.04 ~ 2017.07, 드론 실기 및 조종 강의 주1회 진행) - 강서청소년수련회관 '아두이노&엔트리를 이용한 RC카 조립 및 코딩' (2017.08)

더보기

- 수제맥주 점주 대상 영업 및 이벤트 진행 업무 - 서울지역 수제맥주 정보 수집 후 분류하여 DB 저장 - 가맹점주 컨택 및 핸들링 업무 진행 (이태원 수제맥주 SKIM** 외 업무협약 체결 및 이벤트 진행)

더보기

1. 전자청약서비스 관련 eform 기획 - 웹/앱 대시보드 스토리보드 - 부가 상품 기획 및 런칭/이벤트 기획/DM발송 - 시장 조사, 경쟁사 조사 - 서비스 이용방법, Q/A 등의 소비자 대상 블로그 관리 - 고객 홍보용 서비스 안내 동영상의 콘티, 영상 편집 및 제작 (애프터이펙트 사용) 2. 근태 관리 서비스 `오피스매니저` 서비스 기획 - 근태 관리 서비스 시장 조사 - 근태 관리 웹 및 앱 서비스 기획 (스토리보드 작성) - 이용약관 작성 - 프로젝트 일정관리 PM 역할 수행

더보기