AI 기반 시각화 전문지식 서비스

프로그램개발 · 분야 선택22개 분야

Ver2.0 전체 열람

Ver2.0 NativeScript와 Vue.js로 모바일 앱 개발하기 🚀

2025.05.05

재능넷

댓글 0 전체 50 페이지

NativeScript와 Vue.js로 모바일 앱 개발하기 🚀

네이티브 성능의 크로스 플랫폼 앱을 만드는 신세계로 초대할게! 👋

📱 안녕, 앱 개발자가 되고 싶은 친구들! 👨‍💻

모바일 앱을 만들고 싶은데 iOS랑 안드로이드 둘 다 따로 개발하려니 머리가 아프지? 게다가 Swift, Kotlin, Java 등 여러 언어를 다 배워야 한다고? 헉, 그건 너무 힘들잖아! 근데 만약 웹 개발 지식으로 네이티브 앱을 만들 수 있다면 어떨까? 그것도 한 번 코딩해서 iOS랑 안드로이드 앱을 동시에 만들 수 있다면? 🤩

바로 그런 마법 같은 일을 가능하게 해주는 게 NativeScript와 Vue.js의 조합이야! 이 글에서는 웹 개발자도 쉽게 모바일 앱을 만들 수 있는 방법을 알려줄게. 재능넷에서 프로그래밍 재능을 나누는 많은 개발자들도 이 기술 조합을 활용해서 효율적으로 앱을 개발하고 있어!

🧩 NativeScript와 Vue.js가 뭐길래? 🤔

본격적인 개발에 들어가기 전에 이 두 기술이 정확히 뭔지 알아보자!

🟢 Vue.js란?

Vue.js는 사용자 인터페이스를 만들기 위한 프론트엔드 자바스크립트 프레임워크야. React나 Angular와 비슷하지만, 배우기 쉽고 가볍다는 장점이 있어. 컴포넌트 기반 아키텍처를 사용해서 UI를 재사용 가능한 조각으로 나눌 수 있지. 데이터와 화면이 자동으로 동기화되는 반응형 시스템도 갖추고 있어서 개발이 정말 편리해! 😊

🔵 NativeScript란?

NativeScript는 JavaScript, TypeScript, Angular, Vue.js 등을 사용해서 진짜 네이티브 모바일 앱을 만들 수 있게 해주는 오픈 소스 프레임워크야. 웹뷰를 사용하는 하이브리드 앱과 달리, NativeScript는 네이티브 UI 컴포넌트를 직접 사용하기 때문에 성능이 뛰어나고 네이티브 API에 직접 접근할 수 있어! 🚀

🌟 NativeScript + Vue.js의 장점 🌟

이 두 기술을 합치면 어떤 마법이 일어날까? 한번 살펴보자!

하나의 코드베이스로 iOS와 Android 앱을 동시에 개발할 수 있어 - 코드 중복 작업 NO! 🙅‍♂️
웹 개발 지식(HTML, CSS, JavaScript)을 활용할 수 있어 - 새로운 언어 배울 필요 NO! 🙅‍♀️
Vue.js의 간결한 문법과 컴포넌트 시스템으로 개발 속도가 빨라져 - 생산성 UP! 📈
네이티브 UI 컴포넌트를 사용해 네이티브 앱 수준의 성능을 제공해 - 느린 앱 NO! ⚡
네이티브 API에 직접 접근 가능 - 카메라, GPS, 푸시 알림 등 모든 기능 OK! 📱
활발한 커뮤니티와 풍부한 플러그인 생태계 - 개발 난이도 DOWN! 🔽
Hot Module Replacement 지원으로 실시간 코드 변경 반영 - 개발 경험 UP! 🔄

🛠 개발 환경 설정하기 🔧

자, 이제 본격적으로 NativeScript와 Vue.js로 앱을 만들어볼까? 먼저 개발 환경을 설정해보자!

1️⃣ 필수 도구 설치하기

NativeScript 개발을 위해서는 몇 가지 도구가 필요해. 차근차근 설치해보자!

Node.js 설치

NativeScript는 Node.js 환경에서 실행되니까 먼저 Node.js를 설치해야 해. nodejs.org에서 LTS 버전을 다운로드하고 설치하면 돼!

NativeScript CLI 설치

터미널이나 명령 프롬프트를 열고 다음 명령어를 실행해:

npm install -g nativescript

설치가 완료되면 ns 명령어를 사용할 수 있게 돼!

2️⃣ 플랫폼별 요구사항 설정

Android 개발 환경 설정

Android 앱을 개발하려면 다음이 필요해:

JDK (Java Development Kit) 8 이상
Android Studio
Android SDK

NativeScript CLI가 자동으로 환경을 확인하고 필요한 것들을 알려줄 거야. 터미널에서 ns doctor android 명령어를 실행해서 확인해봐!

iOS 개발 환경 설정 (macOS 필요)

iOS 앱을 개발하려면 macOS 컴퓨터와 다음이 필요해:

Xcode (App Store에서 설치)
Xcode Command Line Tools

터미널에서 ns doctor ios 명령어를 실행해서 필요한 설정을 확인할 수 있어!

3️⃣ 환경 설정 확인하기

모든 설치가 끝났으면 다음 명령어로 환경이 제대로 설정되었는지 확인해보자:

ns doctor

이 명령어는 NativeScript 개발에 필요한 모든 요소가 제대로 설치되었는지 확인해줘. 문제가 있으면 해결 방법도 알려줄 거야! 👨‍⚕️

🚀 첫 NativeScript-Vue 앱 만들기 🚀

이제 개발 환경이 준비되었으니 첫 번째 앱을 만들어볼까? 정말 간단하니까 따라와봐!

1️⃣ 새 프로젝트 생성하기

터미널을 열고 다음 명령어를 실행해:

ns create my-first-app --vue

이 명령어는 'my-first-app'이라는 이름의 NativeScript-Vue 프로젝트를 생성해줘. --vue 플래그는 Vue.js 템플릿을 사용하겠다는 의미야. 생성이 완료되면 새 프로젝트 폴더로 이동해보자:

cd my-first-app

2️⃣ 프로젝트 구조 살펴보기

생성된 프로젝트의 구조를 간단히 살펴보자:

my-first-app/
├── app/                  # 앱 소스 코드
│   ├── assets/           # 이미지, 폰트 등의 자산
│   ├── components/       # Vue 컴포넌트
│   ├── App.vue           # 메인 앱 컴포넌트
│   └── main.js           # 앱 진입점
├── node_modules/         # npm 패키지
├── package.json          # 프로젝트 의존성 정보
└── webpack.config.js     # 웹팩 설정

App.vue 파일이 앱의 시작점이라고 생각하면 돼. 이 파일을 수정해서 앱의 UI를 변경할 수 있어!

3️⃣ 앱 실행하기

이제 앱을 실행해볼까? 다음 명령어 중 하나를 사용해서 앱을 실행할 수 있어:

Android 기기나 에뮬레이터에서 실행:

ns run android

iOS 시뮬레이터에서 실행 (macOS 필요):

ns run ios

명령어를 실행하면 앱이 빌드되고 에뮬레이터나 연결된 실제 기기에서 실행돼. 첫 실행은 시간이 좀 걸릴 수 있으니 인내심을 갖고 기다려봐! ⏳

📝 기본 UI 구성하기 📝

NativeScript-Vue에서는 HTML과 비슷하지만 네이티브 UI 컴포넌트를 사용하는 특별한 태그들을 사용해. 기본적인 UI 컴포넌트들을 알아보자!

🧩 기본 UI 컴포넌트

Page: 앱의 한 화면을 나타내는 컴포넌트
ActionBar: 페이지 상단의 액션 바 (제목, 버튼 등)
Label: 텍스트를 표시하는 컴포넌트 (HTML의 span과 유사)
Button: 사용자가 탭할 수 있는 버튼
TextField: 한 줄 텍스트 입력 필드
TextView: 여러 줄 텍스트 입력 필드
Image: 이미지를 표시하는 컴포넌트
ListView: 스크롤 가능한 항목 목록 (HTML의 ul과 유사)
StackLayout: 자식 요소를 수직 또는 수평으로 쌓는 레이아웃
GridLayout: 자식 요소를 그리드 형태로 배치하는 레이아웃

📱 간단한 UI 만들기

이제 App.vue 파일을 수정해서 간단한 UI를 만들어보자! 기본 생성된 App.vue 파일을 열고 다음과 같이 수정해봐:

<template>
  <Page>
    <ActionBar title="내 첫 NativeScript-Vue 앱" />
    <StackLayout>
      <Image src="~/assets/logo.png" width="200" height="200" />
      <Label text="안녕하세요!" class="title" />
      <Label text="NativeScript + Vue.js로 만든 앱이에요!" class="message" />
      <Button text="클릭해보세요!" @tap="onButtonTap" class="btn btn-primary" />
      <Label :text="message" class="message" textWrap="true" />
    </StackLayout>
  </Page>
</template>

<script>
export default {
  data() {
    return {
      message: ""
    };
  },
  methods: {
    onButtonTap() {
      this.message = "버튼을 클릭했어요! 🎉";
      console.log("버튼이 탭되었습니다!");
    }
  }
};
</script>

<style scoped>
.title {
  font-size: 24;
  font-weight: bold;
  margin: 10;
  text-align: center;
}
.message {
  font-size: 18;
  margin: 10;
  text-align: center;
}
.btn {
  font-size: 18;
  margin: 20;
}
</style>

이 코드는 간단한 UI를 만들어줘. 앱 상단에 ActionBar가 있고, 그 아래에 로고 이미지, 텍스트, 버튼이 수직으로 배치돼 있어. 버튼을 탭하면 메시지가 표시되는 간단한 기능이지!

파일을 저장하고 앱을 다시 실행해보면 변경사항이 바로 반영돼. NativeScript CLI는 Hot Module Replacement를 지원하기 때문에 대부분의 변경사항은 앱을 다시 빌드하지 않고도 실시간으로 확인할 수 있어! 👍

🧭 페이지 간 이동 구현하기 🧭

실제 앱은 보통 여러 화면으로 구성되어 있지. NativeScript-Vue에서는 어떻게 여러 페이지 간 이동을 구현할 수 있는지 알아보자!

1️⃣ 라우팅 설정하기

NativeScript-Vue에서는 vue-router와 유사한 방식으로 페이지 라우팅을 처리할 수 있어. 먼저 필요한 페이지 컴포넌트를 만들어보자.

app/components 폴더에 Home.vue와 Details.vue 파일을 생성해보자:

Home.vue

<template>
  <Page>
    <ActionBar title="홈 화면" />
    <StackLayout>
      <Label text="환영합니다!" class="title" />
      <Button text="상세 페이지로 이동" @tap="goToDetails" class="btn btn-primary" />
    </StackLayout>
  </Page>
</template>

<script>
export default {
  methods: {
    goToDetails() {
      this.$navigateTo(require('./Details').default, {
        animated: true,
        transition: {
          name: 'slide',
          duration: 300,
          curve: 'easeInOut'
        },
        props: {
          message: '홈 화면에서 전달된 메시지입니다!'
        }
      });
    }
  }
};
</script>

<style scoped>
.title {
  font-size: 24;
  font-weight: bold;
  margin: 20;
  text-align: center;
}
.btn {
  font-size: 18;
  margin: 20;
}
</style>

Details.vue

<template>
  <Page>
    <ActionBar title="상세 화면">
      <NavigationButton text="뒤로" android.systemIcon="ic_menu_back" @tap="goBack" />
    </ActionBar>
    <StackLayout>
      <Label text="상세 페이지입니다!" class="title" />
      <Label :text="message" class="message" textWrap="true" />
      <Button text="홈으로 돌아가기" @tap="goBack" class="btn btn-outline" />
    </StackLayout>
  </Page>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    goBack() {
      this.$navigateBack();
    }
  }
};
</script>

<style scoped>
.title {
  font-size: 24;
  font-weight: bold;
  margin: 20;
  text-align: center;
}
.message {
  font-size: 18;
  margin: 20;
  text-align: center;
  color: #41B883;
}
.btn {
  font-size: 18;
  margin: 20;
}
</style>

이제 App.vue 파일을 수정해서 Home.vue를 메인 화면으로 설정해보자:

App.vue

<template>
  <Frame>
    <Home />
  </Frame>
</template>

<script>
import Home from './components/Home';

export default {
  components: {
    Home
  }
};
</script>

Frame 컴포넌트는 페이지 탐색을 관리하는 컨테이너야. 이렇게 설정하면 앱이 시작될 때 Home 컴포넌트가 표시되고, Home에서 Details로 이동할 수 있게 돼!

