Feature Expansion: Rapidly Adding User Features with AI

- 4월 08, 2026

When "I Could Build This in a Day" Actually Takes a Day

How long does it usually take to add a single feature? Plan it, design it, implement it, test it. On a company project, you'd budget at least a week. But with AI collaboration, the gut feeling of "I could do this in a day" genuinely becomes reality within a day.

This part covers six features I added to Tarot Master: reading history, streaks, social sharing, PDF reports, Instagram story cards, and a free-choice mode. Each is an independent feature, but all share a common goal: making users stay longer and come back more often.

Reading History: A "Tarot Journal" Powered by localStorage

Sometimes you want to revisit a past reading. "What was that reading I got last week?" This need is perfectly served by a reading history feature.

I built it entirely with localStorage, no database required. In a side project, a database dramatically increases maintenance cost and complexity. You need a server, user authentication, and privacy concerns follow. localStorage is the simplest way to store data in the browser. No server, no auth, data stays only on the user's device.

Each reading result is serialized to JSON and stored, then displayed chronologically on a history page. When I told Claude "I want a reading history feature using localStorage. It needs to store date, reading type, drawn cards, and interpretation text," the data structure design and storage/retrieval logic came back quickly.

The limitations are obvious. Clearing browser cache deletes everything. Cross-device sync doesn't exist. But for a side project, this is sufficient. It delivers the value of a "personal tarot journal" while keeping technical complexity to an absolute minimum. A "good enough" solution beats a "perfect" solution in side project contexts more often than not.

Streaks: Gamification for Retention

If you've used Duolingo, you understand the power of streaks. "7-day study streak" -- that small number creates a surprisingly compelling reason to open the app today. I applied this mechanism to Tarot Master.

Complete at least one reading per day and the streak increments. Skip a day and it resets. Simple rules, but the effect is real. A small sense of achievement like "7 consecutive days of readings" brings users back daily.

Implementation stores the last reading date and current streak count in localStorage. On each app launch, it compares today's date with the last reading date and updates the streak. The code is straightforward, but date comparison logic has subtle traps: midnight boundary handling, timezone issues. I worked through the edge cases one by one with Claude's help.

The streak display UI mattered too. Just showing a bare number is far less motivating than pairing it with a flame icon and a message like "Day 5 streak." Gamification's effectiveness lies not in the mechanics but in the presentation. This work reinforced that lesson.

Wanting to share "today's tarot result" with a friend is a natural impulse. Without a share button, users have to screenshot and send manually. If it's inconvenient, they won't bother. A share button eliminates that friction.

I built a ShareButtons component with buttons for KakaoTalk (dominant in South Korea), Twitter, Facebook, and URL copy. Each platform has its own share API format, which is tedious, but asking AI for each platform's share URL schema sped things up considerably.

The share preview matters too. Open Graph meta tags ensure that shared links display a title like "Today's Tarot: Wheel of Fortune" along with the card image. That preview sparks "What's this?" curiosity and drives clicks.

On mobile, I also leveraged the Web Share API (navigator.share). On supporting browsers, this opens the OS-native share sheet for a more seamless experience. On unsupported environments, it falls back to the custom share buttons.

PDF Reports: Keepsake Readings

"Can I save this result as a file?" Anticipating this request, I built a PDF report feature. Combining jspdf with html2canvas turns the on-screen reading result into a downloadable PDF.

The principle is simple. html2canvas captures a DOM element as an image, and jspdf inserts that image into a PDF. The result is a clean report with card images, interpretation text, and reading date.

A Korean font issue surfaced during implementation. jspdf's default fonts only support Latin characters, so Korean text rendered as gibberish. The fix was embedding a custom font as Base64, a process that was more involved than expected. Converting the font file to Base64 and registering it with jspdf was something I solved step-by-step with Claude. For English-language users, similar issues can arise with special characters or non-Latin scripts, so custom font embedding is a broadly useful technique.

PDF quality optimization was also necessary. Adjusting html2canvas's scale option for higher resolution, fine-tuning page dimensions and margins so the output looks clean even when printed. Making "a result worth saving" is a different level of work from simply making a feature function.

If social sharing is text-link-centric, Instagram story cards are visual sharing. This feature generates a 9:16 aspect ratio image optimized for posting to Instagram Stories.

The app renders a card-style image on Tarot Master's dark navy background with the drawn card and key interpretation. Using html2canvas, it captures a hidden DOM element and triggers an image download. Users can upload the image directly to Instagram Stories.

Design was the make-or-break factor. The shared image itself needs to spark "What app is this?" curiosity. I placed the card image prominently in the center with the app name and URL at the bottom. A natural breadcrumb for viewers to find the app.

When I told Claude "I want a component that generates a shareable image in Instagram Story dimensions," the basic structure came together fast: 9:16 ratio calculation, canvas rendering, image download trigger. I only needed to fine-tune the visual design myself.

Free-Choice Mode: Picking Your Own Card from 78

Previously, cards were drawn randomly. But in physical tarot, choosing the card that "calls to you" from a spread is a meaningful part of the ritual. Free-choice mode brings that experience to digital.

All 78 card backs are displayed on screen. The user taps to select cards directly, and each chosen card flips to reveal its result. The outcome might be the same as a random draw, but the act of "I chose this myself" transforms engagement with the reading.

Displaying 78 cards on screen was the technical challenge. On mobile, showing all 78 at once makes each card too small. After testing scrollable grids and pagination, I settled on a fan-shaped layout where cards slightly overlap, mimicking how physical tarot cards are spread. The closest digital analog to the real thing.

Overlapping cards created touch target conflicts. Sometimes tapping selected an adjacent card instead of the intended one. I fixed this with z-index adjustments and a touch-coordinate-based nearest-card detection algorithm. These kinds of granular UX issues only surface when testing on an actual mobile device with actual fingertips.

The Velocity of AI Collaboration, and What's Behind It

Listing six features sounds impressive, but individually none are particularly complex. localStorage operations, date comparisons, third-party library integration, canvas rendering. Each is mid-level frontend work.

The real value of AI collaboration was reducing "startup friction." When building a new feature, the biggest time sink isn't coding -- it's figuring out the approach. There's a massive speed difference between reading jspdf documentation from scratch versus telling AI "I want this outcome" and receiving a working starting point to understand and modify.

Speed doesn't excuse poor quality, though. AI-generated code frequently lacks edge case handling, has sloppy memory management, or insufficient error handling. Build fast, verify thoroughly. That rhythm is what matters.

Ultimately, these six features evolved Tarot Master from "a webpage that flips cards" into "a tarot app you open daily to record and share." The individual features matter less than the holistic experience they create together.

What's Next

After the feature rush, the biggest wall I hit was mobile optimization. Things that worked perfectly on desktop broke on phones. Chrome mobile's infamous bottom bar positioning bug, and the full UI overhaul inspired by Linear's design philosophy -- all in the next part.

이 블로그 검색

goldtag