SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillskorean-frontend-defaults

korean-frontend-defaults

Frontend & websites

View repository

Updated 10-15 20:29

About this skill

Korean Frontend Defaults

This skill is applied together with taste-skill-series design skills to enforce localization defaults for frontend deliverables targeting the Korean market. While preserving the visual guidelines of the design skill as-is, it overrides the output format, fonts, content, and UI patterns to suit the Korean market.

Scope of Application

In existing projects, preserve the framework, design system, and bundling method chosen by the user, and apply only the Korean font, line-breaking, and content rules. The single HTML/CDN output rules below apply only when the user requests a standalone HTML deliverable. Do not replace React/Vue code or existing dependencies merely because the page is in Korean.

1. Output Format - Standalone HTML

Framework Prohibition Rules

The use of all frameworks such as React, Next.js, Vue, and Svelte is prohibited. All deliverables are output as a single HTML file.

Required HTML Structure Template

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>페이지 제목</title>

    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Pretendard 폰트 CDN -->
    <link rel="stylesheet" as="style" crossorigin
          href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />

    <!-- Tailwind 설정 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Pretendard Variable', 'Pretendard', '-apple-system', 'BlinkMacSystemFont', 'system-ui', 'Roboto', 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'sans-serif'],
                        mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
                    },
                },
            },
        }
    </script>

    <!-- 한국어 타이포그래피 기본 스타일 -->
    <style>
        body {
            word-break: keep-all;
            overflow-wrap: break-word;
        }
        p, li, dd, td, th, label, span {
            letter-spacing: -0.01em;
        }
        h1, h2, h3, h4, h5, h6 {
            letter-spacing: -0.03em;
        }
    </style>
</head>
<body class="font-sans antialiased">
    <!-- 콘텐츠 -->
</body>
</html>

Output Rules for Standalone HTML Requests

  • No JSX: useState, useEffect, useRef React hooks such as these cannot be used.
  • No npm install: Dependencies installed via a package manager cannot be used.
  • Interaction: Implement with pure Vanilla JavaScript. Alpine.js CDNs are allowed.
  • Single file output: Include HTML, CSS, and JS all in one .html file.
  • CDN only: If an external library is needed, it must be included via a CDN link.

2. Korean Typography

Default Font: Pretendard

Use Pretendard as the primary font. Noto Sans KR Using it alone is prohibited. Since Pretendard already includes Apple SD Gothic Neo, Noto Sans KR, etc. as fallbacks, no separate configuration is needed.

word-break Setting

For Korean, line breaks at the word (eojeol) unit rather than the syllable unit are natural:

body {
    word-break: keep-all;
    overflow-wrap: break-word;
}
  • word-break: keep-all — Prevents Korean text from being cut off in the middle of a word.
  • overflow-wrap: break-word — Ensures that very long words (such as URLs) do not overflow the container.

Letter Spacing Adjustment

Korean typefaces appear to have wider letter spacing than English, so fine adjustment is needed:

  • Body: letter-spacing: -0.01em
  • Titles/Headings: letter-spacing: -0.03em
  • Word spacing: word-spacing: -0.05em (fine adjustment)

Line Height Setting

Korean body text requires wider line height than English:

  • Body: line-height: 1.7 ~ line-height: 1.8
  • Titles: line-height: 1.3 ~ line-height: 1.4

Heading Text Wrapping

h1, h2, h3 {
    text-wrap: balance;
}
  • text-wrap: pretty or text-wrap: balanceto distribute the line breaks of headings in a visually balanced way.

Font size adjustment

Korean appears visually smaller than English at the same font-size. Follow the following:

  • Use at least text-base (16px) or larger for CTA button text.
  • Body text is recommended to be text-base or larger.
  • Do not reduce captions/auxiliary text below text-xs (12px) either.

Tailwind application example

<!-- 제목 -->
<h1 class="text-4xl md:text-6xl font-bold tracking-tighter leading-tight">
    팀 협업의 새로운 기준
</h1>

<!-- 본문 -->
<p class="text-base text-gray-600 leading-relaxed tracking-tight max-w-[65ch]"
   style="letter-spacing: -0.01em; line-height: 1.75;">
    복잡한 프로젝트도 한눈에 파악하고, 팀원들과 실시간으로 소통하세요.
</p>

<!-- CTA 버튼 -->
<button class="text-base px-6 py-3 font-medium">
    무료로 시작하기
</button>

3. Korean market content rules

Korean usernames

Never use English names such as "John Doe", "Jane Smith", etc. Never use . Always use the Korean-style names below:

