미리보기

Web 3.0 기반 블록체인의 기술을 활용한 플랫폼 수익을 공유형 sns HABL 앱 개발 및 유지보수하였습니다.


이외의 이더리움 기반 스테이킹 서비스 AOB Pro, Netflix 와 협약 개발한 제작예산관리 프로그램 ProduckFi, 신한투자증권 & 세무법인 아림과 협약 개발한 해외주식 양도세 신고대행서비스 프로그램 개발 및 유지보수하였습니다.

typescript, tailwind, styled-component,react CRA, react-query, react-hook-form, recoil, styled-component, JAVA, spring-boot, mybatis, mysql, GCP, PdfBox


맡은 역할:


사용자: pdf 파일 등록 기능 개발 및 처리 완료된 신고서 다운로드 및 뷰어 기능 개발 (웹에서 접속했을 경우 등록 완료 후 신한 쪽에 postMessage 전송 / 신한 SOL앱 웹뷰로 접속했을 경우 등록 완료 후 신한쪽에 trigger 전달)


관리자: ftp 파일 서버로 올린 pdf 파일 문서 사용자와 자동 매칭, 매칭 완료 후 이메일/문자 자동 발송, 엑셀 업로드 및 다운로드, 테이블 필터 기능, html 에디터 이용한 이메일 본문 수정 기능


: react-query 를 도입하여 코드량을 감소시키고 캐싱 처리해주었습니다. react-hook-form 을 사용해 불필요한 렌더링을 줄여주고 데이터 get set을 보다 쉽게 처리해주었습니다.
또한 file input 을 이용하여 신고서 pdf 파일을 업로드하여 신청자와 매칭하는 기능이 있었습니다. 많은 양의 pdf 업로드를 할 경우 api 를 통하여 pdf 문서의 텍스트를 읽어 db 내용과 일치하는지 확인해야 하고, 파일 업로드 서버에 따로 파일을 올려야 하는 번거로움이 있었습니다. 이를 해결하기 위해 파일을 올려둘 수 있는 ftp 서버를 따로 만들고, 관리자쪽에서 업로드를 요청하면 해당 서버의 파일을 불러와 db와 매칭시켜 저장할 수 있도록 개선했습니다. 이로인해 파일 매칭 시간이 50% 줄게 되었습니다.


링크 : https://user.yangjinee.com/ (신한 SOL증권 MTS, HTS, 신한투자증권 홈페이지 통해서 접속 가능)

기술 : bootstrap, metarialUI, react-CRA, redux, i18n, JAVA, spring-boot, mybatis, mysql, GCP


하이블럭스 메인 앱 HABL 관리자 프로그램


맡은 역할: reCAPTCHA v2 기능 추가, google OTP 인증, 사용자 정보(이름, 이메일, 지갑주소, 거래내역 등) 암호화, 비밀번호 오류 횟수 제한, 쿼리 수정, api 수정, 화면 수정 등


: isms 심사를 위한 관리자 ip 접속 제한, 사용자 정보 마스킹 처리 등 보안 강화를 위한 추가 기능 개발하였습니다. 시큐어코딩 가이드를 참고하여 개발하였습니다.

기술: typescript, react-native-CLI, recoil, i18n, JAVA, spring-boot, mybatis, mysql, GCP, Firebase


하이블럭스 메인 앱인 이더리움 블록체인 기반 sns 플랫폼입니다. 버전 업그레이드 & 보안강화 & 기능 추가로 인해 리뉴얼 작업하였습니다.


맡은 역할: 화면 설계 변경으로 인한 화면 작업(퍼블리싱, Animate 처리) / 가상자산 사업자 라이센스 취득 목적 보안 기능 추가 (생체인식, captcha, sns로그인 시 본인인증 로직 추가), 휴면해제(Pass인증), google OTP 연동 등


