블로그스팟 감성 UI: 클릭하면 부드럽게 확장되는 애니메이션 검색창 만들기

 

블로그스팟 감성 더하기: 클릭하면 길어지는 '애니메이션 검색창' 만들기

작고 심플한 아이콘 형태였다가, 사용자가 클릭(Focus)하는 순간 가로로 부드럽게 길어지는 검색창은 사용자에게 시각적인 즐거움을 줍니다. 사이드바나 상단 메뉴의 좁은 공간을 넓게 쓸 수 있는 실용적인 CSS 애니메이션 검색창 적용법을 공개합니다.

1. 디자인 및 애니메이션 효과 설정 (CSS)

먼저 검색창의 기본 모양과 클릭 시 길어지는 애니메이션을 정의합니다. [테마] -> [맞춤설정] -> [고급] -> [CSS 추가]에 아래 코드를 넣으세요.

/* 검색창 전체를 감싸는 틀 */
.search-container {
  display: inline-block;
  position: relative;
}

/* 검색창 기본 스타일 */
.search-input {
  width: 150px; /* 처음에 보이는 너비 */
  padding: 10px 35px 10px 15px;
  font-size: 14px;
  border: 2px solid #ddd;
  border-radius: 25px;
  outline: none;
  background-color: #fff;
  /* 애니메이션 핵심: 너비와 테두리 색상이 0.4초 동안 부드럽게 변함 */
  transition: width 0.4s ease-in-out, border-color 0.3s;
}

/* 검색창을 클릭(Focus)했을 때 변화되는 스타일 */
.search-input:focus {
  width: 300px; /* 클릭 시 길어지는 너비 */
  border-color: #4285f4; /* 강조하고 싶은 색상 */
  box-shadow: 0 0 8px rgba(66, 133, 244, 0.2);
}

/* 돋보기 버튼 스타일 */
.search-button {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #777;
}

2. HTML 코드로 검색창 배치하기

이제 검색 기능이 작동하도록 코드를 넣습니다. [레이아웃] -> [가젯 추가] -> [HTML/JavaScript] 혹은 테마의 상단 메뉴 부분에 아래 내용을 입력하세요.

<form action="/search" class="search-container" method="get">
  <input class="search-input" name="q" placeholder="검색어를 입력하세요..." type="text"/>
  <button class="search-button" type="submit">
    🔍
  </button>
</form>

💡 완성도를 높이는 디자인 팁

• 너비 조절: 본인의 블로그 레이아웃에 맞춰 width 값을 조절하세요. 모바일 환경을 고려한다면 max-width: 90vw;를 추가하는 것이 좋습니다.
• 색상 매칭: border-color를 블로그의 브랜드 컬러와 맞추면 훨씬 통일감 있는 디자인이 완성됩니다.
• 아이콘 활용: '🔍' 이모지 대신 Font Awesome 같은 아이콘 라이브러리를 사용하면 훨씬 더 전문적인 웹사이트 느낌을 줄 수 있습니다.

작은 애니메이션 하나가 블로그의 첫인상을 바꿉니다. 사용자가 검색하고 싶어지는 즐거운 경험을 지금 바로 제공해 보세요!