아임웹 세로 탭 메뉴 만들기｜고급 탭 UI 제작 방법 (반응형 지원)

아임웹 코드정리

아임웹 세로 탭 메뉴 만들기｜고급 탭 UI 제작 방법 (반응형 지원)

meztahstudio 2026. 6. 5. 13:02

홈페이지를 제작하다 보면 많은 내용을 한 화면 안에 깔끔하게 정리해야 하는 경우가 있습니다.

특히 회사 소개, 서비스 소개, 제작 프로세스, 포트폴리오 설명처럼 여러 내용을 구분해서 보여주고

싶을 때 일반적인 텍스트 나열 방식은 가독성이 떨어질 수 있습니다.

이번에 소개하는 코드는 아임웹에서 사용할 수 있는 세로형 탭 메뉴 디자인입니다.

왼쪽 탭을 클릭하면 오른쪽 콘텐츠가 자연스럽게 변경되며, 모바일에서는 가로 스크롤 탭으로 자동 전환되어 반응형까지 지원합니다.

실제 구현 예시

믓아 스튜디오

믓아 스튜디오는 브랜드의 본질을 시각적으로 재해석해, 감각적이고 구조적인 웹 경험을 만듭니다. 브랜딩 웹사이트, 클리닉·법률·기업 사이트, 크리에이티브 페이지 제작 전문.

meztahstudio.imweb.me

이 코드로 구현되는 기능

세로형 탭 메뉴 UI
클릭 시 콘텐츠 변경
이미지와 텍스트 동시 변경
부드러운 페이드 애니메이션
모바일 반응형 지원
HTML/CSS/JS만으로 구현
아임웹 HTML 위젯에서 바로 사용 가능

사용하면 좋은 상황

이 커스텀 코드는 다음과 같은 홈페이지 제작에 특히 잘 어울립니다.

구분	목록	내용
1	기업	회사소개
2	브랜드	스토리 소개
3	병원	프로세스 소개
4	법률사무소, 법무법인	상담 절차 안내
5	제조업	생산 과정 소개
6	서비스	서비스 특징 정리
7	포트폴리오	카테고리 설명

여러 내용을 한 화면 안에서 깔끔하게 정리할 수 있기 때문에 정보 전달력이 좋아집니다.

적용 방법

1. 아임웹 HTML 위젯 추가

관리자 페이지 → 디자인 모드 → HTML 위젯 추가

2. 코드 붙여넣기

아래 전체 코드를 HTML 위젯에 그대로 붙여넣습니다.

3. 이미지 및 문구 수정

각 탭 안의 제목, 설명, 이미지 주소만 변경하면 원하는 형태로 사용할 수 있습니다.

전체 코드

아래 코드를 그대로 복사해서 사용하면 됩니다.

<section class="motsa-premium-tab">
  <div class="motsa-premium-wrap">

    <div class="motsa-tab-left">
      <button class="motsa-tab-btn active" data-tab="tab1">
        <span>01</span>
        <strong>BRANDING</strong>
      </button>
      <button class="motsa-tab-btn" data-tab="tab2">
        <span>02</span>
        <strong>DESIGN</strong>
      </button>
      <button class="motsa-tab-btn" data-tab="tab3">
        <span>03</span>
        <strong>PROCESS</strong>
      </button>
      <button class="motsa-tab-btn" data-tab="tab4">
        <span>04</span>
        <strong>RESULT</strong>
      </button>
    </div>

    <div class="motsa-tab-right">

      <div class="motsa-tab-panel active" id="tab1">
        <div class="motsa-tab-text">
          <em>Brand Strategy</em>
          <h2>브랜드의 방향을 먼저 정리합니다</h2>
          <p>
            업종, 고객층, 서비스의 강점을 정리해 홈페이지 전체 흐름을 설계합니다.
          </p>
        </div>
        <div class="motsa-tab-image">
          <img src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=900&q=80" alt="브랜딩 이미지">
        </div>
      </div>

      <div class="motsa-tab-panel" id="tab2">
        <div class="motsa-tab-text">
          <em>Visual Design</em>
          <h2>고급스럽고 신뢰감 있는 화면을 만듭니다</h2>
          <p>
            여백, 타이포, 이미지 비율을 조정해 안정적인 홈페이지 디자인을 구성합니다.
          </p>
        </div>
        <div class="motsa-tab-image">
          <img src="https://images.unsplash.com/photo-1497215842964-222b430dc094?auto=format&fit=crop&w=900&q=80" alt="디자인 이미지">
        </div>
      </div>

      <div class="motsa-tab-panel" id="tab3">
        <div class="motsa-tab-text">
          <em>Work Process</em>
          <h2>목적에 맞는 제작 과정을 진행합니다</h2>
          <p>
            메인 구조 설계부터 상세 페이지, 반응형 최적화까지 단계별로 진행합니다.
          </p>
        </div>
        <div class="motsa-tab-image">
          <img src="https://images.unsplash.com/photo-1556761175-4b46a572b786?auto=format&fit=crop&w=900&q=80" alt="프로세스 이미지">
        </div>
      </div>

      <div class="motsa-tab-panel" id="tab4">
        <div class="motsa-tab-text">
          <em>Final Result</em>
          <h2>문의로 이어지는 홈페이지를 완성합니다</h2>
          <p>
            필요한 정보를 적절한 순서로 배치해 방문자의 행동을 유도합니다.
          </p>
        </div>
        <div class="motsa-tab-image">
          <img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=900&q=80" alt="결과 이미지">
        </div>
      </div>

    </div>
  </div>
