공통 프로젝트 후기 | 프론트엔드 | Kotlin

공통 프로젝트를 진행하면서 느낀 점과 경험을 정리해보고자 합니다!

 

“다양한 디지털 콘텐츠를 한 곳에 저장하고 관리할 수 있다면 얼마나 편리할까?”
이 질문에서 출발한 MODA 프로젝트는 개발 기간 7주 동안 총 6명이 함께 기획하고 개발한 서비스입니다.

 

저는 프론트엔드 리드로서 UI 설계와 오버레이 기능 개발을 담당하며 사용자 경험(UX)을 최우선으로 고려했습니다.

 

아래에서는 프로젝트의 개요와 주요 기능, 기술적 고민과 해결 과정, 그리고 느낀 점을 중심으로 이번 경험을 공유하고자 합니다.

 

---

 

1. 프로젝트 개요

MODA : 직접 만드는 나만의 포털사이트

 

📅 개발 기간 : 2025.01.06 ~ 2025.02.21 (7주)

👪 참여 인원 : 총 6인 (백엔드 3명, 풀스택 1명, 프론트엔드 2명)

🏆 결과 : 공통 프로젝트 최우수상 수상

 

 

영상 포트폴리오 일부와 함께 서비스에 대해 간단히 살펴보겠습니다 !

 

 

저희 MODA는 다양한 디지털 콘텐츠(블로그, 동영상, 뉴스, 이미지)를 한 곳에 저장하고 관리할 수 있는 서비스를 목표로 개발되었습니다. 오버레이와 제스처 방식을 통해 간편하고 빠른 저장 기능을 제공하고, AI 기반의 자동 분류와 요약 기능으로 효율적인 콘텐츠 관리가 가능하도록 설계했습니다.

 

 

---

2. 주요 기능 소개

저희는 다음 3가지에 대해 프로젝트가 끝날 기간까지 늘 고민하며 기획하고 개발하고자 노력했습니다.

 

 

 

2-1. 간편한 저장 기능

기존의 저장 방식은 "더 보기 버튼 → 공유하기 버튼 → 카카오톡 나에게 보내기 버튼"처럼 복잡한 단계를 거쳐야 했습니다. 이로 인해 저장 속도가 느리고 사용자 이탈이 우려되었고, 이를 해결하기 위해 오버레이와 제스처 방식을 도입해 저장 속도를 3배 이상 향상시켰습니다.

 

 

2-2. 자동 분류 및 검색 기능

저장된 콘텐츠가 많아질수록 이를 정리하고 검색하는 데 어려움이 있었습니다.

이를 해결하기 위해 자동 분류와 키워드 검색 기능을 도입해 카테고리별로 정리하고 정확한 검색이 가능하도록 했습니다.

 

2-3. AI 요약 및 키워드 추출 기능

긴 텍스트의 경우 사용자가 필요한 정보를 빠르게 파악하기 어려웠습니다.

이를 해결하기 위해 AI 요약 기능을 통해 간결하게 요약하고, 키워드 하이라이팅을 통해 중요한 정보를 쉽게 파악할 수 있도록 했습니다.

 

 

---

3. 역할 및 경험 정리

이번 프로젝트에서 저는 프론트엔드 리드를 맡아 UI 설계와 오버레이 기능 개발을 담당했습니다.

사용자 경험을 최우선으로 고려해 저장 속도와 UI 일관성을 개선하고, 안정적인 비동기 처리를 통해 성능 최적화를 목표로 했습니다. 아래에서는 제가 맡았던 주요 역할과 해결 과정을 공유하고자 합니다.

 

3-1. 링크 공유 시 흰 화면 문제 해결

문제

공유 기능 사용 시 URL을 저장할 때 흰 화면이 오래 나타나는 현상이 있었습니다. 이는 ShareReceiverActivity에서 메인 스레드가 네트워크 작업을 처리하며 발생한 지연이 원인이었습니다.

 

해결 과정

WorkManager 사용 : URL 저장을 백그라운드에서 처리해 메인 스레드의 부담을 줄였습니다.

투명 배경 적용 : ShareReceiverActivity에 투명 배경을 적용해 흰 화면이 나타나지 않도록 했습니다.

OkHttpClient 타임아웃 설정 : 네트워크 상태가 불안정할 때도 저장이 안정적으로 이루어지도록 타임아웃 옵션을 추가했습니다.

 

결과

흰 화면 없이 즉시 원래 앱으로 복귀할 수 있게 되어 사용자 경험이 크게 향상되었습니다.