: 기존 HABL 앱 v1.0 은 오랜기간에 걸쳐 추가된 기능이 많아 지저분하게 덧붙여진 로직이 많았습니다. 따라서 리뉴얼 시 재사용성과 확장성을 최대한 고려해 만들었습니다. 또한 에러가 발생할 수 있는 범위가 방대한 react native 앱 오류를 해결하기 위해 native 앱 생태계를 알 수 있는데 많은 도움이 되었습니다.


링크 : https://apps.apple.com/us/app/habl/id1478995676 , https://play.google.com/store/apps/details?id=io.hiblocks.app&hl=ko&gl=US&pli=1

기술: react-CRA, redux, JAVA , spring boot, mybatis, mysql, GCP , realgrid2


맡은 역할: 요구사항 추가 개발(DB 설계, 쿼리 작성, 컴포넌트 설계, 화면 개발 등)


Netflix와 협약 체결하여 개발한 콘텐츠 제작예산 관리 솔루션입니다.
(제작사와 투자사 사이에 구글 독스, 카카오톡, 엑셀, 수기 등으로 분산된 소통 채널을 실시간으로 동기화하고 처리하여 시간이나 인력 등 투입 비용을 절감한 예산관리 프로그램입니다.)


: 셀 병합, 셀 숨김, 검색기능, 검색결과 내역 상단으로 이동, 선택 셀 합계, 단축키, 등 엑셀과 똑같은 기능이 접속중인 사용자들에게 realtime 으로 보여질 수 있는 기능 개발하였습니다. 엑셀과 똑같은 혹은 더욱 추가된 기능 개발을 위해 realgrid2를 커스텀하여 사용하였고 소켓으로 접속자들 정보를 공유할 수 있게 노출하였습니다.


링크 : https://produckfi.com/home

기술 : react-CRA, recoil, tailwind, JAVA, spring-boot, mybatis, mysql, GCP, sumsub


맡은 역할 : 로그인, 스테이킹, 대시보드, 마이페이지, 입출금 기록


이더리움 기반 스테이킹 서비스
(스테이킹이란? 본인이 가지고 있는 암호화폐의 일정량을 맡겨 네트워크 안정성을 보장해주고 이자를 받는 방식의 서비스입니다. 일반적으로 은행에서 예/적금 하는 것보다 이율이 높고 이더리움 가격이 상승하게 되면 더 많은 이득을 볼 수 있는 장점이 있습니다.)


: 공통으로 사용하는 컴포넌트들을 모듈화 하여 재사용할 수 있도록 처리하였습니다. 코드를 최대한 간결하고 깔끔하게 구현했습니다. 예치 자산, 만기 수익률, 연 이율 및 이자 계산 작업 하였습니다. sumsub KYC 인증 솔루션 사용해 얼굴 인증 및 신분증 인증 구현하였습니다.


링크 : https://aobpro.com/

기술 : react-CRA, module-css, firebase(analytics), GCP, i18n, sanity


맡은역할: 웹/모바일 반응형, 다국어 처리, css Animate, instagram api, sanity api


: 입사 후 처음으로 담당한 프로젝트였습니다. seo가 필요할 것 같아 next.js 를 사용하고 싶었지만 러닝커브가 길 것 같아 react-helmet을 사용하여 검색엔진 최적화 처리해주었습니다. 태블릿과 모바일의 경우 단위로 vw를 사용하여 화면 크기가 줄어들 때 레이아웃도 같은 비율로 줄어들게 처리하였습니다. 이미지 자원의 크기가 커서 초기 로딩 시간이 오래걸리는 문제를 webP 이미지 포맷을 통하여 이미지 용량을 줄이고 이미지 지연 로딩을 이용하여 0.5s 에서 0.1s 로 줄였습니다. 애니메이션이 들어간 mian 화면 같은 경우 버벅거리는 문제가 있어 javascript로 된 코드를 css 구현하였습니다. 현재도 담당자로 유지/보수 중입니다.


링크 : https://hiblocks.io , https://habl.io , https://hablnft.com