[첫 번째 협업 경험, 엘박스 X 케이스노트 프로모션 프론트엔드 개발] 개발자 커리어 중 첫 협업 경험이었습니다. PM(프로젝트 매니저), BX(브랜드 경험 디자이너), BE(백엔드 개발자)와 하나의 Squad를 이루어 기획한 프로모션 페이지를 개발했습니다. BX와 Figma를 통해 협업을 진행하였고, 추가되었으면 하는 문구와 프로모션의 시간이 얼마 남지 않았음을 강조하는 타이머 기능을 디자인으로 추가하는 것에 대한 의견을 전달하면 미팅을 통해 PM, BX, BE, FE(본인)이 한 자리에서 의견을 통일시키는 과정이 진행되었습니다. 기술적으로 BE에서 제공해주어야 할 데이터 혹은 값을 사전에 명확히 전달받아 프론트엔드 작업을 진행할 수 있었고, 코드를 미리 작업해놓은 뒤 BX에서 디자인이 완성되면 반응형 페이지에 맞게 디자인을 입혔습니다. 오케스트라의 멋있는 지휘자같은 PM의 지휘 아래에서 모두가 One team이 되는 새로운 경험을 해볼 수 있었습니다. 케이스노트에서는 적은 인원으로 각자의 도메인에서 나홀로 개발을 했다면, 엘박스에서는 최소 필요 인원의 Squad로 구성되어 협업을 통해 제품이 빠르게 완성되는 경험을 해볼 수 있었습니다. 덕분에 다른 직무와의 의사소통을 어려워하지 않게 되었고, 모르는 용어에 대해서는 서로 정의를 내리고 약속하는 습관을 들여 업무를 진행하는데 방해 요소가 되지 않도록 노력할 수 있게 되었습니다.

더보기