Name Gender Usage example
Kim Seo-yeon 여 User profile, reviews
Lee Jun-hyeok 남 Team member cards, dashboard
Park Ha-eun 여 Customer testimonials, comments
Choi Min-su 남 Administrator, manager role
Jung Da-eun 여 Blog author, editor
Kang Ji-ho 남 Developer, engineer role
Yoon Seo-a 여 Designer, creator
Lim Tae-hyeon 남 Team leader, CEO
Han So-yul 여 Marketer, planner
Oh Jae-yoon 남 Data analyst, PM

Korean company names

Never use English fictional company names such as "Acme Corp", "Nexus Inc", etc. Never use . Always use the Korean-style company names below:

Company name Usage example
NextLab SaaS, B2B software
Bloomingkeu Design, creative
Tumblbug Crowdfunding, commerce
Remember Networking, business
GreenLabs Agriculture, environment, tech
Wadiz Investment, funding
Spoon Radio Media, audio
Class101 Education, online courses

CTA text conversion table

Do not translate English CTAs literally; use natural expressions suited to the Korean market:

English CTA Korean CTA
Get Started Get Started
Sign Up Free Start for free
Learn More View details
Try It Now Try it now
Book a Demo Request a demo
Contact Us Contact us
Download Download
Subscribe Subscribe

Prohibited copy patterns (Korean AI slop)

The following expressions are overused marketing clichés. Never use them:

  • "innovative"
  • "differentiated"
  • "Optimized"
  • "One-stop"
  • "All-in-one"
  • "New paradigm"
  • "Game changer"
  • "Next level"
  • "Perfect solution"
  • "Customized service"
  • "The era of ~ opens"
  • "Redefine ~"

Principles of Good Korean Copy

Use specific and plain language. Clearly convey the practical value the user gains:

Verdict Example
O (Good) "Manage your team's work in one place"
X (Bad) "Innovative all-in-one work solution"
O (Good) "Check your sales data in real time"
X (Bad) "Differentiated data insight platform"
O (Good) "Create an online store in 3 minutes"
X (Bad) "A commerce solution of a new paradigm"

Korean Phone Number Format

010-3847-1928    (휴대전화)
02-6388-5100     (서울 유선)

Korean Won Notation

월 29,000원
연 348,000원
19,900원/월 (부가세 별도)

Korean Date/Time Format

2026년 3월 21일
오후 2:30
3일 전
2026.03.21

4. Korean UI Patterns

Navigation Labels

This is the standard navigation structure of Korean services:

<nav>
    <a href="#">홈</a>
    <a href="#">서비스</a>
    <a href="#">가격</a>
    <a href="#">소개</a>
    <a href="#">문의</a>
    <div class="auth">
        <a href="#">로그인</a>
        <a href="#">회원가입</a>
    </div>
</nav>

Form Labels and Placeholders

<!-- 회원가입 폼 예시 -->
<form>
    <label for="name">이름</label>
    <input id="name" type="text" placeholder="홍길동" />

    <label for="email">이메일</label>
    <input id="email" type="email" placeholder="example@email.com" />

    <label for="phone">휴대전화</label>
    <input id="phone" type="tel" placeholder="010-0000-0000" />

    <label for="company">회사명 (선택)</label>
    <input id="company" type="text" placeholder="회사명을 입력하세요" />

    <label for="password">비밀번호</label>
    <input id="password" type="password" placeholder="8자 이상 입력하세요" />

    <button type="submit">가입하기</button>
</form>

Form Error Messages

Situation Error Message
Required field not entered "This is a required field"
Email format error "Please enter a valid email address"
Password rule not met "Password must be at least 8 characters"
Phone number format error "Please enter a valid phone number"
Duplicate sign-up "This email is already registered"
Login failure "Please check your email or password"
Network error "A temporary error has occurred. Please try again in a moment"

Footer Structure

The footer of Korean services legally requires the display of business information:

<footer>
    <!-- 회사 정보 -->
    <div class="company-info">
        <p>주식회사 넥스트랩</p>
        <p>대표자명: 임태현</p>
        <p>사업자등록번호: 123-45-67890</p>
        <p>통신판매업신고번호: 제2026-서울강남-01234호</p>
        <p>주소: 서울특별시 강남구 테헤란로 123, 4층</p>
        <p>고객센터: 02-6388-5100 (평일 09:00~18:00)</p>
        <p>이메일: support@nextlab.kr</p>
    </div>

    <!-- 법적 링크 -->
    <div class="legal-links">
        <a href="#">개인정보처리방침</a>
        <a href="#">이용약관</a>
        <a href="#">고객센터</a>
    </div>

    <p class="copyright">Copyright 2026 NextLab Inc. All rights reserved.</p>
</footer>

Footer Required Elements Checklist

  • Business Registration Number: 000-00-00000 format.
  • Representative Name: Must be displayed.
  • Mail-Order Business Report Number: Required for online transaction services.
  • Legal Links: "Privacy Policy" must be separated into its own link. Place it at the bottom of the footer together with "Terms of Service".
  • Customer Center: Phone number + operating hours or email address.