이를 통해 비동기 처리의 중요성과 안정적인 백그라운드 작업의 필요성을 깊이 체감할 수 있었습니다.

 

3-2. 오버레이 기능 개발

문제

기존의 저장 방식은 3번 이상의 클릭이 필요해 사용자가 불편함을 느꼈습니다. 이에 오버레이라는 기능을 개발하고자 했지만, Vue나 React는 안드로이드 접근성 권한 문제로 오버레이 구현이 불가능했습니다.

 

해결 과정

Kotlin 선택 : 접근성 권한 문제를 해결하기 위해 Kotlin을 선택했습니다.

안드로이드 접근성 서비스 활용 : 접근성 서비스를 통해 웹사이트에서 URL을 즉시 감지하고 저장할 수 있도록 구현했습니다.

Android Overlay Window : 화면 전환 없이 2번의 터치만으로 저장이 가능하도록 개선했습니다.

코루틴 사용 : 저장 시 발생하는 지연을 줄이고, 비동기 처리를 통해 성능을 최적화했습니다.

 

결과

저장 속도가 기존 대비 3배 이상 빨라졌고, 저장 기능을 더욱 직관적이고 간편하게 사용할 수 있게 되었습니다.

이 과정에서 Kotlin의 간결한 문법과 비동기 처리의 효율성을 체감할 수 있었습니다.

 

3-3. 구조 설계 및 API 연동

문제

프로젝트가 커지면서 유지보수성과 확장성을 고려한 일관된 폴더 구조가 필요했습니다.

 

해결 과정

MVVM 패턴을 기반으로 폴더를 구성해 데이터, UI, 비즈니스 로직을 분리했습니다.

Retrofit + 코루틴 : 콜백 없이 간결하게 비동기 API 호출을 처리했습니다.

코틀린 구조 가이드 및 API 연동 가이드를 작성해 팀원들과 공유해 일관성을 유지했습니다.

 

결과

일관된 폴더 구조와 API 연동 가이드 덕분에 유지보수 시간 단축 및 팀원 간 원활한 협업이 가능했습니다.

비동기 처리를 통해 성능이 크게 향상되었습니다.

복잡한 API 연동 과정에서도 코드 가독성과 유지보수성을 확보할 수 있었습니다.

 

3-4. 콘텐츠 리스트, 상세 페이지

문제

긴 텍스트나 다양한 콘텐츠를 효율적으로 보여줄 UI가 필요했습니다.

다크모드와 키워드 하이라이트 기능이 필요했으며, 스크롤 시 발생하는 로딩 지연 문제를 해결해야 했습니다.

 

해결 과정

Material Design을 기반으로 일관성 있는 UI를 설계했습니다.

다크모드 : 사용자의 선호를 반영해 눈의 피로를 줄이고, 라이트/다크 모드를 지원했습니다.

코루틴 : 스크롤 시 데이터를 비동기 로딩해 로딩 속도를 최적화했습니다.

 

결과

페이지 로딩 속도가 개선되었고, 다크모드와 키워드 하이라이트 기능 덕분에 콘텐츠 소비가 더욱 원활해졌습니다.

스크롤 시 끊김 없이 부드럽게 데이터를 로딩할 수 있었습니다.

 

---

4. 개발 환경

Frontend	Kotlin
Backend	SpringBoot, FastAPI, JPA
DB	PostgreSQL, Redis, ElasticSearch
Infra	Amazon EC2, Amazon S3, Docker, Jenkins
IDE	IntelliJ, Android Studio
Management	Gitlab, Jira, Figma, Notion, MatterMost

 

4-1. 기술 선택 과정

고민의 시작

아이디어 기획 단계에서 오버레이 기능을 구현하기 위해서는 접근성 권한 문제를 해결해야 했습니다.
이를 해결하기 위해 아래 두 가지 방안을 고민했습니다.

 

1. 코틀린(Kotlin)으로 프론트엔드를 개발

- 문제 : 팀원 모두가 Kotlin을 포함한 네이티브 앱 개발에 대해 경험이 전혀 없었다.

 

2. React + PWA로 개발 후 네이티브 앱으로 감싸기(Capacitor 또는 Cordova 사용 / 웹 개발 이후 Kotlin 연동 방식)

- 문제 : React는 익숙했지만 네이티브 앱 관련 추가 학습이 필요했다.

 

고민의 과정

프론트엔드 리드로써, 프로젝트 기한이 3주밖에 남지 않은 상태에서 React개발이 좀 더 익숙하기 때문에 2번 방향을 더 현실적인 선택이라 생각했습니다. 주말 동안 여러 방면을 고민해 본 결과 접근성 권한과 오버레이 기능을 안정적으로 구현할 수 있는 Kotlin을 선택하게 되었습니다.

 