2️⃣ 페이지 이동 방법

NativeScript-Vue에서는 다음과 같은 페이지 이동 방법을 제공해:

$navigateTo(component, options): 새 페이지로 이동
$navigateBack(): 이전 페이지로 돌아가기
$showModal(component, options): 모달 창 표시
$closeModal(): 모달 창 닫기

위 예제에서는 $navigateTo와 $navigateBack을 사용해서 페이지 간 이동을 구현했어. $navigateTo 메서드를 사용할 때 transition 옵션을 설정해서 페이지 전환 애니메이션을 지정할 수도 있지!

💡 사용 가능한 전환 애니메이션

slide: 슬라이드 효과 (기본값)
fade: 페이드 인/아웃 효과
flip: 플립 효과
slideTop: 위에서 아래로 슬라이드
slideBottom: 아래에서 위로 슬라이드
slideRight: 오른쪽에서 왼쪽으로 슬라이드
slideLeft: 왼쪽에서 오른쪽으로 슬라이드

📱 데이터 바인딩과 상태 관리 📱

Vue.js의 강력한 기능 중 하나는 반응형 데이터 바인딩이야. NativeScript-Vue에서도 이 기능을 그대로 사용할 수 있어!

1️⃣ 기본 데이터 바인딩

Vue.js와 마찬가지로 데이터 속성을 템플릿에 바인딩할 수 있어:

<template>
  <Page>
    <StackLayout>
      <Label :text="message" />
      <TextField v-model="message" hint="메시지 입력" />
    </StackLayout>
  </Page>
</template>

<script>
export default {
  data() {
    return {
      message: "안녕하세요!"
    };
  }
};
</script>

이 예제에서는 TextField에 입력한 내용이 자동으로 message 변수에 반영되고, Label에도 실시간으로 표시돼. Vue.js의 양방향 바인딩이 NativeScript에서도 그대로 작동하는 거지! 👍

2️⃣ Vuex로 상태 관리하기

복잡한 앱에서는 Vuex를 사용해서 상태를 관리하는 것이 좋아. NativeScript-Vue에서도 Vuex를 사용할 수 있어!

먼저 Vuex를 설치해보자:

npm install vuex --save

그리고 app/store 폴더를 만들고 index.js 파일을 생성해:

app/store/index.js

import Vue from 'nativescript-vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    todos: [],
    user: null
  },
  mutations: {
    ADD_TODO(state, todo) {
      state.todos.push(todo);
    },
    REMOVE_TODO(state, index) {
      state.todos.splice(index, 1);
    },
    SET_USER(state, user) {
      state.user = user;
    }
  },
  actions: {
    addTodo({ commit }, todo) {
      commit('ADD_TODO', todo);
    },
    removeTodo({ commit }, index) {
      commit('REMOVE_TODO', index);
    },
    login({ commit }, user) {
      // 여기에 로그인 로직을 추가할 수 있어
      commit('SET_USER', user);
    },
    logout({ commit }) {
      commit('SET_USER', null);
    }
  },
  getters: {
    todoCount: state => state.todos.length,
    isLoggedIn: state => state.user !== null
  }
});

이제 main.js 파일에 Vuex 스토어를 등록해:

app/main.js

import Vue from 'nativescript-vue';
import App from './App';
import store from './store';

new Vue({
  store,
  render: h => h('frame', [h(App)])
}).$start();

이제 컴포넌트에서 Vuex 스토어를 사용할 수 있어:

TodoList.vue

<template>
  <Page>
    <ActionBar title="할 일 목록" />
    <StackLayout>
      <GridLayout rows="auto" columns="*, auto">
        <TextField v-model="newTodo" hint="할 일 입력" col="0" />
        <Button text="추가" @tap="addTodo" col="1" />
      </GridLayout>
      
      <Label :text="'총 ' + todoCount + '개의 할 일이 있습니다'" />
      
      <ListView for="todo in todos" @itemTap="onItemTap">
        <v-template>
          <Label :text="todo" />
        </v-template>
      </ListView>
    </StackLayout>
  </Page>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex';

export default {
  data() {
    return {
      newTodo: ''
    };
  },
  computed: {
    ...mapState(['todos']),
    ...mapGetters(['todoCount'])
  },
  methods: {
    ...mapActions(['addTodo', 'removeTodo']),
    onAddTodo() {
      if (this.newTodo.trim()) {
        this.addTodo(this.newTodo);
        this.newTodo = '';
      }
    },
    onItemTap(event) {
      const index = event.index;
      confirm({
        title: '할 일 삭제',
        message: '이 항목을 삭제하시겠습니까?',
        okButtonText: '예',
        cancelButtonText: '아니오'
      }).then(result => {
        if (result) {
          this.removeTodo(index);
        }
      });
    }
  }
};
</script>

Vuex를 사용하면 앱의 상태를 중앙에서 관리할 수 있어서 컴포넌트 간 데이터 공유가 쉬워져. 특히 복잡한 앱에서는 상태 관리가 중요하니 Vuex를 적극 활용해보자! 🔄

🌐 API 연동하기 🌐

실제 앱에서는 서버와 통신하는 경우가 많아. NativeScript-Vue에서 API를 연동하는 방법을 알아보자!

1️⃣ HTTP 모듈 사용하기

NativeScript에는 HTTP 요청을 보내기 위한 내장 모듈이 있어:

import { Http } from '@nativescript/core';

Http.request({
  url: 'https://jsonplaceholder.typicode.com/posts',
  method: 'GET'
}).then((response) => {
  const content = response.content;
  const posts = content.toJSON();
  console.log(posts);
}).catch((error) => {
  console.error(error);
});

2️⃣ Axios 사용하기

더 편리한 API 호출을 위해 Axios를 사용할 수도 있어. 먼저 Axios를 설치해보자:

npm install axios --save

이제 Axios를 사용해서 API를 호출해보자:

import axios from 'axios';

// GET 요청 보내기
axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