[엘박스 M&A] 대한민국 Legal tech 산업에서 MAU 45만명에 달하는 사용자 수 1위, 구글 기준 SEO 점유율 1위를 독차지 하고 있었던 케이스노트가 엘박스와 M&A가 진행되어 Legal tech 산업에서 더 높은 경쟁력을 가질 수 있게 되었습니다. [케이스노트 CI/CD 구축 및 무중단 배포 구축] 케이스노트의 배포는 모두 수동으로 이루어졌습니다. 이 방법은 서버의 프로세스를 재기동 하는 것이 아닌 Kill하는 치명적인 Human error가 발생했었습니다. 그리고 배포를 진행하는 5분 동안 개발자는 다른 생산적인 업무를 진행하지 못하였습니다. 이를 개선시키기 위해 케이스노트의 Github에서 Master 브랜치에 Merge가 감지되면 배포를 자동으로 진행시키고, 개발자는 계속 Assigned issue를 해결할 수 있도록 Bitbucket CI/CD를 구축하였습니다. - Bitbucket pipelines를 이용하여 CI/CD 구축 - Django 배포 시 무중단 서비스 운영을 위하여 Nginx load balancing으로 Django를 이중화하여 무중단 배포 구축(Rolling 배포) [케이스노트 인공지능 Korea Laboratory Accreditation Scheme(KOLAS) 인증] 케이스노트의 TIPS 과제인 KOLAS 인증 취득 프로젝트를 주도하여 성공적으로 마무리하였습니다. TIPS 과제는 투자금을 받는 대신 과제를 수행해야하는데, 해당 과제를 수행할 인력이 없었습니다. 그래서 회사에서 KOLAS 인증에 필요로 하는 인공지능 프로젝트를 진행하고 싶다고 회사에 건의드렸고, 카이스트의 기초기계학습 마이크로디그리와 온라인 강의를 통해 인공지능 업무의 진행을 본격화 했습니다. 케이스노트는 TIPS 투자 목표로 잡은 4가지 과제가 있었습니다. 그 중 3가지 과제(법리 문장 분류 인공지능, 판례 분류 인공지능, 법리 문장 유사도 분류 인공지능)에 해당하는 인공지능 모델 설계, Dataset 구축, Outlier 데이터 제거, 학습까지 모두 전담하여 인공지능 프로젝트(CaseNote Insight 프로젝트)를 진행하였습니다. 일정 수준 이상의 정확도(Accuracy)가 매번 도출되어야 했고, 4가지 인공지능 프로젝트 모두 성공적으로 도출되어 KOLAS 인증을 취득하였습니다. [React Native를 활용한 케이스노트 Android, iOS 앱 개발] 케이스노트를 애용해주시는 고객분들의 피드백 중 앱 출시를 원하는 피드백이 많았습니다. 변호사는 이제 판결문 보따리가 아닌 아이패드를 휴대하고 다니고, 핸드폰으로도 판결문을 쉽게 열람할 수 있는 시대가 되었기에 해당 피드백을 수용하였습니다. 해당 피드백을 React Native로 해결하고자 하였는데, 이유는 자바스크립트를 이용해 앱을 개발할 수 있었다는 점과 기존의 React 컴포넌트를 활용한 개발이 가능하기 때문입니다. 만약 Kotlin을 배우고 Swift를 배워야했다면 앱 개발자를 새로 채용하는 것이 맞았지만, 적은 비용과 시간으로 앱을 개발하기 위해 React Native를 선택했습니다. 그리고 React Native의 WebView로 웹 페이지를 Iframe처럼 감싸고 있는 형태로 개발하면 앱을 바로 출시할 수 있었습니다. 수정 사항 역시 기존의 케이스노트 프론트엔드를 수정하면 앱도 함께 수정된 모습을 즉시 볼 수 있었기에 유지보수 측면에서도 시간을 절약할 수 있었습니다. 그래서 React Native로 개발을 진행하였고, 2주만에 Android, iOS 앱을 출시할 수 있었습니다. [KoBERT 모델을 Fine-tuning 하여 법리 문장 이진분류 인공지능 모델 개발 및 API 개발] 이미 개발된 인공지능 모델을 Fine-tuning한 첫 경험이었습니다. KoBERT 모델은 구글의 BERT 모델에 한국어 데이터셋을 Fine-tuning 시킨 모델입니다. Keras로 직접 모델을 만들었던 경험을 바탕으로 새로운 모델을 만들 수 있었겠지만, 판결문으로 이루어진 한국어 데이터셋을 구축해야한다는 점에서 비용적, 시간적 리소스가 너무나도 컸습니다. 그리고 데이터셋을 구축하고 인공지능 학습에 방해가 되는 Outlier를 제거하는 과정들은 혼자만의 힘으로는 부족하다는 점을 경험했습니다. 그래서 한국어가 학습된 KoBERT 모델을 이용해 법리 문장 분류 모델로 Fine-tuning하고자 했습니다. 실제로 입력한 판결문 속 문장들이 KoBERT의 Tokenizer를 통해 'UNK'(Unknown의 줄임말이며 특정 단어에 대해 학습할 수 없다는 것을 의미) Token이 거의 없다는 검증했습니다. 그래서 One-Hot encoding(0, 1로 라벨링된 데이터셋) 된 데이터셋을 7만건 구축하였고, 모델의 정확도를 91%까지 개선시켜냈습니다. Fine-tuning하는 방법이 회사의 비용을 대폭 감소시킬 수 있는 좋은 방법인 것과 산출물을 빠르게 보여줄 수 있는 방법이라는 것을 알았고, 앞으로 개발할 인공지능에 적극 활용하기로 다짐한 계기가 되었습니다. - 1개월간 법리 문장 데이터셋을 약 7만건 구축 - 판례의 내용을 모두 가져와 각 문단의 내용을 가지고 법리 문장인지 예측하는 모델을 Pre-trained 된 KoBERT 모델을 Fine-tuning - 3번의 데이터셋의 리뷰를 통해 모델의 정확도를 91% 까지 증가 - fastAPI를 이용해 법리 문장 여부를 예측할 수 있도록 API 개발 [Keras를 이용하여 판례 다중분류 인공지능 모델 개발, 학습 및 API 개발] 인공지능 모델을 직접 개발한 첫 경험이었습니다. ChatGPT가 세상에 나온 당시 인공지능 선생님으로 삼아 다중분류 모델을 설계하는데 필요한 기본적인 지식들을 배웠습니다. 그리고 Keras 창시자의 'Deep Learning with Python' 서적을 구매하여 인공지능 기본 이론과 개발 방법에 대해 지식을 익혔습니다. Keras를 이용해 인공지능 모델을 설계하였고 GPU 리소스에 적합한 Batch size를 찾는 과정, Backpropagation 시 발생할 수 있는 Vanishing Gradient(기울기의 소실) 문제, Vanishing Gradient를 해결하기 위해 나온 Activation function(가중치 계산을 위한 활성화 함수) ReLU와 Leaky ReLU, 최적의 가중치 계산을 위한 Gradient Descent(경사하강법) 조정, 다중분류를 위한 예측치를 계산하는 Softmax function, 정확도 계산 과정들을 학습하였습니다. 또, Dense(뇌의 뉴런 같은 레이어)가 많아지면 학습해야하는 데이터셋이 더 많아져야 한다는 것을 배웠습니다. 당시 구축한 데이터셋이 약 11만건의 적은 수여서 Dense가 5단계 이상되면 정확도가 급격하게 낮아졌고, 너무 낮으면 Overfitting(데이터셋으로 학습한 케이스만 정답을 맞출 수 있는 정도)되어 사용할 수 없었습니다. 최종적으로 모델을 설계하고 데이터셋을 구축하여 정확도를 95%까지 증가시켜냈습니다. - 2개월간 학습을 위한 판례 분류 데이터셋을 약 11만건 구축 - 18가지의 판례 분류에 대해 판례의 내용을 가지고 예측하는 모델을 Keras로 개발 - 3번의 데이터셋의 리뷰를 통해 모델의 정확도를 95% 까지 증가 - fastAPI를 이용해 판례를 분류 예측할 수 있도록 API 개발 [Elasticsearch 검색 엔진을 활용하여 주석서 및 대한민국 전체 법률 검색 기능 개발] 처음으로 검색 엔진을 직접 다뤄본 경험이었습니다. 검색 엔진에는 Solr와 Elasticsearch가 있었는데, Elasticsearch를 선택했습니다. 왜냐하면, 개발 생태계로 보았을 때 Elasticsearch가 가장 우세하였고 국내의 기업 기술 블로그 대부분은 Elasticsearch를 사용하고 있어 참고할 수 있는 문서도 많았습니다. 그리고 무엇보다 Solr보다 검색 속도가 비교되지 않을 만큼 빠르다는 점이었습니다. 프론트엔드에서 2초 이상의 기다림이 있을 경우 사용자의 이탈률이 높아진다는 구글 리서치의 연구 결과를 본 적이 있는데, 그런 관점에서 프론트엔드와의 밀접한 관계인 Elasticsearch의 속도는 저에게 중요한 요인으로 작용했습니다. 최종적으로 Elasticsearch 실무서 책을 구매하여 공부하였고, 김종민님의 Elasticsearch 가이드북을 읽으면서 한국사법행정학회의 주석서 검색, 대한민국 법률 검색 기능을 개발하여 배포하였습니다. 하지만 Elasticsearch에는 단점도 존재했습니다. 검색 데이터의 명세를 담은 Index를 한 번 만들면 데이터의 자료형을 수정할 수 없었는데, 이를 위해서 새로운 Index를 만들고 모든 검색 데이터를 다시 Indexing 해야만 했습니다. 그래서 이런 경우가 발생할 것을 대비하여 Elasticsearch로 개발된 서비스가 중단되지 않으면서 검색 결과는 새로운 Index를 바라볼 수 있도록 Elasticsearch에서 제공하는 alias 기능을 이용해 무중단 배포 방법을 정립하였습니다. [2022년 케이스노트 프론트엔드 리뉴얼] 케이스노트의 첫 직원으로 입사하면서 Assign 받은 업무였습니다. 프론트엔드는 고객이 지갑을 열 수 있게 하는 중요한 최전방의 위치에 있다고 생각합니다. 2초 이상 기다릴 수 없는 사용자 경험을 중요시하고 있어 웹 최적화 기법에 관심도 많습니다. 해외, 국내의 페이지를 보면서 사용자 경험에 어떤것이 자연스러운 경험을 가져다 줄 수 있는지에 대해 연구하는 것을 좋아합니다. 그래서 항상 공통 UI에 해당하는 컴포넌트를 설계할 때 Benchmarking과 주변 지인들에게 간단한 검증을 수행합니다. 케이스노트는 딱딱한, 사각형의 각진 모서리의 느낌이 강했고 해당 느낌은 브랜드의 경험이라고 판단해 바꾸지 않으면서 사용자의 경험을 극대화 시켜줄 방법에 집중했습니다. 해당 기준으로 외주 디자이너와 Figma를 통해 협업을 진행하였고 디자인을 완성시켰습니다. 그렇게 Snackbar, Modal, SplitPane 등의 공통 컴포넌트를 개발하였고 2개월간 페이지 개발 후 QA를 마치면서 케이스노트 프론트엔드를 배포했습니다.

