사용자 인터페이스(UI) 디자인에서 텍스트 필드는 단순히 정보를보여주는영역이 아니라, 사용자의 입력을 능동적으로 받아들이는 핵심적인 요소입니다. 웹사이트와 앱 곳곳에서 마주치는 이 작은 입력 상자는, 이름, 이메일 주소, 검색어와 같이 사용자가 시스템에게 전달하고자 하는 정보를 담는 그릇 역할을 합니다. 텍스트 필드가 없다면 우리는 디지털 세상과 제대로 소통할 수 없으며, 우리가 사용하는 수많은 서비스들은 텅 빈 껍데기처럼 느껴질 것입니다. 사용자 친화적인 인터페이스를 구축하고, 원활한 사용자 경험(UX)을 제공하기 위해서는 텍스트 필드의 역할과 중요성을 깊이 이해하고, 효과적으로 디자인하는 것이 필수적입니다. 본 글에서는 UI 디자인의 기본적이면서도 필수적인 컴포넌트인 ‘텍스트 필드’에 대해 심층적으로 탐구하고, 구글 머터리얼 디자인, 애플 휴먼 인터페이스 가이드라인(HIG), 마이크로소프트 Fluent 디자인과 같은 대표적인 디자인 시스템을 기반으로 대학생 수준의 깊이 있는 이해를 제공하고자 합니다. 텍스트 필드의 핵심 개념부터 용처, 다양한 사례, 디자인 시 고려사항 및 최신 트렌드까지, 텍스트 필드에 대한 모든 것을 2000단어 이상의 분량으로 상세히 해부하여, 독자들이 텍스트 필드 디자인 전문가 수준의 통찰력을 갖출 수 있도록 안내할 것입니다.
텍스트 필드, 사용자 입력의 관문: 핵심 개념과 기능
텍스트 필드란 무엇인가?
텍스트 필드는 사용자 인터페이스(UI)에서 사용자가 한 줄 또는 여러 줄의 텍스트를 입력할 수 있도록 제공되는 입력 컨트롤입니다. 본 글에서는 단일행 텍스트 필드에 초점을 맞춰 설명하며, 이는 이름, 이메일 주소, 검색어, 비밀번호와 같이 짧은 문자열 입력을 위해 주로 사용됩니다. 텍스트 필드는 사용자와 시스템 간의 데이터 교환을 가능하게 하는 기본적인 통로이며, 사용자가 정보를 제공하고 시스템은 이를 처리하는 상호작용의 시작점을 담당합니다.
시각적으로 텍스트 필드는 일반적으로 직사각형 형태의 빈 영역으로 표현됩니다. 입력 전 상태에는 회색 힌트 문구 (placeholder) 가 표시되어 텍스트 필드의 용도를 사용자에게 안내합니다. 텍스트 필드를 선택 (focus) 하면 커서가 나타나고, 사용자는 키보드를 통해 텍스트를 입력할 수 있습니다. 모바일 환경에서는 텍스트 필드를 터치하면 가상 키보드가 화면에 나타나 텍스트 입력을 돕고, 데스크톱 환경에서는 물리 키보드를 사용하여 텍스트를 입력합니다. 텍스트 필드의 외형은 디자인 시스템 및 서비스의 디자인 컨셉에 따라 다양하게 변화하지만, 기본적인 기능과 역할은 동일합니다.
텍스트 필드의 중요성: 정보 입력과 상호작용의 기반
텍스트 필드는 웹사이트 및 앱에서 사용자의 정보 입력을 위한 가장 보편적이고 필수적인 UI 컴포넌트입니다. 로그인 폼의 아이디 및 비밀번호 입력란, 회원가입 폼의 이름, 이메일 주소 입력란, 검색창의 검색어 입력란, 댓글 작성란 등, 사용자가 텍스트를 입력해야 하는 모든 곳에 텍스트 필드가 사용됩니다. 텍스트 필드가 없다면 사용자는 시스템에게 정보를 전달할 수 없으며, 시스템 또한 사용자에게 필요한 정보를 적절하게 제공할 수 없게 됩니다. 텍스트 필드는 사용자와 시스템 간의 원활한 커뮤니케이션을 가능하게 하는 기본적인 도구이며, 사용자 경험의 질을 결정짓는 중요한 요소입니다.
잘 디자인된 텍스트 필드는 사용자가 쉽고 정확하게 정보를 입력하도록 돕고, 입력 과정에서의 오류를 최소화하며, 긍정적인 사용자 경험을 제공합니다. 반대로 사용성이 떨어지는 텍스트 필드는 사용자에게 불편함을 주고, 입력 오류를 유발하며, 서비스에 대한 불만족으로 이어질 수 있습니다. 따라서 텍스트 필드는 UI 디자인에서 기본적이면서도 매우 중요한 컴포넌트이며, 사용자 중심 디자인의 핵심 요소 중 하나입니다.
다양한 형태의 텍스트 필드: 기본, 아웃라인, 채워진 형태
텍스트 필드는 디자인 시스템 및 시각적 스타일에 따라 다양한 형태로 표현될 수 있습니다. 대표적인 형태는 기본 텍스트 필드, 아웃라인 텍스트 필드, 채워진 텍스트 필드 입니다.
기본 텍스트 필드는 가장 기본적인 형태이며, 입력 영역 하단에 밑줄만 표시하여 텍스트 필드를 구분합니다. 심플하고 미니멀한 디자인에 적합하며, 텍스트 콘텐츠에 집중하도록 돕습니다. 하지만 시각적 대비가 약하여 인지성이 떨어질 수 있다는 단점이 있습니다.
아웃라인 텍스트 필드는 입력 영역 전체 테두리를 표시하여 텍스트 필드를 명확하게 구분합니다. 기본 텍스트 필드보다 인지성이 높고, 모던하고 세련된 느낌을 줍니다. 최근 UI 디자인 트렌드에서 널리 사용되는 형태이며, 구글 머터리얼 디자인 시스템에서 주로 사용됩니다.
채워진 텍스트 필드는 입력 영역 배경색을 채워 텍스트 필드를 강조합니다. 아웃라인 텍스트 필드보다 더욱 높은 인지성을 제공하며, 시각적으로 눈에 잘 띄어 사용자의 시선을 유도합니다. 마이크로소프트 Fluent 디자인 시스템에서 주로 사용되며, 정보 입력이 중요한 폼 디자인에 효과적입니다.
이 외에도 텍스트 필드는 모양, 색상, 아이콘, 라벨 등 다양한 시각적 요소들을 조합하여 서비스의 브랜드 아이덴티티를 반영하고, 사용자 경험을 최적화하도록 디자인될 수 있습니다. UI 디자이너는 디자인 시스템 가이드라인 및 서비스의 디자인 컨셉을 고려하여 적절한 형태의 텍스트 필드를 선택하고 디자인해야 합니다.
텍스트 필드는 어디에나 존재한다: 다양한 용처와 활용 사례
검색, 로그인, 회원가입: 필수적인 입력 폼
텍스트 필드는 사용자 정보를 입력받는 폼 디자인에서 핵심적인 역할을 합니다. 검색 폼에서 텍스트 필드는 사용자가 검색어를 입력하는 주요 인터페이스입니다. 사용자는 텍스트 필드에 키워드를 입력하여 원하는 정보를 빠르게 검색하고, 시스템은 입력된 검색어를 기반으로 결과를 제공합니다. 검색 폼의 텍스트 필드는 명확한 힌트 문구 (placeholder), 자동 완성 기능, 검색 제안 기능 등을 함께 제공하여 사용자 편의성을 높일 수 있습니다.
로그인 폼에서 텍스트 필드는 사용자의 아이디 (이메일 주소 또는 사용자 이름) 및 비밀번호를 입력받는 핵심적인 역할을 합니다. 로그인 폼의 텍스트 필드는 보안을 위해 비밀번호 입력 시 입력 내용을 마스크 처리 (●●●●) 하고, 아이콘 버튼을 통해 비밀번호 표시/숨김 기능을 제공할 수 있습니다. 또한, 자동 로그인 체크박스, 비밀번호 찾기 링크 등 로그인 편의 기능을 함께 제공하여 사용자 경험을 향상시킬 수 있습니다.
회원가입 폼에서 텍스트 필드는 사용자 개인 정보 (이름, 이메일 주소, 비밀번호, 주소, 전화번호 등) 를 입력받는 다양한 용도로 활용됩니다. 회원가입 폼은 사용자 정보를 정확하게 입력받는 것이 중요하므로, 텍스트 필드 유효성 검사 (validation) 기능을 필수로 적용하고, 실시간 에러 메시지를 통해 사용자에게 입력 오류를 즉시 알려주어야 합니다. 또한, 개인 정보 수집 및 이용 동의 체크박스, 약관 동의 체크박스 등 법적 요구사항을 준수하는 요소들을 함께 제공해야 합니다.
댓글, 메시지, 메모: 자유로운 텍스트 입력 영역
텍스트 필드는 사용자가 자유로운 형식의 텍스트를 입력하는 영역에도 널리 사용됩니다. 댓글 작성란에서 텍스트 필드는 사용자가 웹 페이지 또는 앱 콘텐츠에 대한 의견이나 피드백을 자유롭게 작성하고 공유하는 공간을 제공합니다. 댓글 작성란의 텍스트 필드는 글자 수 제한 기능, 첨부 파일 기능, 이모티콘 기능 등을 함께 제공하여 사용자 표현의 다양성을 높일 수 있습니다.
메시지 입력창에서 텍스트 필드는 사용자가 다른 사용자와 실시간으로 소통하는 인터페이스를 제공합니다. 메시지 입력창의 텍스트 필드는 자동 줄바꿈 기능 (multiline), 전송 버튼, 음성 메시지 녹음 버튼, 파일 첨부 버튼 등을 함께 제공하여 편리한 커뮤니케이션 환경을 제공합니다. 특히 모바일 메신저 앱에서 메시지 입력창은 핵심적인 UI 요소입니다.
메모 작성 앱 또는 텍스트 에디터 에서 텍스트 필드는 사용자가 자유롭게 텍스트를 작성하고 편집하는 주요 인터페이스입니다. 메모 앱 또는 텍스트 에디터의 텍스트 필드는 자동 저장 기능, 글꼴 설정 기능, 서식 설정 기능 (bold, italic, underline), 목록 기능 (bullet list, numbered list) 등을 함께 제공하여 사용자 생산성을 높일 수 있습니다. 텍스트 필드는 단순한 입력 상자를 넘어, 사용자의 창의적인 활동을 지원하는 도구로 활용될 수 있습니다.
최신 트렌드: 플로팅 라벨, 텍스트 필드 결합 컴포넌트
최근 텍스트 필드 디자인 트렌드에서는 플로팅 라벨 (Floating Label) 과 텍스트 필드와 다른 UI 컴포넌트를 결합한 형태가 주목받고 있습니다. 플로팅 라벨 은 텍스트 필드 내부에 placeholder 텍스트 형태로 존재하던 라벨을, 텍스트 필드에 focus 가 되면 애니메이션 효과와 함께 텍스트 필드 상단으로 이동시키는 디자인 패턴입니다. 플로팅 라벨은 텍스트 필드 공간 효율성을 높이고, 사용자가 텍스트 필드에 입력된 내용을 명확하게 인지하도록 돕습니다. 구글 머터리얼 디자인 시스템에서 널리 사용되며, 최근 많은 웹사이트 및 앱에서 채택하고 있습니다.
텍스트 필드와 드롭다운 메뉴, 자동 완성 제안, 날짜 선택기 등 다른 UI 컴포넌트를 결합한 형태는 사용자 입력 편의성을 극대화합니다. 예를 들어, 주소 검색 텍스트 필드는 텍스트 필드 입력과 동시에 자동으로 주소 검색 결과를 드롭다운 메뉴 형태로 제공하여, 사용자가 주소를 빠르고 정확하게 입력하도록 돕습니다. 날짜 입력 텍스트 필드는 텍스트 필드 클릭 시 달력 형태의 날짜 선택기 (date picker) 를 팝업하여, 사용자가 날짜를 직접 입력하는 대신 시각적으로 선택하도록 유도합니다. 텍스트 필드와 다른 컴포넌트의 결합은 사용자 입력 과정을 간소화하고, 오류를 줄이며, 사용자 경험을 향상시키는 효과적인 방법입니다.
사용자 경험을 높이는 섬세함: 텍스트 필드 디자인 핵심 요소
크기와 여백: 터치 영역과 시각적 편안함
텍스트 필드 디자인에서 크기와 여백은 사용성과 심미성에 중요한 영향을 미칩니다. 텍스트 필드의 높이는 사용자가 텍스트를 편안하게 읽고 입력할 수 있을 만큼 충분히 확보되어야 합니다. 너무 낮은 텍스트 필드는 가독성을 떨어뜨리고, 답답한 느낌을 줄 수 있습니다. 모바일 환경에서는 손가락 터치를 고려하여 텍스트 필드 높이와 터치 영역을 충분히 크게 확보해야 합니다. 너무 작은 터치 영역은 오류 터치를 유발하고, 사용자 불편함을 야기할 수 있습니다. 적절한 텍스트 필드 높이 는 사용자의 편안한 인터랙션을 돕고, 사용성 문제를 예방하는 데 중요합니다.
텍스트 필드 주변 여백 또한 중요합니다. 텍스트 필드와 라벨, 아이콘, 다른 UI 컴포넌트 간의 적절한 간격을 유지하여 시각적인 균형감과 정돈된 인상을 제공해야 합니다. 특히 여러 개의 텍스트 필드가 세로로 나열될 경우, 텍스트 필드 상하 여백을 충분히 확보하여 각 텍스트 필드를 명확하게 구분하고, 정보 구조를 쉽게 파악하도록 돕습니다. 적절한 여백 은 사용자 인터페이스의 심미성을 높이고, 사용자 경험을 향상시키는 데 기여합니다.
시각적 명확성: 경계선, 배경색, 그림자
텍스트 필드 디자인에서 시각적 명확성은 사용자가 텍스트 필드를 쉽게 인지하고 구별하도록 돕는 중요한 요소입니다. 텍스트 필드 경계선 (border), 배경색 (background color), 그림자 (shadow) 와 같은 시각적 요소들을 활용하여, 텍스트 필드를 주변 배경과 명확하게 구분하고, 입력 가능한 영역임을 강조할 수 있습니다. 아웃라인 텍스트 필드 와 채워진 텍스트 필드 는 경계선과 배경색을 활용하여 시각적 명확성을 높인 대표적인 예시입니다.
텍스트 필드 경계선 은 텍스트 필드 영역을 명확하게 구분하는 가장 기본적인 시각적 요소입니다. 경계선 두께, 색상, 스타일 (solid, dashed, dotted) 등을 조절하여 텍스트 필드의 시각적 강조 정도를 조절할 수 있습니다. 배경색 은 텍스트 필드 내부 영역을 채워 텍스트 필드를 더욱 눈에 띄게 만들고, 다른 UI 요소들과 시각적으로 구분하는 효과를 줍니다. 그림자 는 텍스트 필드에 입체감을 부여하고, 화면에서 돌출되어 보이도록 만들어 클릭 가능한 요소임을 강조하는 효과를 줍니다. 하지만 과도한 그림자 효과는 디자인을 복잡하게 만들 수 있으므로 주의해야 합니다.
텍스트 필드의 시각적 명확성은 사용자 인지성 과 사용성 에 직접적인 영향을 미칩니다. 사용자가 텍스트 필드를 쉽게 찾고, 텍스트를 입력해야 하는 영역임을 명확하게 인지할 수 있도록 시각적 요소를 신중하게 디자인해야 합니다.
힌트 문구 (Placeholder) 와 라벨: 명확한 입력 안내
텍스트 필드 디자인에서 힌트 문구 (placeholder) 와 라벨 (label) 은 사용자에게 텍스트 필드의 용도 와 입력 방식 에 대한 명확한 안내 를 제공하는 중요한 요소입니다. 힌트 문구 는 텍스트 필드 내부에 회색 텍스트 로 표시되어 입력 예시 또는 추가 설명을 제공합니다. 예를 들어, 이름 입력 텍스트 필드에는 “예: 홍길동”, 이메일 주소 입력 텍스트 필드에는 “예: example@email.com” 과 같은 힌트 문구를 표시하여 사용자가 어떤 정보를 입력해야 하는지 직관적으로 알 수 있도록 돕습니다. 힌트 문구는 텍스트 필드가 비어 있을 때만 표시되며, 텍스트 입력 시작 시 자동으로 사라집니다.
라벨 은 텍스트 필드 상단 또는 왼쪽 에 위치하며, 텍스트 필드의 제목 또는 질문 역할을 합니다. 라벨은 텍스트 필드의 전반적인 용도 를 사용자에게 명확하게 알려주고, 필수 입력 여부 (예: * 표시) 를 함께 표시하여 사용자가 필요한 정보를 빠짐없이 입력하도록 돕습니다. 라벨은 텍스트 필드 내용이 입력되어도 항상 표시 되므로, 사용자가 입력한 정보가 어떤 종류의 정보인지 지속적으로 인지하도록 돕는 역할을 합니다. 플로팅 라벨 은 힌트 문구와 라벨의 장점을 결합한 형태로, 초기에는 힌트 문구처럼 텍스트 필드 내부에 표시되다가, 텍스트 필드에 focus 되면 라벨처럼 상단으로 이동하여 표시됩니다.
힌트 문구와 라벨은 텍스트 필드의 사용성 을 크게 향상시키는 요소입니다. 사용자는 힌트 문구와 라벨을 통해 텍스트 필드의 용도를 빠르게 파악 하고, 정확하게 정보를 입력할 수 있습니다. UI 디자이너는 텍스트 필드 용도에 따라 적절한 힌트 문구와 라벨을 제공하여 사용자 경험을 최적화해야 합니다.
상태 변화와 피드백: 인터랙션 흐름 시각화
텍스트 필드는 사용자 인터랙션 에 따라 다양한 상태 변화 를 시각적으로 표현하고, 사용자에게 피드백 을 제공하여 자연스러운 인터랙션 흐름 을 만들어야 합니다. 텍스트 필드는 일반적으로 기본 상태 (default), focus 상태 (focused), 활성 상태 (active), 오류 상태 (error), 비활성화 상태 (disabled) 등 다양한 상태를 가질 수 있습니다.
기본 상태 는 텍스트 필드가 입력 대기 상태 일 때 표시되는 기본 형태입니다. Focus 상태 는 사용자가 텍스트 필드를 선택 했을 때 (마우스 클릭, 탭, 터치 등) 활성화되며, 텍스트 필드 경계선 색상 변경, 배경색 변경, 애니메이션 효과 등을 통해 시각적으로 강조하여 사용자에게 focus 상태임을 알려줍니다. 활성 상태 는 텍스트 필드에 텍스트가 입력 되었을 때 표시되는 상태이며, 입력된 텍스트를 명확하게 보여주고, 필요에 따라 추가적인 시각적 효과를 적용할 수 있습니다. 오류 상태 는 사용자가 유효하지 않은 형식 으로 텍스트를 입력했을 때 활성화되며, 텍스트 필드 경계선 색상 을 빨간색 으로 변경하거나, 에러 아이콘 또는 에러 메시지 를 함께 표시하여 사용자에게 입력 오류를 알리고, 수정을 유도합니다. 비활성화 상태 는 텍스트 필드를 사용 불가능 하게 만들 때 사용되며, 텍스트 필드 색상을 흐리게 하거나, disabled 속성 을 적용하여 사용자가 텍스트 필드와 인터랙션 할 수 없도록 합니다.
텍스트 필드 상태 변화는 사용자에게 시각적인 피드백 을 제공하고, 현재 텍스트 필드 상태를 명확하게 인지시켜 자연스럽고 직관적인 사용자 경험 을 제공하는 데 중요한 역할을 합니다. UI 디자이너는 텍스트 필드 상태 변화를 효과적으로 디자인하여 사용자와 시스템 간의 원활한 커뮤니케이션을 구축해야 합니다.
접근성: 모두를 위한 텍스트 필드
텍스트 필드 디자인은 접근성 을 반드시 고려해야 합니다. 색각 이상 사용자를 위해 텍스트 색상과 배경색 대비 를 충분히 확보하고, 색상 외에 텍스트, 아이콘, 패턴 등 다양한 시각적 요소들을 함께 사용하여 정보를 전달해야 합니다. 스크린 리더 사용자 를 위해 텍스트 필드에 적절한 alt 텍스트 (또는 aria-label 속성) 를 제공하여, 텍스트 필드의 용도를 음성으로 설명하고, 키보드 내비게이션 을 지원하여 마우스 없이도 키보드만으로 텍스트 필드를 사용할 수 있도록 해야 합니다. 자동 완성 기능 (autocomplete) 을 제공하여 인지 능력 이나 운동 능력 이 낮은 사용자의 텍스트 입력 부담을 줄여줄 수 있습니다. 입력 오류 방지 기능 (validation) 을 통해 사용자가 오류를 최소화하고, 쉽게 정보 입력을 완료하도록 도와야 합니다. 모두를 위한 디자인 은 사회적 책임이며, 사용자 경험을 향상시키는 중요한 요소입니다.
텍스트 필드, UI 디자인의 기본적이면서 핵심적인 요소: 중요성과 주의점
사용자 입력의 시작, 텍스트 필드의 중요성
텍스트 필드는 UI 디자인에서 가장 기본적인 입력 컴포넌트 이지만, 사용자와 시스템 간의 상호작용 을 가능하게 하는 핵심적인 요소 입니다. 텍스트 필드를 통해 사용자는 시스템에게 정보를 제공하고, 시스템은 제공된 정보를 바탕으로 사용자에게 필요한 기능을 제공하거나, 요청을 처리합니다. 텍스트 필드가 없다면 사용자는 시스템과 능동적으로 소통 할 수 없으며, 웹사이트 및 앱은 일방적인 정보 전달 매체 로 전락할 것입니다. 잘 디자인된 텍스트 필드는 사용자가 웹사이트 및 앱을 쉽고 효율적으로 사용하도록 돕고, 긍정적인 사용자 경험 을 형성하여 서비스 만족도를 높이는 데 기여합니다. 반대로 사용성이 떨어지는 텍스트 필드는 사용자에게 불편함 을 주고, 입력 오류를 유발하며, 심지어 서비스 이용률 감소로 이어질 수도 있습니다. 따라서 텍스트 필드 디자인은 UI 디자인에서 기본적이면서도 매우 중요한 요소이며, 사용자 중심 디자인 의 핵심입니다.
텍스트 필드 디자인, 사용 맥락과 목적에 맞는 섬세함이 필요: 주의점과 고려사항
텍스트 필드 디자인은 단순히 예쁘게 만드는 것을 넘어, 사용성, 접근성, 심미성 등 다양한 측면을 종합적으로 고려 해야 합니다. 텍스트 필드의 크기, 여백, 시각적 명확성, 힌트 문구, 라벨, 상태 변화, 피드백, 접근성 등 모든 요소들은 사용자의 인지성과 사용성에 영향을 미치므로, 각 요소들을 신중하게 선택하고 조화롭게 디자인 해야 합니다. 텍스트 필드 디자인은 단순해 보이지만, 섬세함이 필요한 작업 입니다.
텍스트 필드를 디자인할 때는 항상 사용자 중심적인 사고 를 가져야 합니다. 타겟 사용자 는 누구인지, 어떤 환경 에서 서비스를 사용하는지, 어떤 종류의 정보 를 입력해야 하는지, 어떤 목적 으로 텍스트 필드를 사용하는지 등을 고려하여, 최적의 텍스트 필드 디자인 을 도출해야 합니다. 사용자 테스트 를 통해 디자인의 유효성 을 검증하고, 지속적으로 개선 하는 노력도 필요합니다. 텍스트 필드 디자인은 끊임없는 고민과 개선 을 통해 완성도를 높여나갈 수 있습니다.
마지막으로, 디자인 시스템 가이드라인을 적극적으로 활용 하는 것을 추천합니다. 구글 머터리얼 디자인, 애플 휴먼 인터페이스 가이드라인, 마이크로소프트 Fluent 디자인과 같은 디자인 시스템은 검증된 디자인 원칙과 컴포넌트 를 제공하며, 텍스트 필드 디자인에 대한 훌륭한 참고 자료 가 될 수 있습니다. 디자인 시스템 가이드라인을 준수하면, 일관성 있고 사용하기 쉬운 사용자 인터페이스 를 효율적으로 구축할 수 있으며, 디자인 효율성 과 개발 생산성 을 동시에 향상시킬 수 있습니다. 텍스트 필드는 UI 디자인의 기본 이자 핵심 이므로, 디자인 시스템 가이드라인을 기반으로 사용자 중심적인 디자인 을 실천하는 것이 중요합니다.
#UI #UX #디자인 #텍스트필드 #컴포넌트 #웹디자인 #앱디자인 #사용자인터페이스 #사용자경험 #GUI #머터리얼디자인 #휴먼인터페이스가이드라인 #플루언트디자인 #입력폼 #폼디자인
