AI 기반 개발 환경에서의 실시간 프로토타이핑

최근 모바일 상거래 앱의 상품 노출 페이지를 신속하게 제작할 수 있는 워크플로우를 정립했다. Vue 3와 TypeScript 기반의 프로젝트에 Vant UI 컴포넌트 라이브러리를 통합하고, AI 기반 개발 플랫폼을 활용해 초기 구조를 자동 생성함으로써 수작업 코드 작성 시간을 크게 줄였다.

기본 레이아웃 구성

Vant에서 제공하는 van-nav-bar와 van-tabbar를 사용하여 시각적으로 일관된 네비게이션 구조를 확보했다. 상단에는 로고와 백 버튼을 포함한 내비게이션 바를 배치하고, 하단 탭바는 '홈', '카테고리', '장바구니', '마이페이지' 네 가지 주요 메뉴로 구성되었다. 이 구조는 AI 플랫폼에 자연어로 요청을 입력하면 즉시 반영되는 방식으로 생성되었으며, 컴포넌트 간 라우팅 설정까지 자동으로 완성된다.

<template>
  <div class="app-container">
    <van-nav-bar title="모바일 몰" fixed />
    <router-view class="page-content" />
    <van-tabbar v-model="activeTab">
      <van-tabbar-item icon="home-o">홈</van-tabbar-item>
      <van-tabbar-item icon="apps-o">카테고리</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o">장바구니</van-tabbar-item>
      <van-tabbar-item icon="user-o">내 정보</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

상품 목록 페이지 구현

핵심 콘텐츠 영역인 상품 리스트는 van-card 컴포넌트를 중심으로 설계했다. 각 카드는 상품 이미지, 이름, 가격 정보를 표시하며, 우측 상단에 van-icon을 이용한 즐겨찾기 버튼을 배치하여 사용자가 관심 상품을 저장할 수 있도록 했다. 목록은 van-list로 감싸져 있으며, 스크롤 기반 데이터 로딩이 가능하다.

스무스한 스크롤 경험 구현

사용자 경험을 향상시키기 위해 van-pull-refresh와 van-list의 load 이벤트를 결합하여 아래로 당기는 새로고침과 무한 스크롤을 동시에 적용했다. 초기 데이터 로딩 후, 사용자가 화면 하단에 도달하면 자동으로 다음 페이지를 요청하도록 설정하였다. AI 도구를 통해 생성된 기본 로직을 기반으로, API 응답 구조에 맞춰 비즈니스 로직만 추가 보완하면 완성된다.

상세 페이지의 인터랙티브 요소

상품 상세 화면에서는 van-swipe를 사용하여 대표 이미지를 슬라이드 전환 형식으로 노출했다. 인디케이터를 활성화하고 자동 재생 기능도 포함시켰다. 하단에는 van-action-bar를 고정 배치하여 '장바구니 담기'와 '바로 구매' 버튼을 항상 접근 가능하게 했다. 이들 컴포넌트의 속성 값은 AI가 제안한 디폴트 설정을 기반으로, 브랜드 색상과 맞춰 커스터마이징했다.

브랜드 컬러 적용 및 테마 관리

브랜드 아이덴티티를 강화하기 위해 전역 테마 컬러를 #07C160(유赞 그린)으로 지정했다. Vant는 Sass 변수 오버라이드를 통해 테마를 쉽게 변경할 수 있는데, AI 플랫폼에서는 이 설정을 프로젝트 옵션에서 바로 조정할 수 있다. 이를 통해 버튼, 아이콘, 인디케이터 등 모든 요소가 일괄적으로 브랜드 컬러로 반영된다.

// variables.scss
$--color-primary: #07c160;

반응형 레이아웃을 위한 rem 기반 유닛 변환

다양한 해상도의 모바일 기기에 대응하기 위해 px 단위를 rem으로 자동 변환하는 구조를 채택했다. postcss-pxtorem 플러그인을 프로젝트에 적용하고, 루트 폰트 사이즈를 기기 너비에 따라 동적으로 계산하도록 설정했다. 이 설정 역시 AI 개발 환경에서 사전 템플릿으로 제공되어, 별도의 수동 설정 없이 바로 사용 가능하다.

실시간 미리보기 및 원클릭 배포

개발 중 가장 큰 장점은 코드 수정 후 실시간 미리보기 기능이었다. 저장 즉시 브라우저에서 결과를 확인할 수 있어 UI 튜닝이 매우 직관적이었다. 작업 완료 후에는 내장된 배포 기능을 통해 정적 호스팅 링크를 즉시 생성할 수 있었으며, QA 테스트나 제품 책임자 검토용으로 빠르게 공유할 수 있었다.