</section>

<style>
.motsa-premium-tab,
.motsa-premium-tab * {
  font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif !important;
  box-sizing: border-box;
}

.motsa-premium-tab {
  width: 100%;
  padding: 70px 20px;
  background: #ffffff;
}

.motsa-premium-wrap {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  align-items: stretch;
}

/* 왼쪽 탭 */
.motsa-tab-left {
  height: 400px;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  gap: 10px;
}

.motsa-tab-btn {
  width: 100%;
  height: calc((400px - 30px) / 4);
  padding: 18px 20px;
  border: 1px solid #e5e5e5;
  background: #f5f5f5;
  border-radius: 16px;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
}

.motsa-tab-btn span {
  display: block;
  margin-bottom: 8px;
  color: #999999;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.motsa-tab-btn strong {
  display: block;
  color: #111111;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.motsa-tab-btn:hover {
  background: #eeeeee;
}

.motsa-tab-btn.active {
  background: #111111;
  border-color: #111111;
}

.motsa-tab-btn.active span {
  color: #d0d0d0;
}

.motsa-tab-btn.active strong {
  color: #ffffff;
}

/* 오른쪽 카드 */
.motsa-tab-right {
  height: 400px;
  position: relative;
}

.motsa-tab-panel {
  display: none;
  width: 100%;
  height: 400px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 20px;
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 28px;
  align-items: stretch;
}

.motsa-tab-panel.active {
  display: grid;
  animation: motsaPremiumFade 0.35s ease;
}

.motsa-tab-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 8px 0 18px;
}

