웹만들기4차시

Claude “design” feature for development

• A Claude-based “design” capability was released recently, allowing users to switch between a design view and a code view.
• Suggested workflow:
  1. Design
  2. Press “design”
  3. Edit/design the generated page
  4. Use the generated output to proceed to coding
• The speaker argues the feature is only truly valuable if you’re willing to pay higher plans/tokens, though others believe it will drive major changes.

Cost/tokens and plan limitations

• Plan tiers are discussed in terms of usage limits (e.g., ~30,000 won vs ~150,000 won), with the claim that the cheaper plan may run out of daily usage quickly.
• Costs come from:
  • Claude tokens
  • Integration tokens for connecting external platforms
• Token usage grows with longer answers.
• Recommendations:
  • Save tokens by writing code-friendly scripts/programming rather than long natural-language responses.
  • Be cautious when using AI for extended explanations.

Online coding with Claude Code + GitHub connectivity

• The Claude Code UI supports editing/creating code online (with a left-side code editor).
• “Connect to GitHub” is used so GitHub serves as a place to store, share, and distribute code (like a repository/community channel).
• Two modes are referenced:
  • Planning mode
  • Build mode

Comparisons with other AI coding tools

• The speaker compares GenSpark vs Loveable.
  • In their experience, Loveable produced fewer errors than GenSpark.
• Criticism is aimed at some tools’ “cute/charming” interface designs that may be less practical for complex, real-world coding.
• Cost behavior differences are noted:
  • Some tools keep charging even after generation.
  • A Claude/terminal workflow may allow you to use what you built without ongoing charges, depending on how it’s set up.

Local development via Windows Terminal + installation process

• The process includes using Windows CMD via Start menu search (“cmd”).
• Installation steps are provided as copy/paste commands from Claude instructions.
• After installation:
  • The speaker runs Claude locally
  • Logs in through a web flow
• Notes include restarting the terminal after installation and a brief mention of PowerShell as part of enabling tooling.

Integration concepts for building an app (terminal + GitHub + deployment)

• Core idea: connect the Claude coding environment to external deployment/distribution services so that created apps can be automatically shared online.
• Example project described:
  • A web application for a “Korean History teacher / tutor”
  • Includes study materials and Q&A features.

Learning and prompting strategy for unknown technical terms

• Advice repeated throughout:
  • When you encounter unfamiliar code or concepts, ask “What is this?”
  • This enables iterative learning while building.
• Skepticism is encouraged:
  • AI output may be unreliable for laws/data/news
  • But coding outputs can be more trustworthy because the system generates code from established patterns.
• Interface wording may differ, but the core principles remain consistent.

App architecture / glossary explained

Key terms introduced:

• Supabase
  • Treated as a backend/data layer that includes:
    • Authentication (login/sign-up)
    • Real-time sync
• SDK
  • An interface for using an AI API (example: Google AI API via SDK).
• Scaffolding
  • Auto-generating a React-based project structure (web app framework setup).
• React
  • A component-based UI construction approach (described like “Lego” with reusable pieces).

Additional guidance:

• You may not need deep upfront learning of every framework.
• The presenter mentions React/Next.js but suggests you can continue using other approaches too (e.g., Express JS).

Authentication examples

• Demonstrates adding Google login (and mentions Kakao similarly).
• Uses Google Console to configure login and implement “Continue with Google.”
• Mentions related setup like link/URL shortening (e.g., configuring redirect/asset paths).

Admin/dashboard + analytics

The demo includes:

• Statistics
  • Showing when tests were conducted vs not
• Admin pages
  • To analyze what users struggle with
• A product-design note:
  • Prevent learners from becoming overly passive
  • Even if AI provides answers, the system should keep users actively engaged.

MVP / prototype approach

• MVP (Most Valuable Product) is defined as building only the core functionality first (a prototype).
• Suggested starting point:
  • Minimal features such as uploading past exam questions
  • Generating an interactive Q&A experience

Local preview / run behavior

• Uses localhost preview to verify the app locally.
• Notes that server-side deployment behaves differently and may not work until backend/deployment steps are completed.
• Mentions common issues (e.g., something like incorrect “answer notes” not working until later steps).

---

Tutorials / guides explicitly shown

1. Claude Code development workflow
   • Design/code switch
   • Plan mode → build mode
2. GitHub connection
   • Connect repository for distribution/sharing
3. Windows CMD setup
   • Install Claude via command copy/paste
   • Restart terminal, login via a web page
4. Project creation
   • Generate a basic React scaffold structure
   • Add AI chat features
   • Upload exam questions
   • Mention additional “next step” enhancements
5. Authentication setup
   • Google login using Google Console
   • Similar approach for Kakao
6. MVP iteration
   • Build core features first, then expand

Main speakers / sources

• Main speaker: Not explicitly named in the subtitles; the presenter/teacher is introducing Claude Code and the workflow.
• Referenced tools/services in the content: Claude, Loveable, GenSpark, GitHub, Windows CMD/Terminal, Supabase, Google Console, SDK, React, Express (mentioned), and Google AI API.