// POST 요청 보내기
axios.post('https://jsonplaceholder.typicode.com/posts', {
  title: '새 게시물',
  body: '게시물 내용',
  userId: 1
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

3️⃣ API 데이터로 목록 표시하기

이제 API에서 가져온 데이터를 ListView에 표시해보자:

<template>
  <Page>
    <ActionBar title="게시물 목록" />
    <StackLayout>
      <ActivityIndicator :busy="isLoading" />
      
      <ListView for="post in posts" @itemTap="onItemTap" height="100%">
        <v-template>
          <StackLayout class="post-item">
            <Label :text="post.title" class="post-title" textWrap="true" />
            <Label :text="post.body" class="post-body" textWrap="true" />
          </StackLayout>
        </v-template>
      </ListView>
    </StackLayout>
  </Page>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      posts: [],
      isLoading: false
    };
  },
  created() {
    this.fetchPosts();
  },
  methods: {
    fetchPosts() {
      this.isLoading = true;
      
      axios.get('https://jsonplaceholder.typicode.com/posts')
        .then(response => {
          this.posts = response.data;
          this.isLoading = false;
        })
        .catch(error => {
          console.error(error);
          this.isLoading = false;
          alert({
            title: '오류 발생',
            message: '데이터를 불러오는 중 오류가 발생했습니다.',
            okButtonText: '확인'
          });
        });
    },
    onItemTap(event) {
      const post = this.posts[event.index];
      this.$navigateTo(require('./PostDetail').default, {
        props: { post }
      });
    }
  }
};
</script>

<style scoped>
.post-item {
  padding: 16;
  border-bottom-width: 1;
  border-bottom-color: #ddd;
}
.post-title {
  font-size: 18;
  font-weight: bold;
  margin-bottom: 8;
}
.post-body {
  font-size: 14;
  color: #666;
}
</style>

API 연동은 대부분의 앱에서 필수적인 기능이야. NativeScript-Vue에서는 웹 개발과 유사한 방식으로 API를 호출하고 데이터를 처리할 수 있어서 정말 편리해! 🔄

📱 네이티브 기능 활용하기 📱

NativeScript의 가장 큰 장점 중 하나는 네이티브 API에 직접 접근할 수 있다는 거야. 몇 가지 유용한 네이티브 기능을 알아보자!

1️⃣ 카메라 접근하기

먼저 카메라 플러그인을 설치해보자:

ns plugin add @nativescript/camera

이제 카메라를 사용해서 사진을 찍어보자:

<template>
  <Page>
    <ActionBar title="카메라 예제" />
    <StackLayout>
      <Button text="사진 찍기" @tap="takePicture" class="btn btn-primary" />
      <Image v-if="imageSrc" :src="imageSrc" stretch="aspectFill" height="300" />
    </StackLayout>
  </Page>
</template>

<script>
import { Camera, requestPermissions } from '@nativescript/camera';

export default {
  data() {
    return {
      imageSrc: null
    };
  },
  methods: {
    takePicture() {
      requestPermissions().then(
        () => {
          Camera.takePicture({
            width: 300,
            height: 300,
            keepAspectRatio: true,
            saveToGallery: true
          }).then(imageAsset => {
            this.imageSrc = imageAsset;
            console.log("사진 촬영 성공!");
          }).catch(err => {
            console.log("사진 촬영 중 오류 발생:", err);
          });
        },
        () => alert("카메라 권한이 거부되었습니다.")
      );
    }
  }
};
</script>

2️⃣ 위치 정보 가져오기

위치 정보를 가져오기 위한 플러그인을 설치해보자:

ns plugin add @nativescript/geolocation

이제 현재 위치를 가져와보자:

<template>
  <Page>
    <ActionBar title="위치 정보 예제" />
    <StackLayout>
      <Button text="현재 위치 가져오기" @tap="getCurrentLocation" class="btn btn-primary" />
      <Label v-if="location" :text="'위도: ' + location.latitude" class="info" />
      <Label v-if="location" :text="'경도: ' + location.longitude" class="info" />
    </StackLayout>
  </Page>
</template>

<script>
import * as Geolocation from '@nativescript/geolocation';
import { CoreTypes } from '@nativescript/core';

export default {
  data() {
    return {
      location: null
    };
  },
  created() {
    this.enableLocationServices();
  },
  methods: {
    enableLocationServices() {
      Geolocation.enableLocationRequest()
        .then(() => {
          console.log('위치 서비스 활성화됨');
        })
        .catch(error => {
          console.log('위치 서비스 활성화 실패:', error);
        });
    },
    getCurrentLocation() {
      Geolocation.getCurrentLocation({
        desiredAccuracy: CoreTypes.Accuracy.high,
        maximumAge: 5000,
        timeout: 10000
      })
        .then(location => {
          this.location = location;
          console.log('현재 위치:', location);
        })
        .catch(error => {
          console.log('위치 가져오기 실패:', error);
          alert({
            title: '오류 발생',
            message: '위치 정보를 가져오는 중 오류가 발생했습니다.',
            okButtonText: '확인'
          });
        });
    }
  }
};
</script>

<style scoped>
.info {
  font-size: 18;
  margin: 10;
  text-align: center;
}
</style>

3️⃣ 푸시 알림 설정하기

푸시 알림을 위한 플러그인을 설치해보자:

ns plugin add @nativescript/push-notifications

푸시 알림을 설정하는 기본 코드:

import { PushNotifications } from '@nativescript/push-notifications';

// 푸시 알림 등록
PushNotifications.register({
  notificationCallbackAndroid: (message, data, notification) => {
    console.log('Android 알림 수신:', message);
  },
  onMessageReceivedCallback: (message) => {
    console.log('iOS 알림 수신:', message);
  },
  onTokenRefreshCallback: (token) => {
    console.log('토큰 갱신:', token);
    // 여기서 토큰을 서버에 전송하는 코드를 추가할 수 있어
  },
  showNotifications: true,
  showNotificationsWhenInForeground: true
})
  .then(token => {
    console.log('푸시 알림 등록 성공. 토큰:', token);
  })
  .catch(error => {
    console.log('푸시 알림 등록 실패:', error);
  });

NativeScript의 가장 큰 장점은 바로 네이티브 API에 직접 접근할 수 있다는 거야. 이를 통해 웹뷰 기반 하이브리드 앱보다 훨씬 더 강력한 기능을 구현할 수 있지! 🔌

재능넷에서도 이런 네이티브 기능을 활용한 앱 개발 재능을 공유하는 개발자들이 많아. 카메라, 위치 정보, 푸시 알림 등의 기능을 활용하면 사용자 경험이 훨씬 더 좋아질 거야! 📱

