미리보기

툰게더는 정식 연재는 하늘의 별 따기라는 웹툰 작가 지망생 지인의 말을 듣고 개발하기로 결심하였습니다. 작가들에게 자유로운 연재 환경을 제공하고, 플랫폼과 작가의 상하관계를 전부 없애며,
수익 구조를 개편하기 위한, 웹툰 자유 연재 플랫폼 툰게더 입니다.

[사용 기술]
React, TypeScript, Recoil, Jotai, ReactQuery, StyledComponents

[주요업무 및 담당역할]
Frontend 개발 / 툰게더 작가 서비스 개발

• HeadlessComponent의 Function as Child Pattern 적용 -> 분기 처리 이슈를 효과적으로 해결

• 구글 애널리틱스GA를 이용한 방문자 추적 -> 릴리즈 기간 작가 10여명, 독자 MAU 300명 달성

• CD구축 및 배포 플로우 간소화

• Lighthouse 성능 최적화를 통한 사용자 경험 향상

• 주 사용층인 웹툰 작가를 대상으로 테스트 및 설문으로 피드백 적극 수용

[트러블 슈팅]
1.성능 저하 개선
원인 : 개발을 진행하며 JavaScript 파일의 큰 크기로 인해 성능 저하가 있었습니다.
해결방법 : 코드 스플리팅을 통해 초기 렌더링에 사용되지 않는 컴포넌트를 비동기적으로 로딩되도록 하여 성능 최적화를 진행하였습니다.

2.배포 시간 50% 단축
원인 : 첫 배포를 진행할 때는 테스팅 통과 후
메인 브랜치로 병합되는 구조였습니다. 그러나 병합된 브랜치를 수동으로 배포하는 과정이
불편하게 다가왔습니다.
해결방법 : GitHub Actions를 사용하여 CD 환경을 구축하였습니다. 테스팅이 통과된 후
메인 브랜치로 병합되면 자동으로 배포되도록 설정하여, 개발에서 배포까지의 작업이 효율적으로
진행되었습니다.

[프로젝트로 얻은 경험]
3만명의 청중에게 피드백을 받고 서비스를 개선한 경험
-2023 융합 AI엑스포에 참가하여 툰게더 서비스를 3만명의 청중 앞에서 발표하고, 피드백을받아
개선한 경험이 있습니다.
-해당 서비스로 Smarteen App Challenge 대회에 참여하여 최우수상을 수상하였습니다.
300명의 독자와 10여 명의 작가의 피드백을 수용하며 사용자 경험 향상을 위해 성능 개선 방안에 대해 고민하게 되었습니다
사용자 유치 경험
-사용자를 유치하기 위해, 사용자가 어떤 환경에서 가장 오래 머무르고 몇 명의 사용자가 머무는지에 대한 유저 활동 데이터를 수집하는 것이 필요하다고 생각했습니다. 이를 위해 GA를 사용하여
신규 사용자와 방문자의 활동을 추적하였습니다.
-방문자 추적을 통해 사용자가 시리즈 업로드에서 가장 오래 머문다는 것을 확인했습니다.
이에 따라 시리즈 업로드를 메인 화면에 배치하여 사용자가 서비스에 더 오래 머무를 수 있도록
개선하였습니다
프론트엔드를 주도적으로 이끈 경험
-프론트엔드를 주도적으로 이끌며 프론트엔드 아키텍처를 설계하고, 전체적인 개발을 구현하는데
주도적인 역할을 하였습니다.
-팀원과 함께 코드를 리뷰하고 기능구현에 대한 회의를 하며 협업 능력이 프로젝트 성공의 핵심이라는것을 깨닫게 되었습니다.

대구소프트웨어마이스터고등학교의 학교 및 학생관리를 위해 만들어져 모든 학생 및 선생님에게 편리함을 제공해 줄 수 있는 교내 스마트 스쿨 플랫폼 도담도담 입니다.

[사용 기술]
React, TypeScript, Recoil, ReactQuery, StyledComponents

