2025년 7월 06일·8분
촌스러운 웹사이트를 전문적으로 보이게 만들기: 실용적 재설계 단계
못생긴 웹사이트를 빠르게 전문적으로 보이게 만드는 실용적인 단계별 가이드—빠른 개선, 레이아웃, 타이포그래피, 색상, 이미지, UX, 모바일, QA를 다룹니다.
못생긴 웹사이트를 빠르게 전문적으로 보이게 만드는 실용적인 단계별 가이드—빠른 개선, 레이아웃, 타이포그래피, 색상, 이미지, UX, 모바일, QA를 다룹니다.
“전문적인” 웹사이트는 유행을 따르는 사이트가 아니라 신뢰감을 주고, 질문에 빠르게 답하며, 다음 행동을 분명히 만드는 사이트입니다. 글꼴이나 색상을 건드리기 전에, 당신의 사이트에서 “전문적”이 무엇인지 정의하세요.
측정 가능한 몇 가지 결과로 범위를 제한하세요. 그런 다음 주요 페이지마다 단 하나의 주요 행동을 정하세요—나머지는 보조 콘텐츠입니다.
예시:
한 페이지에 경쟁하는 주요 행동이 두 개 있으면 보통 둘 다 전환율이 떨어집니다.
“모두”를 위한 설계가 아니라 주요 방문자 유형 하나를 선택하세요. 그리고 그들이 신뢰하고 다음 단계로 나아가기 위해 필요한 주요 질문을 목록으로 만드세요:
로고, CMS, 도메인, 핵심 페이지 등 반드시 유지되어야 하는 것들, 일정, 예산, 사용할 도구를 결정하세요. 제약은 끝없는 수정 방지를 돕고 더 깔끔하고 일관된 선택을 가능하게 합니다.
재설계를 판단할 1–3개의 수치를 선택하세요: 핵심 페이지의 이탈률, 폼 제출, 데모 요청, 결제 시작, 통화 등. 디자인 결정이 주관적으로 흐를 때 목표와 지표가 중심을 잡아줍니다.
무엇이 “못생겼다”는 모호한 목표로는 개선이 어렵습니다. 재설계를 시작하기 전에 무엇이 문제인지 구체화하세요. 빠른 감사는 직관을 실제로 고칠 수 있는 문제 목록으로 바꿔줍니다.
핵심 페이지(홈페이지, 요금/서비스, 연락처, 상위 블로그 포스트)를 열고 부서지거나, 혼란스럽거나, 구식으로 보이는 부분을 적으세요. 아직 해결하려고 하지 말고 증거만 수집하세요.
자주 발견되는 적신호:
업계(또는 인접 분야)에서 깨끗하고 신뢰감 있는 느낌을 주는 사이트 5–10개를 찾으세요. 각 사이트마다 왜 효과적인지 한 문장으로 적으세요—“큰 제목 + 넉넉한 여백”, “단순한 색상 팔레트”, “명확한 히어로 메시지”, “일관된 버튼”. 모방이 아니라 기준을 정의하는 것입니다.
현재 페이지, 주요 섹션, CTA, 폼, 콘텐츠 공백의 간단한 목록을 만드세요. 이렇게 하면 푸터, 오류 상태, 감사 페이지처럼 중요한 부분을 깜빡하지 않습니다.
각 문제를 고/중/저 영향도로 표시하고 노력량을 추정하세요. 먼저 빠른 승리(가독성, 여백, 버튼 일관성)부터 시작하세요. 깊은 문장 재작성이나 템플릿 작업은 뒤로 미룹니다.
법적 문구, 필수 고지, 핵심 결제/가입 흐름, 브랜드 마크, 분석 태그, 검증된 전환 요소 등 절대 건드리면 안 되는 것을 보호하세요. 이렇게 하면 정리가 사업에 영향을 주지 않도록 합니다.
웹사이트가 혼란스러워서 ‘못생겨’ 보일 수 있습니다. 색상이나 글꼴을 건드리기 전에 사람들이 몇 번의 클릭으로 원하는 것을 찾을 수 있게 구조를 고치세요.
상단 네비게이션은 사이트맵이 아니라 결정의 지름길입니다. 레이블을 명확하고 짧고 사용자 중심으로 다시 쓰세요. “Solutions”나 “Resources” 같은 모호한 항목은 “Pricing”, “Services”, “Case Studies”, “Contact”처럼 평이한 용어로 바꾸세요.
그런 다음 필수 항목만 남기세요. 상단 네비에 있어야 하는 이유를 설명할 수 없다면 푸터로 옮기세요. 푸터로 자주 옮기는 항목: 채용, 보도자료, 법적 페이지, 오래된 블로그 카테고리, 정책.
각 페이지가 하나의 역할과 하나의 다음 행동을 가지는 예측 가능한 구조를 목표로 하세요. 단순한 계층 예시:
URL을 일관되고 읽기 쉬운 형태로 유지하세요. 예: /services/web-design 대신 /page?id=17 또는 /Services/WebDesign 같은 혼용을 피하세요. 일관성만으로도 사이트는 더 전문적으로 보입니다.
발행 전에 각 페이지를 훑어 다음에 답하는지 확인하세요:
어떤 답이 불명확하면 헤드라인, 한 줄 맥락, 하나의 명확한 콜투액션을 추가하세요.
검색은 많은 콘텐츠(많은 기사, 문서, 제품)가 있을 때 유용합니다. 사이트가 작다면 검색은 잡음을 더하고 조직의 약점을 드러낼 수 있습니다. 먼저 내비게이션을 고치고, 사용자가 진짜로 필요할 때 검색을 추가하세요.
타이포그래피는 사이트에 의도성이 느껴지게 하는 가장 빠른 방법입니다. 레이아웃이 어수선하더라도 일관된 글꼴 선택은 즉시 ‘이건 제대로 된 사업’이라는 신호를 줍니다.
먼저 모든 텍스트에 대해 읽기 쉬운 단일 글꼴을 선택하세요. 약간의 개성을 원하면 제목용 보조 글꼴을 하나 더 추가할 수 있지만, 오직 일관성 있게 유지할 자신이 있을 때만 하세요.
좋은 규칙: 여러 굵기(Regular, Medium, Bold)를 가진 한 글꼴 패밀리면 보통 충분합니다. 다섯 개의 서로 다른 글꼴을 혼합하는 것을 피하세요—각 글꼴이 새로운 ‘목소리’를 만들어 페이지가 응집력을 잃습니다.
기본 스케일(4단계면 충분)을 정의하고 모든 곳에 적용하세요:
설정 후에는 즉흥적으로 크기를 바꾸지 마세요. 임의의 17px 제목과 13px 본문은 사이트를 전문적으로 보이지 않게 만듭니다.
CMS를 사용한다면 스타일에 이 스케일을 반영해 편집자가 실수로 ‘거의 같은’ 새로운 크기를 만들지 못하게 하세요.
두 가지 작은 조정이 전체 재설계보다 더 큰 변화를 줄 때가 많습니다:
한 가지만 바꿀 수 있다면 줄간격을 바꾸세요. 즉시 텍스트가 차분하고 더 고급스럽게 느껴집니다.
전문적인 타이포그래피는 대개 변화가 적은 쪽입니다. 흔한 잡동사니를 정리하세요:
일관성이 진짜 업그레이드입니다.
데스크탑에서 괜찮아 보이던 글씨가 모바일에선 무너질 수 있습니다. 작은 화면에서 빠르게 검사하세요:
간단한 기준: 스타일보다 가독성을 우선하세요. 깔끔한 타입 시스템이 “웹사이트를 전문적으로 보이게 만드는” 가장 빠른 조치입니다.
색상 때문에 많은 사이트가 망가지는데, 문제는 색이 나빠서가 아니라 너무 많은 색을 너무 다양한 의미에 사용하기 때문입니다. 목표는 완벽한 팔레트가 아니라 예측 가능한 색 사용입니다.
단순하게 유지하세요:
이미 브랜드 색이 있다면 재발명하지 말고 색이 등장하는 위치를 제한하세요. 전문적인 느낌은 무언가를 더 많이 ‘거절’하는 데서 옵니다.
기본 행동 버튼 색을 하나 정하세요(예: “견적 받기”, “무료 체험 시작”). 그리고 규칙을 지키세요: 주요 행동이 아니면 그 색을 사용하지 않는다.
보조 행동은 보조로 보이게 하세요—테두리 버튼, 중립 채우기, 또는 텍스트 링크를 사용하세요. 시각적 잡음이 즉시 줄고 사용자가 생각하지 않고도 페이지를 진행할 수 있습니다.
그래디언트, 무거운 그림자, 네온 글로우, 임의의 베벨은 빠르게 ‘템플릿 같음’으로 보입니다—특히 섞여 있을 때. 한 방향을 정하고 그에 일관되게 가세요:
일치하지 않는 요소는 삭제하세요. 확신이 없다면 제거하고 UI가 더 차분해지는지 보세요. 보통 그렇습니다.
낮은 대비는 사이트가 전문적으로 보이지 않는 가장 흔한 이유 중 하나이며 접근성에도 영향을 줍니다.
빠른 점검:
간단한 규칙: 모호할 땐 텍스트를 더 어둡게, 배경을 더 밝게.
전문적인 인터페이스는 일관되게 동작합니다. 작은 상태 집합을 만들고 전부 재사용하세요:
이 선택을 간단한 스타일 노트에 문서화해 매 페이지에서 재결정하는 일을 막으세요.
좋은 색상과 멋진 글꼴이 있어도 레이아웃이 일관되지 않으면 아마추어처럼 보일 수 있습니다. 여백은 품질의 무언의 신호입니다: 요소들이 정렬되고 숨쉬고 예측 가능한 패턴을 따르면 인터페이스 전체가 의도적으로 느껴집니다.
레이아웃을 새로 만들 필요 없습니다. 일관된 그리드를 채택하세요—많은 팀이 데스크탑에서 모바일까지 유연한 12컬럼 그리드를 기본으로 사용합니다.
숫자보다 중요한 건 일관성입니다. 메인 콘텐츠 영역의 폭, 거터 위치, 멀티 컬럼이 언제 반응하여 접히는지 결정하세요.
임의의 패딩 값은 ‘왜 이게 난잡하게 느껴지지?’의 주범입니다. 간단한 여백 스케일을 뽑아 전역에서 재사용하세요. 예: 기본 단위 8px(8, 16, 24, 32, 48).
이 스케일을 다음에 적용하세요:
모든 것이 빽빽하면 방문자는 압도됩니다—특히 마케팅 페이지에서. 여백을 늘린다는 것은 ‘공간을 낭비하는 것’이 아니라 관련 항목을 묶고 관련 없는 항목을 분리하는 것입니다.
빠른 규칙: 섹션 간 간격을 컴포넌트 내부 간격보다 크게 하세요. 그러면 페이지에 명확한 리듬이 생깁니다.
페이지를 훑으며 상상 속 수직선을 찾아보세요. 카드 가장자리가 헤딩과 정렬되나요? 버튼이 관련 텍스트 블록과 일직선인가요? 이미지는 복사와 같은 왼쪽 여백에 붙어 있나요?
정렬 불일치는 디자인이 즉흥적으로 보이게 하는 가장 빠른 원인 중 하나입니다. 고치는 건 보통 컨테이너 폭을 조정하고 일관된 좌우 패딩을 사용하는 것뿐입니다.
전문적인 사이트는 패턴을 반복합니다. 몇 가지 컴포넌트 표준을 정의하고 재사용하세요:
이렇게 하면 페이지 간 ‘레이아웃 놀람’이 줄어듭니다.
핵심 페이지 5–10개를 나란히 열어보세요. 헤더, 푸터, 페이지 폭, 섹션 간격이 전반적으로 같은 시스템처럼 느껴져야 합니다. 각 템플릿이 저마다의 규칙을 가지고 있으면 사이트가 이어 붙인 것처럼 보입니다.
의문이 들면 단순화하세요: 레이아웃 변형은 적게, 일관성은 더 많이, 명확한 여백 시스템이 가장 적은 노력으로 가장 큰 차이를 만듭니다.
좋은 비주얼은 화려할 필요 없습니다. 대부분의 ‘못생긴’ 사이트는 이미지와 아이콘이 제각각이어서 그렇습니다: 스타일이 다르고 크기가 제각각이며 잘못 잘리고 흐릿한 파일들. 해결책은 완벽한 아트를 찾는 것이 아니라 모든 곳에서 따라야 할 규칙을 만드는 것입니다.
픽셀화되거나 늘어나거나 과도하게 압축된 것은 제거하세요. 모든 것을 교체할 수 없다면 눈에 띄는 문제부터 교체하세요: 홈페이지 히어로, 제품/서비스 썸네일, 팀 사진 등.
정해진 소스와 스타일(실제 사진 vs 일러스트 vs 3D 렌더링)을 목표로 하세요. 스타일을 섞을 수는 있지만 의도적이고 엄격히 통제되지 않으면 실패합니다.
공간을 채우기 위해 이미지를 추가하는 실수를 피하세요. 각 이미지는 적어도 하나의 역할을 해야 합니다:
메시지를 지원하지 않는 이미지는 제거하세요. 적은 이미지로도 더 강한 비주얼을 사용하면 페이지는 즉시 더 전문적으로 보입니다.
리스트가 불일치성을 가장 크게 드러냅니다(블로그 그리드, 상품 카드, 추천사). 1–2개의 종횡비를 선택하고 강제 적용하세요:
모든 이미지를 맞춰 잘라 통일된 썸네일을 만드세요. 이렇게 하면 콘텐츠가 달라도 레이아웃이 설계된 것처럼 보입니다.
아이콘은 같은 계열처럼 보여야 합니다: 동일한 선 굵기, 모서리 반경, 채우기/외곽 스타일, 세부 수준. 얇은 선 아이콘과 두툼한 채움 아이콘을 섞지 마세요.
UI 킷이나 디자인 시스템이 있다면 그 아이콘을 사용하세요. 없다면 하나의 세트를 골라 전역에서 사용하세요(내비게이션, 기능 목록, 버튼, 빈 상태 등).
팀이 따를 수 있는 작은 ‘시각 규칙’ 체크리스트를 만드세요:
이러한 작은 제약은 시간이 지나면서 사이트가 다시 흐트러지는 것을 막아주고, 최종 품질 검사 때 성능과 세련미에도 도움이 됩니다.
사이트가 ‘못생겨’ 보이면 그 인상은 보통 홈페이지에서 형성됩니다. 메시지를 다듬고, 실질적인 신뢰요소를 추가하고, 요청하는 행동을 단순화하면 빠르게 전문적인 느낌을 줄 수 있습니다.
스크롤하기 전에 보이는 영역에는 당신이 무엇을 하고 누구를 위해 어떤 결과를 주는지 한 문장으로 답해야 합니다.
예시(자신의 상세로 바꾸세요):
“혁신적인 솔루션”이나 “우리는 열정적입니다” 같은 모호한 문구는 피하세요. 가장 값진 공간을 낭비합니다.
전문적인 홈페이지는 보통 명료한 이야기처럼 읽힙니다:
이 구조는 어떤 섹션이 적절한지, 어떤 섹션이 불필요한지 알려주어 디자인 잡음을 줄입니다.
소셜 프루프는 빠른 신뢰 구축 수단이지만, 거짓처럼 보이면 역효과입니다. 증명할 수 있을 때만 사용하세요.
좋은 옵션:
첫 CTA 근처에 신뢰요소를 배치해 결정을 뒷받침하세요.
난잡한 홈페이지는 보통 5–10개의 경쟁하는 버튼이 있습니다. 하나의 주요 CTA를 정하고 반복하세요.
보조 CTA가 필요하면 명확히 보조로 유지하세요(테두리 스타일, 덜 강조) 그리고 방해되지 않게 만드세요(예: “2분 개요 보기”).
전문적인 페이지는 차분합니다—불필요한 추가를 ‘거절’하기 때문입니다.
빠른 정리:
섹션이 방문자의 이해, 신뢰, 행동에 도움이 되지 않으면 잘라내세요. 색상 팔레트를 건드리지 않아도 디자인은 즉시 더 깔끔해집니다.
깔끔한 레이아웃과 좋은 색상이 있어도 글이 엉성하면 사이트는 여전히 아마추어처럼 느껴집니다. 전문 사이트는 일관되게 들리고, 60초 내에 스캔하기 쉬우며, 버튼과 메시지가 예측 가능합니다.
대부분의 방문자는 위에서 아래로 읽지 않고 답을 찾습니다. 긴 문단을 다음처럼 분해하세요:
모바일에서 문단이 4줄 넘게 이어지면 쪼개는 것이 좋습니다.
모호한 문구를 구체적인 문장으로 바꾸세요. 홍보어, “우리는 ~에 열정적입니다” 같은 문장은 잘라내세요.
대신: “혁신적인 솔루션을 제공합니다” 대신 “프로젝트를 추적하고 파일을 공유하며 승인 절차를 한 곳에서 처리하세요.”
여러 타깃이 있다면 하나의 문장에 다 집어넣지 말고 각 타깃별로 헤딩을 만들어 간결하게 설명하세요.
작고 눈에 띄는 문구들이 문제가 생겼을 때 사람들에게 신뢰를 줍니다. 일관성은 신뢰를 만듭니다.
브랜드 북은 필요 없지만 공유 문서로 규칙을 정리하세요:
이렇게 하면 사이트가 다섯 명이 쓴 것처럼 들리지 않습니다.
방문자가 결정하고 전환하는 곳부터 집중하세요:
빠른 승리를 원하면 CTA와 폼 메시지를 먼저 고치세요—작은 변경만으로도 사이트가 더 의도적으로 보입니다.
모바일 문제는 데스크탑이 괜찮아도 사이트를 싸구려처럼 보이게 합니다. 몇 가지 빠른 눈에 띄는 수정으로 사용성과 인상 모두를 크게 개선할 수 있습니다.
모든 템플릿을 완벽하게 하려 하지 마세요. 상위 유입 페이지(대개 홈페이지, 핵심 제품/서비스 페이지, 연락/리드 페이지)부터 고치세요. 애널리틱스를 보고 상위 3–5개 페이지를 선택해 우선 처리하세요.
작은 글자와 빽빽한 줄은 구식처럼 보이게 만드는 가장 빠른 요인입니다.
사용자가 확대/축소하거나 잘못 누르지 않게 해야 신뢰를 얻습니다.
데스크탑에서 괜찮던 헤더가 모바일에서는 불편할 수 있습니다.
모바일에서는 히어로 섹션이 빠르게 “이게 뭐고 다음에 뭘 해야 하나?”를 답해야 합니다.
핵심 페이지를 최소 iPhone 크기와 Android 크기에서 열고: 메뉴 열기, 요금/연락 찾기, 주요 CTA 누르기, 첫 폼 필드 입력해보기. 불편한 점이 느껴진다면 오늘 바로 고칠 가치가 있습니다.
사이트가 시각적으로 깔끔해도 느리거나 버그가 있거나 사용하기 어렵다면 싸구려처럼 느껴집니다. 성능·접근성·QA의 빠른 수정은 시각적 조정보다 더 빨리 “전문적”인 느낌을 줍니다.
큰 문제부터 처리하세요:
CMS나 빌더 설정에 접근 가능하면 캐시/축소(minification)를 켜세요—완벽한 점수보다 모바일에서 “충분히 빠름”을 목표로 하세요.
접근성 수정은 보통 사이트를 더 의도적으로 느껴지게 합니다:
폼을 표준화하세요: 일관된 필드 간격, 하나의 주요 버튼 스타일, 브랜드 색상에 맞으면서도 읽기 쉬운 오류 상태.
시각 점검과 기능 점검을 각각 한 번씩 하세요:
이 점검을 사전 출시 게이트로 삼으세요. 재설계와 ‘신뢰할 수 있음’의 차이는 여기서 납니다.
재설계는 퍼블리시로 끝나는 것이 아니라 사이트가 성장하는 동안 계속 잘 보일 때 끝납니다. 출시를 통제된 릴리즈로 다루고 사이트가 다시 혼란스러워지지 않도록 가벼운 습관을 만드세요.
바로 눈에 띄는 개선부터 시작하고 기초가 안정되면 더 깊은 작업으로 넘어가세요.
목표에 연결된 몇 가지 지표를 고르세요: 홈페이지 CTA 클릭, 연락 폼 시작/완료, 데모 요청, 요금 페이지 스크롤 깊이 등.
A/B 테스트는 보통 헤드라인, 주요 CTA 문구, 히어로 레이아웃에서 효과가 큽니다. 테스트는 좁게 유지해 결과를 읽기 쉽게 만드세요.
페이지를 재구성하거나 새 버전을 출시할 때 느린 단절된 핸드오프를 피하려면, 설명 기반으로 실제 UI를 생성해 주는 도구를 활용할 수 있습니다.
예시: Koder.ai 같은 도구는 채팅으로 페이지를 묘사하면 실제 웹 앱 경험(보통 프런트엔드 React, 백엔드 Go + PostgreSQL)을 생성해 줍니다. 이런 도구는 특히 다음에 유용합니다:
빌드 도구를 쓰더라도 위의 규칙을 적용하세요: 페이지당 하나의 주요 CTA, 작은 타입 스케일, 여백 시스템, 일관된 컴포넌트 세트.
향후 페이지가 전문적으로 보이려면 규칙이 필요합니다. 한 페이지짜리라도 내부 문서를 만들어 정의하세요:
월간 또는 분기별 체크리스트를 정해 오래된 콘텐츠 제거, 끊긴 링크 수정, 스크린샷/로고 교체, 사용하지 않는 자산 삭제를 하세요.
가격을 자주 업데이트한다면 그 워크플로우를 명확히 하고 핵심 페이지(예: /pricing)에서 효율적으로 연결되게 하세요. 오래된 정보가 신뢰를 잠식하는 일이 없게 합니다.
먼저 3–5개의 측정 가능한 목표를 정의하고 주요 페이지마다 하나의 주요 행동을 지정하세요(예: 홈페이지 → “전화 예약”, 서비스 페이지 → “견적 요청”). 디자인 논쟁이 주관적으로 흐를 때는 목표와 지표(폼 제출, 데모 요청, 결제 시작, 전화)가 결정을 돕습니다.
만약 한 페이지에 두 개의 “주요” 행동이 있으면 보통 둘 다 성과가 떨어집니다—하나를 선택하고 나머지는 보조 콘텐츠로 만드세요.
빠른 감사를 수행하고 모호한 평가 대신 구체적인 적신호들을 적으세요:
그런 다음 영향도 대비 노력으로 우선순위를 매겨 빠른 승리부터 처리하세요.
상단 네비게이션은 결정의 지름길이지 사이트 맵이 아닙니다. “Pricing”, “Services”, “Case Studies”, “Contact”처럼 명확한 라벨을 사용하고 낮은 우선순위 링크(채용, 보도자료, 정책)는 푸터로 옮기세요.
간단한 테스트: 어떤 링크가 상단 네비게이션에 있어야 하는지 설명할 수 없다면, 아마 그곳에 둘 필요가 없습니다.
각 페이지가 반드시 답해야 할 세 가지를 확인하세요:
어떤 답이 불분명하면 직접적인 헤드라인, 한 문장 설명, 하나의 명확한 CTA를 추가하세요. 색상이나 글꼴을 건드리기 전의 명확성이 종종 ‘못생김’을 해결합니다.
타이포그래피가 보통 가장 빠른 시각적 개선입니다:
하나만 바꿀 수 있다면 줄간격을 늘리세요—가독성이 즉시 더 고급스럽게 느껴집니다.
작고 예측 가능한 팔레트를 사용하세요:
또한 규칙을 하나 정하세요: 주요 CTA 버튼에는 오직 하나의 색만 사용한다. 보조 동작은 테두리 버튼, 중립 채우기, 또는 텍스트 링크처럼 보조적으로 처리하세요. 이렇게 하면 시각적 잡음이 줄어들고 페이지가 의도적으로 보입니다.
눈대중 대신 단순한 시스템을 적용하세요:
템플릿 전반의 일관성이 사이트를 ‘디자인된’ 것으로 느끼게 합니다.
이미지와 아이콘에 규칙을 적용하세요:
시각적 통일성은 콘텐츠가 달라도 사이트를 응집력 있게 보이게 합니다.
접히는 영역(스크롤 전)에서 당신이 무엇을 하는지, 누구를 위한 것인지, 어떤 결과를 주는지를 담은 하나의 명확한 문장을 사용하세요. 그런 다음 깔끔한 구조를 따르세요:
신뢰는 실제로 증명 가능한 경우에만 추가하세요(세부가 있는 추천사, 노출 허가된 클라이언트 로고, 검증 가능한 통계). CTA는 구체적으로(“가격 보기”, “전화 예약”, “무료 체험 시작”) 유지하세요.
가장 ‘싸게’ 보이는 신호들을 먼저 고치세요:
그런 다음 간단한 QA: iPhone 크기와 Android 크기에서 메인 흐름(메뉴 → 가격/연락 → CTA → 첫 폼 필드)을 테스트하세요.