🎨 UI 스타일링과 테마 적용하기 🎨

앱의 외관은 사용자 경험에 큰 영향을 미쳐. NativeScript-Vue에서 UI를 스타일링하는 방법을 알아보자!

1️⃣ CSS로 스타일링하기

NativeScript는 CSS의 하위 집합을 지원해. Vue 컴포넌트의 <style> 태그에서 직접 스타일을 정의할 수 있어:

<style scoped>
.title {
  font-size: 24;
  font-weight: bold;
  color: #41B883;
  margin: 20;
  text-align: center;
}

.btn-primary {
  background-color: #41B883;
  color: white;
  border-radius: 5;
  padding: 10;
  margin: 10;
}

.card {
  background-color: white;
  border-radius: 10;
  margin: 10;
  padding: 15;
  elevation: 3; /* Android 그림자 */
}
</style>

NativeScript CSS는 웹 CSS와 유사하지만 몇 가지 차이점이 있어:

단위를 지정하지 않음 (px, em 등 사용하지 않음)
일부 속성은 플랫폼별로 다르게 동작함
FlexBox 레이아웃을 지원하지만 일부 속성은 제한적

2️⃣ 글로벌 스타일 적용하기

app/app.css 파일에 글로벌 스타일을 정의할 수 있어:

app/app.css

/* 글로벌 스타일 */
Page {
  background-color: #f8f8f8;
}

ActionBar {
  background-color: #41B883;
  color: white;
}

Button {
  font-size: 16;
  font-weight: bold;
}

.btn {
  border-radius: 4;
  padding: 8 16;
  margin: 8;
}

.btn-primary {
  background-color: #41B883;
  color: white;
}

.btn-outline {
  border-width: 1;
  border-color: #41B883;
  color: #41B883;
  background-color: transparent;
}

3️⃣ 플랫폼별 스타일 적용하기

iOS와 Android에 다른 스타일을 적용하고 싶을 때는 플랫폼별 선택자를 사용할 수 있어:

/* iOS에만 적용되는 스타일 */
.ios .title {
  font-size: 22;
  color: #333;
}

/* Android에만 적용되는 스타일 */
.android .title {
  font-size: 24;
  color: #41B883;
}

4️⃣ NativeScript UI 플러그인 사용하기

더 고급 UI 컴포넌트를 사용하려면 NativeScript UI 플러그인을 설치할 수 있어:

ns plugin add nativescript-ui-sidedrawer
ns plugin add nativescript-ui-listview
ns plugin add nativescript-ui-calendar
ns plugin add nativescript-ui-chart
ns plugin add nativescript-ui-dataform
ns plugin add nativescript-ui-autocomplete
ns plugin add nativescript-ui-gauge

예를 들어, RadListView를 사용하면 더 다양한 기능을 가진 목록을 만들 수 있어:

<template>
  <Page>
    <ActionBar title="고급 목록 예제" />
    <RadListView for="item in items" pullToRefresh="true" @pullToRefreshInitiated="onPullToRefresh">
      <v-template>
        <StackLayout class="item">
          <Label :text="item.name" class="item-name" />
          <Label :text="item.description" class="item-desc" textWrap="true" />
        </StackLayout>
      </v-template>
    </RadListView>
  </Page>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: '항목 1', description: '첫 번째 항목에 대한 설명입니다.' },
        { name: '항목 2', description: '두 번째 항목에 대한 설명입니다.' },
        { name: '항목 3', description: '세 번째 항목에 대한 설명입니다.' }
      ]
    };
  },
  methods: {
    onPullToRefresh(event) {
      console.log('새로고침 시작');
      setTimeout(() => {
        this.items.unshift({ name: '새 항목', description: '방금 추가된 항목입니다.' });
        event.object.notifyPullToRefreshFinished();
        console.log('새로고침 완료');
      }, 1500);
    }
  }
};
</script>

UI 스타일링은 앱의 사용자 경험을 결정하는 중요한 요소야. NativeScript-Vue에서는 CSS를 사용해서 네이티브 UI 컴포넌트를 스타일링할 수 있어서 웹 개발자들에게 친숙한 방식으로 앱의 외관을 꾸밀 수 있어! 🎨

🚀 앱 빌드 및 배포하기 🚀

개발이 완료되면 앱을 빌드하고 배포해야 해. NativeScript-Vue 앱을 빌드하고 배포하는 방법을 알아보자!

1️⃣ 개발용 빌드

개발 중에는 다음 명령어로 앱을 빌드하고 실행할 수 있어:

Android:

ns run android

iOS (macOS 필요):

ns run ios

2️⃣ 릴리즈용 빌드

앱 스토어에 배포하기 위한 릴리즈 빌드는 다음 명령어로 생성할 수 있어:

Android:

ns build android --release --key-store-path your-key.keystore --key-store-password your-password --key-store-alias your-alias --key-store-alias-password your-alias-password

iOS (macOS 필요):

ns build ios --release --for-device

Android 릴리즈 빌드를 위해서는 키스토어 파일이 필요해. 키스토어 파일이 없다면 다음 명령어로 생성할 수 있어:

keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

3️⃣ 앱 스토어에 배포하기

Google Play 스토어 배포

Google Play Console에 계정 등록 (개발자 등록비 $25)
새 앱 등록
앱 정보 입력 (이름, 설명, 스크린샷 등)
APK 또는 AAB 파일 업로드
콘텐츠 등급 설정
가격 및 배포 국가 설정
앱 출시

Apple App Store 배포

Apple Developer Program에 등록 (연간 $99)
App Store Connect에서 새 앱 등록
앱 정보 입력 (이름, 설명, 스크린샷 등)
Xcode에서 아카이브 생성 및 업로드
앱 심사 제출
Apple의 심사 대기 (보통 1-3일 소요)
심사 통과 후 출시

4️⃣ CI/CD 자동화

빌드 및 배포 과정을 자동화하기 위해 CI/CD 도구를 사용할 수 있어:

GitHub Actions: GitHub 저장소와 통합된 CI/CD 서비스
CircleCI: 클라우드 기반 CI/CD 플랫폼
Jenkins: 자체 호스팅 가능한 오픈 소스 자동화 서버
Bitrise: 모바일 앱 개발에 특화된 CI/CD 플랫폼
Codemagic: Flutter 및 기타 모바일 앱을 위한 CI/CD 도구