[주요업무 및 담당역할]
Frontend 개발 / 툰게더 작가 서비스 개발

• React-query의 cacheTime, staleTime 적용으로 과도한 API로직 개선

• CSV 파일 추출 기능 자동화 심야 자습 인원 및 외출 인원 파악 방법 개선

• Sentry를 통한 에러 로깅

• 도담도담 서비스Admin, Teacher, Student 유지 보수 및 개발

• 팀 내 개발 컨벤션 작성 및 코드 리뷰로 커뮤니케이션과 협업 능력 향상

• 팀장으로서 프로젝트 관리, 회의, 개발 분야 들의 협업 주도

[트러블 슈팅]
1.라이브러리 중단으로 인한 대응
원인 : 사용 중이던 달력 라이브러리의 업데이트가 중단되어 혼란을 겪은 적이 있습니다.
그로 인해 다른 라이브러리를 찾거나 대체한 방법을 모색하느라 개발 시간이 늘어나게 되었습니다.
해결방법 : 지속적으로 유지 보수가 용이한 코드를 작성해야겠다는 생각을 하게 되었고, 라이브러리에 대한 의존성을 줄이며 기능을 직접 구현하려고 노력하게 되었습니다.

2.React-Query를 이용한 props drilling 해결
원인 : 수정 및 삭제 동작 이후 최신 데이터를 불러오기 위해 useQuery에서 refetch를 사용하였으나 props로 넘기는 경우가 자주 발생하였습니다.
해결방법 : React Query에서 제공하는 쿼리를 무효화하는 방식인 invalidateQuery를 사용하여 queryKey를 이용한 전역 통신 관리를 통해 이를 해결하였습니다.

[프로젝트로 얻은 경험]
실제 서비스 운영 경험
-도담도담은 매일 200여 명의 학생들과 30여 명의 교원들에게 서비스를 제공하였습니다.
이 과정에서 사용자 피드백을 적극 반영하여 기능을 개선하고, 안정적인 서비스를 유지하기 위해
정기적인 서버 점검과 업데이트를 실시하였습니다.
-도담도담 설문조사를 통해 학생들이 많이 사용하지 않는 기능을 확인하고, 피드백을 통해 요구사항을 반영하였습니다. 이를 통해 데이터 기반으로 서비스를 운영하는 것의 중요성을 깨달았습니다.
부장을 맡아 팀을 이끌어 간 경험
-B1ND 동아리의 팀장을 맡아 팀원들의 역할을 명확히 분담하였습니다. 각자의 강점을 최대한
발휘할 수 있도록 각 분야별 팀장을 선정하고, PM, 회의 내용 정리 등의 여러 직책을 만들어
지원하였습니다.
-정기적인 회의를 통해 프로젝트 진행 상황을 공유하고, 발생하는 문제를 신속히 해결하였습니다.
또한, 1년을 마칠 때는 회고를 통해 팀의 성과와 부족한 점을 분석하고, 차기 프로젝트에 반영할
개선 방안을 도출하였습니다. 이러한 과정을 통해 팀의 협업 능력을 지속적으로 향상시킬 수
있었습니다.
프로젝트 배포 경험
-Filezilla를 사용해 프로젝트를 배포해본 경험을 가지고 있습니다.

학생 구직자들은 회사에 대한 정보를 쉽게 찾을 수 없는 경우가 많습니다. 이럴 때 졸업한 선배들의 리뷰를 보며 회사에 대한 정보를 미리 얻고, 자신이 원하는 복지, 연봉에 대해 알아보고 회사를 고를 수 있는 서비스입니다.

[사용 기술]
React, TypeScript, Recoil , Styled-Components, React-Query, WebPack

[주요업무 및 담당역할]
기획/Front-end 개발

• 회사 등록, 회사 리뷰 등록, 학생 인증 기능 개발
• React Potal을 사용하여 모달 적용으로 부모-자식 간의 리렌더링 방지
• UX 향상을 위해 에셋 및 웹팩 성능 최적화 진행 -> lighthouse 기준 평균 93점 달성
• 팀 내 이슈 등록 및 코드 리뷰 도입 -> 커뮤니케이션 및 협업 시스템 개선

