FRONTEND

모바일 앱처럼 보이는 웹 만들기!

주니어발록 2025. 2. 15. 20:30

얼마 전, 일상 속에서 간단한 ‘다이어트 기록’ 같은 기능이 필요해서 모바일 화면에 최적화된 웹앱을 만들어보기로 마음먹었습니다. 저는 React를 주로 사용하기 때문에, 모바일 친화 UI를 간단히 구현하는데 흔히 쓰는 Material UI(MUI)나 Bootstrap을 사용할지 고민했습니다.

  • Material UI(MUI):
    React와 궁합이 좋아 컴포넌트화를 많이 해두었고, 디자인도 모던하며 풍부한 컴포넌트를 제공합니다. 다만, 모바일 플랫폼 자체(예: iOS/Android)에 맞춰진 네이티브 느낌보다는 Web 기반의 일관된 머티리얼 디자인을 제공한다는 특징이 있습니다.
  • Bootstrap:
    웹 앱을 빠르게 만들고 싶을 때 유용합니다. 역시 반응형(Responsive)에 대한 고려가 기본적으로 들어가 있어 간단한 모바일 대응을 하기에도 나쁘지 않습니다. 하지만 Bootstrap 특유의 스타일(그리드, 컴포넌트 등)은 일관된 모바일 OS별 느낌보다는 ‘웹사이트의 반응형’에 초점이 맞춰져 있습니다.

하지만 이번 프로젝트는 모바일 앱처럼 보이고, 사용자 입장에서는 iOS면 iOS 스타일, 안드로이드면 안드로이드 스타일로 보이게 하고싶었습니다. 그러던 중 Ionic을 알게 되었고, Ionic은 플랫폼별로 UI가 달리 보이는 기능이 있다는 점이 매력적으로 다가왔습니다.

Ionic 선택 이유

  1. 플랫폼별 스타일 적용: iOS, Android 각각 맞춤 UI가 적용되어 네이티브 앱에 가까운 사용자 경험을 제공합니다.
  2. React와 궁합: Ionic React를 공식적으로 지원하기 때문에, 기존에 React를 써 왔던 분이라면 비교적 쉽게 적응할 수 있습니다.
  3. 풍부한 컴포넌트: IonHeader, IonToolbar, IonContent 등 기본 레이아웃부터 IonButtons, IonModal 등 다양한 컴포넌트가 준비되어 있어, 앱 개발에 필요한 구성 요소를 빠르게 붙일 수 있습니다.

Ionic CLI 설치 및 프로젝트 생성

Ionic을 시작하기에 앞서, 전역 설치를 해두면 편리합니다.

# Ionic CLI 전역 설치
npm install -g @ionic/cli

이제 CLI를 통해 프로젝트를 생성할 수 있습니다. 

ionic start

그럼 CLI가 몇 가지 질문을 합니다.

  1. 프로젝트 이름: 예: diet-front
  2. 프레임워크 선택: React 선택
  3. 템플릿: tabs, blank, sidemenu 등 다양한 템플릿 중 원하는 것을 골라볼 수 있습니다.
    • tabs 템플릿을 고른다고 가정해봅시다.

프로젝트가 생성되면, 폴더 구조는 대략 다음과 같습니다:

diet-front
 ┣ node_modules
 ┣ public
 ┣ src
 ┃ ┣ App.css
 ┃ ┣ App.tsx
 ┃ ┣ index.tsx
 ┃ ┗ theme
 ┣ package.json
 ┣ tsconfig.json
 ┗ ...

Ionic CLI는 CRA(Create React App) 기반이 아니라, 자체적인 구조를 잡아줍니다.
그렇지만 Vite를 쓰고 싶다면, Ionic CLI 대신 직접 Vite 프로젝트를 생성하고 Ionic을 설치하는 방식으로 진행할 수도 있습니다.

프로젝트 실행

프로젝트 폴더(diet-front)로 들어가서 다음 명령어로 앱을 실행합니다:

cd diet-front
ionic serve

이 명령어를 실행하면 기본적으로 로컬 웹 서버가 http://localhost:8100 에서 구동되고, 브라우저를 통해 Ionic React 앱을 바로 확인할 수 있습니다.

최초 실행 화면

만약 tabs 템플릿으로 프로젝트가 생성되었다면, 처음 앱을 띄웠을 때 화면 하단에 탭 바가 보이고, 각각 Tab 1, Tab 2, Tab 3와 같은 라벨이 표시됩니다. 탭을 누르면 해당 화면이 전환되는 것을 확인할 수 있습니다.