CI/CD 파이프라인을 구축하면 코드 변경 시 자동으로 빌드, 테스트, 배포가 이루어져서 개발 효율성이 크게 향상돼! 🔄

재능넷에서도 앱 배포 및 출시 전략에 대한 조언을 구할 수 있어. 경험 많은 개발자들이 앱 스토어 최적화(ASO)나 출시 전략에 대한 재능을 공유하고 있으니 참고해봐! 🚀

🧪 앱 테스트하기 🧪

앱을 출시하기 전에 철저한 테스트는 필수야! NativeScript-Vue 앱을 테스트하는 방법을 알아보자.

1️⃣ 단위 테스트

단위 테스트를 위해 Jest를 설정해보자:

npm install --save-dev jest @vue/test-utils babel-jest

package.json에 테스트 스크립트를 추가해:

"scripts": {
  "test": "jest"
}

간단한 테스트 파일 작성 예시:

tests/example.spec.js

import { shallowMount } from '@vue/test-utils';
import Home from '../app/components/Home.vue';

describe('Home.vue', () => {
  it('renders welcome message', () => {
    const wrapper = shallowMount(Home);
    expect(wrapper.text()).toContain('환영합니다');
  });
  
  it('has a button to navigate to details', () => {
    const wrapper = shallowMount(Home);
    const button = wrapper.find('Button');
    expect(button.exists()).toBe(true);
    expect(button.attributes().text).toBe('상세 페이지로 이동');
  });
});

2️⃣ 통합 테스트

NativeScript 앱의 통합 테스트를 위해 Appium을 사용할 수 있어:

npm install --save-dev appium webdriverio

Appium을 사용한 테스트 예시:

const wdio = require('webdriverio');

const opts = {
  port: 4723,
  capabilities: {
    platformName: 'Android',
    deviceName: 'Android Emulator',
    app: '/path/to/your/app.apk',
    automationName: 'UiAutomator2'
  }
};

async function runTest() {
  const client = await wdio.remote(opts);
  
  // 앱이 로드될 때까지 대기
  await client.pause(3000);
  
  // 버튼 찾기 및 클릭
  const button = await client.$('android=new UiSelector().text("상세 페이지로 이동")');
  await button.click();
  
  // 페이지 이동 확인
  await client.pause(1000);
  const detailsTitle = await client.$('android=new UiSelector().text("상세 페이지입니다!")');
  const isDisplayed = await detailsTitle.isDisplayed();
  console.log('상세 페이지로 이동 성공:', isDisplayed);
  
  await client.deleteSession();
}

runTest().catch(console.error);

3️⃣ 수동 테스트

자동화 테스트와 함께 다음과 같은 수동 테스트도 수행해야 해:

기능 테스트: 모든 기능이 예상대로 작동하는지 확인
UI/UX 테스트: 사용자 인터페이스가 모든 화면 크기에서 제대로 표시되는지 확인
성능 테스트: 앱의 응답 속도와 리소스 사용량 확인
호환성 테스트: 다양한 기기와 OS 버전에서 테스트
네트워크 테스트: 다양한 네트워크 상태에서 앱 동작 확인
보안 테스트: 데이터 암호화, 인증 등 보안 기능 확인

철저한 테스트는 앱의 품질을 높이고 사용자 만족도를 향상시키는 데 중요해. 출시 전에 다양한 환경에서 충분히 테스트하는 것을 잊지 마! 🧪

🔍 성능 최적화 팁 🔍

NativeScript-Vue 앱의 성능을 최적화하기 위한 몇 가지 팁을 알아보자!

1️⃣ 이미지 최적화

앱에서 사용하는 이미지는 성능에 큰 영향을 미쳐. 다음과 같은 방법으로 이미지를 최적화할 수 있어:

적절한 크기의 이미지 사용 (화면 크기에 맞게)
이미지 압축 도구 사용
WebP 같은 효율적인 이미지 형식 사용
이미지 캐싱 구현

이미지 캐싱 예시

import { ImageCache } from '@nativescript/core';

// 이미지 캐시 설정
ImageCache.enableDownload();
ImageCache.maxRequests = 5;

// 이미지 URL을 캐시에서 가져오기
function getImageFromCache(imageUrl) {
  return ImageCache.getImageAsync(imageUrl);
}

2️⃣ 리스트 뷰 최적화

많은 항목을 표시하는 리스트는 성능 문제의 주요 원인이 될 수 있어. 다음과 같이 최적화할 수 있어:

항목 재사용: v-template을 사용해 항목 템플릿 재사용
지연 로딩: 화면에 보이는 항목만 로드
페이지네이션: 한 번에 일부 항목만 로드
불필요한 바인딩 제거: 변경되지 않는 데이터는 바인딩하지 않기

3️⃣ 네트워크 요청 최적화

네트워크 요청은 앱 성능에 큰 영향을 미쳐. 다음과 같이 최적화할 수 있어:

데이터 캐싱 구현
필요한 데이터만 요청 (GraphQL 사용 고려)
요청 병합
오프라인 모드 지원

데이터 캐싱 예시

import { ApplicationSettings } from '@nativescript/core';

// 데이터 캐싱
function cacheData(key, data, expirationMinutes = 60) {
  const cacheItem = {
    data: data,
    expiration: new Date().getTime() + (expirationMinutes * 60 * 1000)
  };
  ApplicationSettings.setString(key, JSON.stringify(cacheItem));
}

// 캐시된 데이터 가져오기
function getCachedData(key) {
  const cachedItem = ApplicationSettings.getString(key);
  if (!cachedItem) return null;
  
  const cacheItem = JSON.parse(cachedItem);
  const now = new Date().getTime();
  
  if (now > cacheItem.expiration) {
    ApplicationSettings.remove(key);
    return null;
  }
  
  return cacheItem.data;
}

// 사용 예시
async function fetchData(url) {
  const cacheKey = `data_${url}`;
  const cachedData = getCachedData(cacheKey);
  
  if (cachedData) {
    console.log('캐시에서 데이터 로드');
    return cachedData;
  }
  
  console.log('API에서 데이터 로드');
  const response = await axios.get(url);
  cacheData(cacheKey, response.data);
  return response.data;
}

4️⃣ 코드 분할 및 지연 로딩

앱의 초기 로딩 시간을 줄이기 위해 코드 분할과 지연 로딩을 구현할 수 있어:

// 동적 컴포넌트 로딩
function navigateToDetails() {
  const DetailPage = () => require('./DetailPage').default;
  this.$navigateTo(DetailPage);
}

5️⃣ 메모리 관리

메모리 누수를 방지하기 위한 팁:

이벤트 리스너 정리
큰 객체는 사용 후 null 처리
컴포넌트 언마운트 시 리소스 해제
불필요한 클로저 피하기

이벤트 리스너 정리 예시

import { Application } from '@nativescript/core';

export default {
  data() {
    return {
      orientationListener: null
    };
  },
  mounted() {
    // 이벤트 리스너 등록
    this.orientationListener = (args) => {
      console.log('화면 방향 변경:', args.newValue);
    };
    Application.on(Application.orientationChangedEvent, this.orientationListener);
  },
  beforeDestroy() {
    // 이벤트 리스너 정리
    if (this.orientationListener) {
      Application.off(Application.orientationChangedEvent, this.orientationListener);
      this.orientationListener = null;
    }
  }
};

성능 최적화는 사용자 경험을 향상시키는 핵심 요소야. 특히 모바일 앱에서는 배터리 소모, 데이터 사용량, 응답성 등이 중요하니 최적화에 신경 써야 해! ⚡

🏆 실전 프로젝트: 할 일 관리 앱 만들기 🏆

지금까지 배운 내용을 바탕으로 간단한 할 일 관리 앱을 만들어보자! 이 앱은 다음 기능을 포함할 거야:

할 일 목록 표시
새 할 일 추가
할 일 완료 표시
할 일 삭제
할 일 데이터 로컬 저장

1️⃣ 프로젝트 생성

ns create todo-app --vue

2️⃣ Vuex 스토어 설정

먼저 Vuex를 설치하고 스토어를 설정해보자:

cd todo-app
npm install vuex --save

app/store/index.js 파일을 생성해:

import Vue from 'nativescript-vue';
import Vuex from 'vuex';
import { ApplicationSettings } from '@nativescript/core';

Vue.use(Vuex);

const STORAGE_KEY = 'todos';

export default new Vuex.Store({
  state: {
    todos: []
  },
  mutations: {
    SET_TODOS(state, todos) {
      state.todos = todos;
    },
    ADD_TODO(state, todo) {
      state.todos.push(todo);
      saveTodos(state.todos);
    },
    TOGGLE_TODO(state, id) {
      const todo = state.todos.find(todo => todo.id === id);
      if (todo) {
        todo.completed = !todo.completed;
        saveTodos(state.todos);
      }
    },
    REMOVE_TODO(state, id) {
      state.todos = state.todos.filter(todo => todo.id !== id);
      saveTodos(state.todos);
    }
  },
  actions: {
    loadTodos({ commit }) {
      const todosString = ApplicationSettings.getString(STORAGE_KEY, '[]');
      const todos = JSON.parse(todosString);
      commit('SET_TODOS', todos);
    },
    addTodo({ commit }, text) {
      const id = Date.now().toString();
      const todo = {
        id,
        text,
        completed: false,
        createdAt: new Date()
      };
      commit('ADD_TODO', todo);
    },
    toggleTodo({ commit }, id) {
      commit('TOGGLE_TODO', id);
    },
    removeTodo({ commit }, id) {
      commit('REMOVE_TODO', id);
    }
  },
  getters: {
    allTodos: state => state.todos,
    completedTodos: state => state.todos.filter(todo => todo.completed),
    pendingTodos: state => state.todos.filter(todo => !todo.completed),
    todoCount: state => state.todos.length
  }
});

function saveTodos(todos) {
  ApplicationSettings.setString(STORAGE_KEY, JSON.stringify(todos));
}

3️⃣ 메인 앱 컴포넌트

app/App.vue 파일을 수정해:

<template>
  <Frame>
    <Page>
      <ActionBar title="할 일 관리 앱" />
      <StackLayout>
        <GridLayout rows="auto" columns="*, auto" class="form">
          <TextField v-model="newTodo" hint="새 할 일 입력" returnKeyType="done" @returnPress="addTodo" col="0" />
          <Button text="추가" @tap="addTodo" class="btn btn-primary" col="1" />
        </GridLayout>
        
        <StackLayout class="stats">
          <Label :text="'총 ' + todoCount + '개의 할 일 중 ' + completedTodos.length + '개 완료'" class="stats-text" />
        </StackLayout>
        
        <ListView for="todo in allTodos" separatorColor="#ddd" class="list-group">
          <v-template>
            <GridLayout columns="auto, *, auto" class="list-item" :class="{ 'completed': todo.completed }">
              <Button :text="todo.completed ? '✓' : '○'" @tap="toggleTodo(todo.id)" class="check-btn" col="0" />
              <Label :text="todo.text" textWrap="true" class="todo-text" col="1" />
              <Button text="🗑️" @tap="confirmDelete(todo.id)" class="delete-btn" col="2" />
            </GridLayout>
          </v-template>
        </ListView>
      </StackLayout>
    </Page>
  </Frame>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import { confirm } from '@nativescript/core/ui/dialogs';

export default {
  data() {
    return {
      newTodo: ''
    };
  },
  computed: {
    ...mapGetters(['allTodos', 'completedTodos', 'pendingTodos', 'todoCount'])
  },
  methods: {
    ...mapActions(['loadTodos', 'addTodo', 'toggleTodo', 'removeTodo']),
    onAddTodo() {
      if (this.newTodo.trim()) {
        this.addTodo(this.newTodo.trim());
        this.newTodo = '';
      }
    },
    confirmDelete(id) {
      confirm({
        title: '할 일 삭제',
        message: '이 항목을 삭제하시겠습니까?',
        okButtonText: '예',
        cancelButtonText: '아니오'
      }).then(result => {
        if (result) {
          this.removeTodo(id);
        }
      });
    }
  },
  created() {
    this.loadTodos();
  }
};
</script>

<style scoped>
.form {
  margin: 16;
}
.stats {
  margin: 8 16;
}
.stats-text {
  font-size: 14;
  color: #666;
}
.list-item {
  padding: 16;
}
.check-btn {
  width: 40;
  font-size: 18;
  background-color: transparent;
  border-width: 1;
  border-color: #ddd;
  border-radius: 20;
  margin-right: 8;
}
.todo-text {
  font-size: 16;
  color: #333;
}
.completed .todo-text {
  color: #999;
  text-decoration: line-through;
}
.delete-btn {
  width: 40;
  font-size: 16;
  background-color: transparent;
  color: #ff6b6b;
}
</style>

