NAVER Boostcamp Web·Mobile 10 Membership — Group Project Weeks 4-7 Retrospective

링크 정보를 불러오는 중...

The project has finally come to an end. At the beginning, I was worried whether we could implement all the planned features in just seven weeks, but somehow, we pulled it off! Because we were running at full speed, I couldn't keep my ambitious plan of writing weekly retrospectives, but I'm recording our footsteps now.

Week 4 — Onboarding Improvement and Data Architecture

🔗 PPT

Onboarding System for Non-Logged-in Users

One teammate suggested a structure similar to Duolingo, where users can experience the service without logging in. Since our project's motto is "Let's solve at least one question easily," everyone agreed. To maintain data for non-logged-in users, we utilized . We didn't just store the number of solved questions; since the main page was a long array format, we saved the position of the last chapter solved so users could easily return to where they left off.

Library-free Auth Integration and Understanding HTTP

I handled the frontend part of the login integration using the standard Fetch API. I separated the handling of Application/JSON and Form Data and wrote the Refresh/Access token logic manually. While this used to take me a week in my first project before Boostcamp, thanks to the experience of implementing HTTP via TCP during the Challenge period, I could work while visualizing how data is carried in headers and bodies.

Insights and Growth

The Joy of Screens Emphasizing Interaction and Animation

While improving the quiz page, I implemented the effect screen for achieving a Streak. Using Framer Motion and Gemini, I realized once again that I enjoy creating screens with strong visual feedback the most, as it's the perfect environment to display my attention to detail.

Week 4 Retrospective

Pros:

• The "last-minute rush to merge" issue from the previous week was resolved through better schedule management.
• I paid great attention to details like Storybook management and calculating user positions.

Cons:

• The feedback received during the demo overlapped with features we were already planning, making it hard to gain new insights. I felt the need to design smarter ways to collect valuable feedback from users.

Week 5 — Infrastructure Advancement and Backend Expansion

🔗 PPT

Review System and Mid/Final Milestone Logic

Our service has "Mid/Final Check" stages inspired by Duolingo. Since these don't have separate questions but randomly combine previous ones, the DB design was challenging. Eventually, we introduced logic in NestJS to generate 'Steps' information separate from the DB and used orderIndex to distinguish milestones.

Advanced Husky and Monitoring System

Based on the experience of almost ruining a demo due to build errors in Week 3, I reinforced Husky. I modified it so that a PR is only possible if it passes Lint, Format, Type Check, and Build.

Additionally, I introduced Loki, Grafana, Promtail, and Prometheus to solve the inconvenience of checking production logs. To succeed in the Docker deployment that failed in my individual sprint, I approached it cautiously by pre-checking the actual server. This process was significant in overcoming my fear of server access.

Email Retention Service: From Design to Implementation

I independently implemented an email notification service to encourage user re-visits. I categorized conditions minutely (e.g., 5 days since joining, 1 week of inactivity) and built an unsubscription system. For security, I issued separate tokens for unsubscribe links so that only authorized users could call the API.

Insights and Growth

Looking at Technology with a Critical Eye

While introducing the ranking system, I analyzed the caching principles of Next.js and Tanstack Query. I vowed to be a developer who thinks critically about how a technology actually helps our service rather than just using what's trendy.

Week 5 Retrospective

Pros:

• Shared an n8n workflow with the team to efficiently generate massive quiz data.
• Gained technical confidence by directly designing and implementing backend areas.

Cons:

• As the implementation pace became tight, we shifted toward a "implement first, explain later" approach for major features like AI Q&A.
• While CodeRabbit made finding bugs easier, I regretted that the time spent reading and discussing teammates' code directly decreased.

Week 6 — Real-time Communication and the Battle with 3D Characters

🔗 PPT

Socket.io Refactoring and Separation of Concerns

I introduced Socket.io for the real-time battle feature. To manage socket events consistently across multiple pages, I designed a dedicated Provider and Hook, encapsulating it so components only need to call the Hook. Although I had to discard my initial code and start over due to continuous errors during merging, we ended up with a scalable structure.

Trials and Errors with 3D Characters

I spent an entire day just putting the character worked on in Blender onto the web. Texture nodes were complex, requiring me to bake them and reconnect images, and I faced issues with Rigify bones not being controlled correctly in Three.js. I realized too late that Rigified bones cannot be controlled directly in that environment. I learned the importance of step-by-step debugging to find the root cause.

Profile Implementation and Timezone Correction

While implementing the profile feature showing learning records, I faced timezone issues. I improved this by including the user's local timezone in the HTTP headers. The server now calculates and returns the correct time based on that header, making the system more robust.

Insights and Growth

Establishing Reference Points for Debugging

I realized how important it is to set a standard to determine whether a problem in the 3D pipeline lies in the model, export settings, or the Three.js code.

Week 6 Retrospective

Pros:

• Even though the complex socket logic was split among team members, it worked flawlessly during the final merge.
• Realized a clean separation of concerns by refactoring socket communication.

Cons:

• Prolonged character work caused delays in syncing with teammates.
• As physical stamina depleted toward the end, the immediacy of communication dropped. I regretted not having the chance to do pair programming for the socket logic.

Week 7 — Optimization and the Finale

🔗 PPT

Frontend Optimization and Character Interaction

In the final week, I focused on optimization. I applied Gzip and Brotli for resource compression and used subset fonts to drastically reduce size. For the 3D character, I used a hybrid method: Shape Keys (expressions) in Three.js and body motions in Blender. I added user interactions like falling motions upon clicking and eye-tracking to complete the "Wow Point."

Matching Quiz UX Improvement and SVG Rendering

I received feedback that it was difficult to see selection relationships in the matching quiz. I improved the UX significantly by providing direct visual connections via SVG rendering when users select options, ensuring they feel confident in their choices.

Reflections on Testing and Storybook

It's a big regret that test codes weren't properly managed after the mid-point. Tests weren't updated after feature improvements, turning them into "formal passes" just for the build. In the next project, I want to adopt TDD from the design stage.

Insights and Growth

Thirst for Technical Depth

While feature implementation was perfect, I was disappointed that feedback focused mostly on visual elements. I want to actively create opportunities for "Deep Talks" about core logic and backend architecture in my next project.

Week 7 Retrospective

Pros:

• Created a unique result by melting my strengths into 3D characters and interactions.
• Successfully implemented all targeted features and completed a stable demo.

Cons:

• Regret not analyzing actual operational data deeply despite building infrastructure monitoring.
• Working on characters until the last minute meant I was rushed in inserting them into the project.
• Despite effort on responsive layouts, I couldn't solve the optimization issue where 3D models load slowly on mobile.

• #Naver Boostcamp
• #Retrospect
• #Three.js
• #Performance
• #React
• #WebSocket