[트러블 슈팅]
1.Chunk 사이즈로 인한 성능 저하
원인 : React-icons 라이브러리를 사용하여 필요한 에셋들을 사용했었습니다. 이 과정에서
아이콘들이 한 모듈 안에 모두 들어가 있어서 Chunk 사이즈가 커지게 되어 성능 저하가 있었습니다.
해결방법 : 해당 문제를 트리쉐이킹을 통해서 필요한 모듈만 가져오도록 개선하였습니다.

[프로젝트로 얻은 경험]
팀원과의 커뮤니케이션 경험
개발 단계에서 기능이 계속 추가되며 1차 릴리즈가 늦춰졌고. 이러한 부분에서 기능 구체화가
부실하다고 느꼈습니다. 해당 이슈는 추가적인 전체 미팅을 통해 기능 구체화를 확실하게 바로잡아
해결하였고,이를 통해 팀원 간의 커뮤니케이션의 중요성에 대해 다시 생각해 보는 계기가 되었습니다.

대구소프트웨어마이스터고등학교 학생들이 GitHub 순위 경쟁을 통하여 개발 공부에 조금 더 재밌게 접근할 수 있게 기획한 서비스입니다.

[사용 기술]
React, TypeScript, Recoil, Styled-components, ReactQuery

[주요업무 및 느낀 점]

• DGIT 서비스의 어드민 기능 개발
• Suspense와 ErrorBoundary를 이용하여 선언적 코딩 -> 초기 렌더링 시간 줄이기 및 사용자 경험 향상
• 교내 OAuth 서비스인 DAuth를 이용하여 사용자들이 서비스에 좀 더 쉽게 접근할 수 있도록 하였고, GitHub 순위 경쟁을 통해 학생들이 개발 공부를 재밌게 할 수 있도록 하였습니다.

대구소프트웨어고등학교의 학생들이 쉽게 기업 채용공고를 확인하고, 선생님들이 채용 공고를 편리하게 게시할 수 있는 교내 스마트 스쿨 플랫폼

[사용 기술]
React, TypeScript, Styledcomponents, ReactQuery, Jotai

[주요업무 및 느낀 점]

• 공고 작성 항목 확장으로 기존의 정보 부족으로 인한 학생들의 지원 망설임 문제 해결
• MFA 아키텍처를 사용하여 선생님의 공고 작성 cms 및 학생 공고지원 recruit 서비스 분리 Nginx를 이용해 배포
• 의존성 정리를 통한 코드 품질 향상

교내 프론트엔드 스터디를 주도 및 진행하며 자바스크립트에 대한 지식을 깊게 쌓기위해 노력했습니다.

대구소프트웨어고등학교의 교내 동아리 B1ND에서 전체 팀장을 맡고 있습니다.

대구소프트웨어마이스터고등학교에서 전문가 특강을 개최하여 강연을 진행하였습니다

2022 ICT 융합 엑스포에서 MenToMen 서비스를 전시 및 시연하였습니다.
2023 ICT 융합 엑스포에서 Rolling 서비스 및 Toongether 서비스를 전시 및 시연하였습니다.

소프트웨어공학 과목에서 A로 교과우수상을 받았습니다

개발자를 꿈꾸는 고등학생을 위한 특성화 4개교 해커톤 7,8,9회 운영진을 맡고 있습니다.

2023 SoftWave에 참가하여 Toongether 프로젝트를 전시 및 설명했습니다

SmarTeenApp 챌린지에서 Toongether 서비스를 개발하여 최우수상을 수상하였습니다.

2022 삼성 주니어 소프트웨어 창작대회에서 MyPlantDiary 서비스를 개발하여 2위 창의상을 수상하였습니다.

ICT 융합 엑스포에서 Toongether, Rolling 프로젝트로 2,3등을 수상했습니다