4️⃣ 메인 진입점 수정

app/main.js 파일을 수정해:

import Vue from 'nativescript-vue';
import App from './App';
import store from './store';

// 디버그 모드 비활성화
Vue.config.silent = !__DEV__;

new Vue({
  store,
  render: h => h(App)
}).$start();

5️⃣ 앱 실행하기

ns run android

또는

ns run ios

이렇게 하면 간단한 할 일 관리 앱이 완성돼! 이 앱은 할 일을 추가, 완료 표시, 삭제할 수 있고, 앱을 종료했다가 다시 실행해도 데이터가 유지돼. 🎉

이 예제를 바탕으로 더 많은 기능을 추가해볼 수 있어:

할 일 카테고리 추가
할 일 우선순위 설정
마감일 설정 및 알림
클라우드 동기화
테마 변경 기능

재능넷에서는 이런 앱 개발 경험을 가진 개발자들이 자신의 지식을 공유하고 있어. 앱 개발에 어려움이 있다면 재능넷에서 도움을 받아보는 것도 좋은 방법이야! 💡

🎓 마치며: NativeScript와 Vue.js의 미래 🚀

지금까지 NativeScript와 Vue.js를 사용한 모바일 앱 개발에 대해 알아봤어. 웹 개발 지식을 활용해 네이티브 앱을 만들 수 있다는 것은 정말 매력적이지? 🤩

NativeScript와 Vue.js의 조합은 계속해서 발전하고 있어. Vue 3 지원, 성능 개선, 더 많은 네이티브 API 접근성 등 앞으로도 많은 발전이 기대돼. 특히 웹 개발자가 모바일 앱 개발로 쉽게 전환할 수 있는 다리 역할을 하고 있지!

크로스 플랫폼 앱 개발의 미래는 더욱 밝아 보여. React Native, Flutter와 함께 NativeScript도 계속해서 중요한 위치를 차지할 거야. 특히 Vue.js에 익숙한 개발자라면 NativeScript-Vue는 최고의 선택이 될 수 있어!

앱 개발 여정을 시작하는 데 이 글이 도움이 되었길 바라. 더 많은 정보와 최신 트렌드는 NativeScript-Vue 공식 문서와 NativeScript 공식 사이트에서 확인할 수 있어.

재능넷에서는 이런 최신 기술을 활용한 앱 개발 재능을 찾을 수 있어. 전문 개발자의 도움이 필요하거나 자신의 개발 재능을 공유하고 싶다면 재능넷을 방문해봐! 함께 성장하는 개발자 커뮤니티에서 더 많은 것을 배우고 나눌 수 있을 거야. 🌱

행운을 빌어! 멋진 앱 개발하길 바래! 👋

지식인의 숲 - 지적 재산권 보호 고지

지적 재산권 보호 고지

사용 제한: 재능넷의 명시적 서면 동의 없이 본 컨텐츠를 복제, 수정, 배포, 또는 상업적으로 활용하는 행위는 엄격히 금지됩니다.
데이터 수집 금지: 본 컨텐츠에 대한 무단 스크래핑, 크롤링, 및 자동화된 데이터 수집은 법적 제재의 대상이 됩니다.
AI 학습 제한: 재능넷의 AI 생성 컨텐츠를 타 AI 모델 학습에 무단 사용하는 행위는 금지되며, 이는 지적 재산권 침해로 간주됩니다.

1.5K

[Android / JAVA/ C] 신호처리 알고리즘/ 안드로이드 앱 개발

안녕하세요. 신호처리를 전공한 개발자 입니다. 1. 영상신호처리, 생체신호처리 알고리즘 개발 2. 안드로이드 앱 개발 3. 윈도우 프로그램 개발 위와 같은 개발에 도움을 드릴 수 있습니다.

1,000,000원~

8.3K

신뢰있는 앱 개발, 아무에게나 맡기지 마세요!

본 페이지는 실제 서비스와 시스템을 개발·운영하며 축적한 개발 경험과 프로젝트 사례를 소개합니다.사용자 화면, 관리 기능, 내부 처리 구조 등 서비스 전반을 고려한 개발 경험을 바탕으로 구성되어 있습니다. 150만명 회원 규모의 서비스를 직접 개발·운영해 온 경험을 바탕으로, 현실적인 운영 환경에 적합한 실효성 있는 솔루션을 제안합니다. 각 프로젝트는 단순

10,000원~

1.8K

안드로이드, 메트렙, 자료구조, 신호처리, 통신이론 요청 받습니다.

------------------------------------ 만들고 싶어하는 앱을 제작해드립니다. ------------------------------------ 1. 안드로이드 ( 자바 ) * 블루투스, 카메라, 미디어 플레이어, 음성인식, 가계부, 소개팅 앱, 알람 앱, 사진 앱 등등 원하시는 어플리케이션을 만들어 드립니다. 2. 자료구조 ( C

5,000원~

4.3K

홈페이지 연동 모바일 앱, 유튜브 연동 앱, 퀴즈 앱 등 앱개발을 도와 드려요.

안녕하세요. 안드로이드 기반 개인 앱, 프로젝트용 앱부터 그 이상 기능이 추가된 앱까지 제작해 드립니다. - 앱 개발 툴: 안드로이드 스튜디오 - 안드로이드 언어: JAVA, XML - 데이터베이스 언어: 로컬DB-SQLite, 웹DB-MYSQL - 안드로이드 와 서버 통신 언어 - PHP 기능 추가 시 구현정도에 따라 협의가 필요하며 밑에 사항과 같이 연

30,000원~

9.7K

사이트를 모바일앱으로 제작해 드립니다. 안드로이드 아이폰 앱제작 어플제작 전문

운영하는 사이트 주소가 있다면 사이트를 안드로이드 앱으로 만들어 드립니다. 기본 5000원은 아무런 기능이 없고 단순히 html 페이지를 로딩하는 앱을 제작하는 경우입니다. 구매할때 쇼핑몰 및 커뮤니티 사이트 등 일반사이트들은 구매옵션의 자바스크립트 지원을 필수 선택해야 제작해드립니다. 아이폰 ios 용 앱제작 의뢰의 경우 협의 가격으로 진행됩니다.먼저 문