더보기

웹 최적화 진행(최대 10초의 Load 시간을 5초까지 감소) - 쇼핑몰의 PNG 이미지를 WEBP 이미지로 변경하는 최적화 진행 - 이미지 변경 및 코드 변경하는 Python 기반의 자동화 프로그램 작성, Notion을 이용해 가이드 작성 - HTTP1.1 프로토콜에서 HTTP2.0 프로토콜로 변경 작업 진행 - TreeShaking 방법을 이용해 불필요한 import 제거하여 번들 크기 감소 Front-end에서 호출하는 대량의 API 트래픽을 줄일 수 있는 CacheManager 모듈 개발 - 자주 바뀌지 않는 서버 상태를 저장할 수 있는 CacheManager 모듈 개발, 한 번 호출한 API의 경우 독립적인 상태 공간에 저장 및 재사용하여 많은 불필요한 트래픽 감소 2022년 아이소이 프론트엔드 리뉴얼 진행

더보기

2021년 9월 14일 금요일과 10월 27일 수요일 두 차례 웹 최적화를 주제로 <착한성분 피부지상주의 천연 기능성 화장품 업체, 아이소이>에서 홈페이지 리뉴얼을 진행하며 웹 최적화에 대해서 발표와 함께 최적화를 진행했습니다. 결과적으로 모바일 아이소이의 이미지와 텍스트가 화면에 모두 렌더링된 시점을 의미하는 Load 시점을 기준으로 최적화 전인 10 초에서 최적화 후 3 초까지로 감축시켜냈습니다.

더보기

(SI)이웃삼촌 웹앱 개발 - 이웃삼촌 Frontend PWA 기반의 Web App개발 (SI)DOUZONE Bizon Amaranth10 회계 및 물류 ERP 개발 - DOUZONE의 Amaranth10 ERP의 회계 및 물류 메뉴 개발 - DOUZONE 사내 자체 UI 라이브러리인 Luna-Orbit을 이용해 React Frontend 개발 - Spring Framework으로 RESTful API 작성 - MariaDB의 Stored Procedure로 회계 및 물류의 액션별 수행 쿼리를 작성 스타트업 유비시스템 셀즈 플랫폼 개발 - 영업 온라인 네트워크 구축을 위한 스타트업 프로젝트에 합류하여 프로젝트명 '셀즈'의 프론트엔드 A부터 Z까지 개발 - DELL 서버 구매 및 '셀즈'를 운영할 네트워크 구성(ESXi로 가상 서버 구성)

더보기