이것이 기본적으로 제공되는 Ionic의 탭 구조이며, 코드에는 다음과 같은 컴포넌트들이 포함되어 있습니다:

  • IonTabs: 탭 네비게이션을 담당하는 컨테이너
  • IonRouterOutlet: 탭마다 서로 다른 라우트를 렌더링
  • IonTabBar: 화면 하단의 탭 바
  • IonTabButton: 개별 탭 버튼

만약 템플릿을 blank로 선택했다면, “Ionic React”라는 안내 문구가 크게 뜨고, 중앙에 “Explore Ionic Docs” 링크가 보일 겁니다. 하지만 tabs 템플릿은 하단 탭 네비게이션이 기본으로 구성된다는 점이 다릅니다.

Ionic이 자동으로 폴더 구조를 만들고, 기본 라우팅까지 세팅해주기 때문에, 우리는 디자인이나 기능 구현에만 집중할 수 있습니다. 처음 실행 화면에서 탭간 이동이 잘 동작한다면, Ionic React 프로젝트가 정상적으로 설정된 것입니다.

Ionic과 MUI, Bootstrap의 차이점

  • MUI와의 차이:
    • MUI도 React 컴포넌트 기반으로, 사용법이 크게 다르지는 않습니다. 그러나 MUI는 전반적으로 ‘머티리얼 디자인’이 고정된 형태라 iOS, Android 별로 테마가 달라지지 않습니다.
    • Ionic React는 플랫폼을 감지하여 iOS 스타일(둥근 버튼, 슬라이드 애니메이션) 또는 Android 스타일(Material Design UI)을 자동으로 설정합니다.
    • 예컨대, MUI의 <Button variant="contained">Click Me</Button> 와 유사하게, Ionic에서는 <IonButton>Click Me</IonButton>을 사용하지만, 기기에 따라 스타일이 자동으로 달라집니다.
  • Bootstrap과의 차이:
    • Bootstrap은 반응형 웹(Responsive Web)에 포커스가 맞춰져 있어, 모바일 기기에서 화면 크기에 따라 UI가 최적화되긴 하지만, iOS/Android 고유의 네이티브 앱 느낌보다는 “웹”의 느낌이 더 강합니다.
    • Ionic은 모바일 앱처럼 헤더, 툴바, 탭 바, 모달 등을 미리 갖추고 있고, 적은 작업으로도 앱에 가까운 사용자 경험을 만들어줄 수 있다는 점이 다릅니다.

다시 말해, MUI나 Bootstrap도 충분히 모바일 환경에 대응할 수 있지만, Ionic은 진짜 모바일 앱 느낌을 내고 싶을 때 좀 더 적합합니다.

Ionic 컴포넌트 맛보기

여기서 간단히 몇 가지 Ionic 컴포넌트를 살펴보겠습니다.

IonHeader, IonToolbar, IonTitle

<IonHeader>
  <IonToolbar>
    <IonTitle>Ionic Header</IonTitle>
  </IonToolbar>
</IonHeader>
  • iOS에서는 상단에 투명한 헤더(혹은 블러 처리)가, Android에서는 Material Design 느낌의 툴바가 표시됩니다.
  • MUI의 <AppBar>와 비슷한 개념이지만, 플랫폼에 따른 스타일 차이가 자동 적용됩니다.

IonButton

<IonButton color="primary" expand="full">
  클릭하세요
</IonButton>
  • Android 기기에서 Material Design 버튼, iOS에서는 iOS 스타일 버튼으로 보입니다.
  • expand="full" 속성을 주면 버튼이 화면 폭 전체를 차지하게 됩니다(마치 Bootstrap의 btn-block 같은 느낌).

IonIcon

import { IonIcon } from '@ionic/react';
import { addCircleOutline } from 'ionicons/icons';

<IonIcon icon={addCircleOutline} />
  • Ionic에서 제공하는 Ionicons 아이콘을 쓸 수 있습니다.
  • 플랫폼별 애니메이션이나 아이콘 스타일이 조금씩 달라지는 경우도 있습니다.


처음에 “앱 개발을 따로 해야 하나?”를 고민했었지만, Ionic을 사용하니 기존 웹 개발 역량만으로도 네이티브 앱 같은 화면을 구현할 수 있었습니다. 요즘처럼 거의 모든 사람이 스마트폰을 사용하는 시대에, 간단한 아이디어를 빠르게 모바일 친화 웹으로 만들어볼 수 있는 건 큰 장점이라고 생각합니다. 앞으로도 Ionic을 활용해서 편리하고 깔끔한 모바일 웹을 만들어보길 추천드립니다.