.motsa-tab-text em {
  margin-bottom: 14px;
  color: #777777;
  font-size: 13px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.motsa-tab-text h2 {
  margin: 0 0 16px;
  color: #111111;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.05em;
}

.motsa-tab-text p {
  max-width: 480px;
  margin: 0;
  color: #666666;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: -0.03em;
}

.motsa-tab-image {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #eeeeee;
}

.motsa-tab-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 애니메이션 */
@keyframes motsaPremiumFade {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 모바일 */
@media (max-width: 900px) {
  .motsa-premium-tab {
    padding: 50px 16px;
  }

  .motsa-premium-wrap {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .motsa-tab-left {
    height: auto;
    display: flex;
    overflow-x: auto;
    gap: 10px;
  }

  .motsa-tab-btn {
    min-width: 150px;
    height: auto;
    padding: 18px;
    border-radius: 16px;
  }

  .motsa-tab-right {
    height: auto;
  }

  .motsa-tab-panel {
    height: auto;
    min-height: 420px;
    padding: 20px;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .motsa-tab-text {
    padding: 4px 4px 0;
  }

  .motsa-tab-text h2 {
    font-size: 28px;
  }

  .motsa-tab-text p {
    font-size: 15px;
  }

  .motsa-tab-image {
    height: 230px;
  }
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const tabButtons = document.querySelectorAll(".motsa-tab-btn");
  const tabPanels = document.querySelectorAll(".motsa-tab-panel");

  tabButtons.forEach(function (button) {
    button.addEventListener("click", function () {
      const targetTab = button.getAttribute("data-tab");

      tabButtons.forEach(function (btn) {
        btn.classList.remove("active");
      });

      tabPanels.forEach(function (panel) {
        panel.classList.remove("active");
      });

      button.classList.add("active");
      document.getElementById(targetTab).classList.add("active");
    });
  });
});
</script>

코드 수정 포인트

1. 탭 제목 변경

현재

<strong>BRANDING</strong>

부분을 수정하면 됩니다.

예시

<strong>회사소개</strong>

메인 제목 변경

현재

<h2>브랜드의 방향을 먼저 정리합니다</h2>

부분을 수정하면 됩니다.

2. 설명 문구 변경

현재

<p>
업종, 고객층, 서비스의 강점을 정리해 홈페이지 전체 흐름을 설계합니다.
</p>

부분을 수정하면 됩니다.

3. 이미지 변경

현재

<img src="이미지주소">

형태로 되어 있습니다.

원하는 이미지 URL로 변경하면 됩니다.

4. 높이 변경

현재 전체 높이는

height: 400px;

으로 설정되어 있습니다.

더 크게 사용하려면

height: 500px;

처럼 수정하면 됩니다.

5. 컬러 변경

선택된 탭의 배경색

.motsa-tab-btn.active{
  background:#111111;
}

브랜드 컬러에 맞게 변경 가능합니다.

예시

background:#1e40af;

자주 발생하는 오류와 해결 방법

1. 탭이 클릭되지 않는 경우

자바스크립트 코드가 누락되었는지 확인합니다.

반드시 HTML, CSS, JS가 모두 들어가 있어야 합니다.

2. 이미지가 보이지 않는 경우

이미지 URL이 잘못되었거나 외부 이미지 접근이 차단된 경우입니다.

직접 업로드한 이미지 URL을 사용하는 것을 추천합니다.

3. 모바일에서 깨지는 경우

코드 하단의 반응형 CSS가 삭제되지 않았는지 확인합니다.

@media (max-width:900px)

부분이 반드시 포함되어 있어야 합니다.

4. 폰트가 적용되지 않는 경우

현재 코드는

Pretendard

기준으로 제작되어 있습니다.

사이트에 해당 폰트가 없으면 기본 고딕 폰트로 표시됩니다.

홈페이지 제작 시 이런 UI가 중요한 이유

많은 홈페이지가 정보를 단순히 나열하는 방식으로 제작됩니다.

하지만 방문자는 긴 내용을 처음부터 끝까지 읽지 않습니다.

탭 UI를 활용하면 필요한 정보를 단계별로 정리할 수 있고, 사용자가 원하는 내용을 직접 선택해 볼 수 있기 때문에 체류시간과 가독성을 높이는 데 도움이 됩니다.

특히 아임웹 홈페이지 제작 시 브랜드 소개, 제작 과정, 서비스 설명 섹션에서 활용도가 높은 커스텀 코드입니다.

이번 HTML/CSS/JS 커스텀 코드는 아임웹에서 활용하기 좋은 프리미엄 탭 섹션입니다.

코드만 붙여넣어도 고급스러운 웹디자인을 구현할 수 있으며, 기업 홈페이지, 병원 홈페이지,

법률사무소 홈페이지, 제조업 홈페이지 등 다양한 업종에 적용할 수 있습니다.

아임웹 기본 기능만으로 부족했던 디자인을 커스텀 코드로 확장하고 싶다면 활용해 보시길 추천드립니다.

홈페이지 제작 문의

믓아 스튜디오

meztahstudio.imweb.me

기본 가로탭 만들기

아임웹 탭 메뉴 만들기｜버튼 클릭으로 섹션 전환하는 커스텀 코드

아임웹에서 탭 버튼으로 섹션 전환하기아임웹으로 홈페이지를 제작하다 보면 갤러리, 이미지, 일정처럼 여러 콘텐츠를 한 화면에서 깔끔하게 보여주고 싶은 경우가 많습니다.하지만 섹션을 모

meztahstudio.tistory.com

'아임웹 코드정리' 카테고리의 다른 글

아임웹 스크롤 텍스트 애니메이션 만들기 \| 등장하는 타이포그래피 커스텀 코드 (0)	2026.06.06
아임웹 카드 슬라이드 커스텀 코드 \| 고급 카드 캐러셀 디자인 구현하기 (0)	2026.06.06
아임웹 게시판 커스텀ㅣQ&A 게시판 답변완료 배지 자동 표시하는 방법 (0)	2026.06.04
아임웹 풀페이지 슬라이드 만들기 \| 스크롤 연동 메인 비주얼 코드 (0)	2026.06.04
아임웹 기본 갤러리 커스텀 코드 공유 \| 더 고급스럽게 만드는 코드 (0)	2026.06.03

현재글아임웹 세로 탭 메뉴 만들기｜고급 탭 UI 제작 방법 (반응형 지원)

믓아스튜디오

전환 중심 홈페이지 제작소 meztahstudio 믓아스튜디오 https://meztahstudio.imweb.me/

믓아스튜디오