최종 선택 : Kotlin

- 접근성 권한 문제 해결 : Android에서 접근성 권한을 효율적으로 활용할 수 있는 Kotlin의 장점

- 생산성과 간결한 문법 : Kotlin의 타입 안정성과 간결한 문법 덕분에 빠른 개발 가능
- 네이티브 환경에서의 퍼포먼스 : 네이티브와 유사한 성능을 제공해 로딩 속도와 사용자 경험이 크게 향상

 

결론

상황에 맞는 기술을 선택해 서비스의 사용자 경험을 최적화하는 것이 중요하다는 것을 체감하였습니다. 이를 통해 기술 스택의 유연한 선택과 빠른 학습 능력이 개발자에게 얼마나 중요한지 다시 한번 깨달았습니다.

 

 

---

5. 회고 및 느낀 점

5-1. 새로운 기술에 대한 두려움 극복

이번 프로젝트는 저에게 새로운 기술을 빠르게 익히고 적용해야 하는 도전이었습니다. 특히, Kotlin과 오버레이 기술은 모두 처음 다루는 것이었기에 초기에는 막막함이 컸습니다. 그러나 공식 문서와 여러 강의들을 보며 독학하며, GitHub에서 유사 프로젝트를 분석해 나가면서 차츰 자신감을 얻었습니다.
Jira를 활용해 이슈를 세분화하고, 팀원들과 코드 리뷰와 페어 프로그래밍을 통해 협업하면서 효율적인 일정 관리와 문제 해결 능력도 크게 향상되었습니다. 결국, 이러한 노력 덕분에 공통 프로젝트 최우수상이라는 좋은 결과를 얻을 수 있었습니다.

 

5-2. 기술적 성장과 배움

이번 프로젝트를 통해 특히 비동기 처리의 중요성과 안정적인 백그라운드 작업의 필요성을 느꼈습니다.
WorkManager와 코루틴을 활용한 백그라운드 작업으로 메인 스레드의 부담을 줄여 UI의 반응성을 높였고, Android Accessibility Service를 통해 접근성 문제를 해결하며 더욱 원활한 사용자 경험을 제공할 수 있었습니다.
또한, 서비스 워커와 캐싱 전략을 통해 네트워크 의존도를 줄이고 빠른 로딩을 구현하며 웹 성능 최적화에 대한 이해도도 높아졌습니다.

 

5-3. 협업 경험과 느낀 점

이번 프로젝트에서는 협업의 중요성을 다시 한번 느낄 수 있었습니다. 프로젝트를 진행하면서 Gitlab, Jira, Notion을 통해 체계적으로 협업하고, 매일 아침 스탠딩 데일리 스크럼을 통해 빠르게 일정을 공유했습니다. 이를 통해 기술적 역량뿐만 아니라 소통 능력도 함께 성장할 수 있었습니다.

 

5-4. 사용자 경험을 고려한 개발의 중요성

이번 프로젝트에서 가장 기억에 남는 부분은 사용자 경험(UX)을 최우선으로 고려한 개발이었습니다.
기존의 복잡한 저장 방식을 간소화하고, 사용자가 불편 없이 콘텐츠를 즐길 수 있도록 지속적으로 개선해 나갔습니다.

특히, 다크모드 지원과 오버레이 기능을 통해 사용자 만족도 향상하고자 노력했습니다. 이를 통해 단순히 기능을 구현하는 것이 아닌, 사용자가 편하게 느낄 수 있는 UX가 얼마나 중요한지를 깊이 깨달았습니다.

 

5-5. 앞으로의 방향성

이번 프로젝트를 통해 기술 스택의 확장과 사용자 경험을 개선하기 위한 다양한 방법들을 배웠습니다.
또한, 데이터 기반의 서비스 기획과 사용자 불편을 해결하는 접근을 계속해서 고민하고 적용해 나갈 계획입니다.
이처럼 상황에 맞는 기술을 능숙하게 활용해 사용자 경험을 극대화하는 개발자가 되고자 합니다 !!

---

마무리하며

이번 프로젝트를 통해 기술적 역량뿐만 아니라 협업과 사용자 경험을 고려한 서비스 기획의 중요성을 깊이 배울 수 있었습니다. 이번 경험을 바탕으로 앞으로 진행될 특화 프로젝트, 자율 프로젝트에서도 상황에 맞는 기술을 적극적으로 학습하고 적용해 더 나은 서비스를 개발해 나가고자 합니다 ~