10분 만에 내 워드프레스 앱 만들기

10분 만에 내 워드프레스 앱 만들기


나의 사이트를 직접 앱으로 만든다? 정말 어떻게 만들어야 할지 감도 안잡힙니다. 가능은 한 일인지 의심부터 들죠. 오늘은 그런 여러분을 위해 나의 워드프레스 사이트를 앱으로 만드는 가장 간단하면서도 쉬운 방법을 소개하겠습니다. 본 내용은 강의라기 보다는 순서만 찝어 빠르게 본인의 워드프레스 앱을 눈으로 확인하는 것을 목표로 합니다.  간단한 앱이 아닌 보다 많은 기능을 가진 앱 제작 강의는 다음 챕터부터 진행 될 것입니다.

준비물은 단 세가지 입니다. 모바일 반응형으로 만들어진 본인의 웹 사이트 (만약 웹 사이트가 없다면 wpteam 사이트를 이용해도 좋습니다.) 컴퓨터, 그리고 약 10분의 시간입니다. 아래에 사용된 명령어 코드 및 순서를 간략하게 적용하니 동영상을 참고하시면서 따라하시면 됩니다. (이해가 안되더라도 한번 따라해보세요~ 정말로 나의 앱을 직접 확인할 수 있습니다.)

시작전에 설치하기

node.js: https://nodejs.org/en/  // LTS 버전을 다운받아 설치하세요.
visual studio code: https://www.visualstudio.com/ko/  // 다른 에디터를 사용하고 있다면 설치하지 않아도 됩니다. (아톰, 서브라임 텍스트 등)

콘솔에서 설치하기 (cmd) // 설치 도중 yes or no를 물어보는 구간은 모두 yes를 설치해주세요.

npm install -g cordova //기본설치
npm install -g ionic cordova //기본설치
ionic start wpteam blank //프로젝트 생성
ionic serve -l  //브라우져로 확인하기

중간에 안드로이드 스튜디오를 설치하는 과정이 빠져있습니다. 설치를 진행하지 않으면 오류가 발생합니다. apk 파일로 만들기 위해서는 안드로이드가 설치되어 있어야 하는데 그것이 없기 때문에 나타내는 오류입니다.  아래에 설치 과정을 정리한 블로그가 있어 링크합니다. 해당 블로그 링크를 참고해 설치를 진행해주세요.

http://jun7222.tistory.com/126
ionic cordova platform add android  //안드로이드 apk 만들 준비하기
ionic cordova build android  //안드로이드 apk 만들기

visual studio code에 들어간 iframe 코드

<iframe src=”http://wpteam.net” style=”width:100%;height:100%”></iframe>  //scr는 본인 주소


푸시메시지 테스트하기
wpteam 테스트 앱 다운: wpteam (다운로드 후 압출을 풀고 본인의 휴대폰 디바이스로 옮겨 설치하세요.)

푸시 테스트 링크 (링크)

13 comments

Leave a comment
  1. 스마일맨

    2017년 8월 14일 at 2:41 오후

    멋지게 만들어진것 같습니다. 그런데 자신의 쇼핑몰을 이런방법으로 앱을 만들어도 상관없습니까?
    궁굼하군요.

    • WPTEAM

      2017년 8월 14일 at 2:48 오후

      특별히 문제 될 것은 없습니다. 이러한 앱은 폰에서 구동되는 ‘앱’ 이라기 보다는 PC에서 보이는 웹사이트의 모바일 버전과 더 유사하다고 생각하시면 편하실 것 같습니다. 실제로 앱에서 몇 몇의 작업을 진행하겠지만 그것이 작동하고 구동되는 대부분의 것은 PC사이트 그대로 동작하니까요. 다만 쇼핑몰일 경우 만드는 방법에 따라 결제 과정에서 디버깅이 필요 할 수 있습니다. 그러한 부분만 잘 해결하시면 될 것 같습니다.

  2. 미스터김

    2017년 10월 24일 at 4:17 오후

    마지막 ionic cordova build android 이 단계에서
    An error occurred while running cordova build android (exit code 1) 이라고 나오는데 어떻게 해야 하나요?

  3. tototo

    2017년 10월 28일 at 12:12 오전

    브라우저로 테스트 해보려고 하니까 myapp페이지에서

    Bad Request
    Your browser sent a request that this server could not understand.

    라고 뜨는데 이건 무슨문제일까요? 다른 사이트 주소를 넣으면 잘 나오는뎅
    워드프레스 홈페이지의 최적화 문제인걸까요?

  4. 박웅희

    2017년 12월 19일 at 4:35 오후

    ionic start 시에 ionic link 에서 계속 진행이 안됩니다.
    이메일을 기입하고 비밀번호를 기입하라는데 정확하지 않다고 취소가 자동으로 됩니다.

    방법좀 알려주세요.

  5. JM Joh

    2017년 12월 24일 at 1:04 오전

    웹에서 수시로 수정하는 내용이 앱에서도 자동적으로 반영이 되는지 궁금합니다.

  6. KOMANDO

    2017년 12월 29일 at 4:06 오후

    사이트를 보고 따라하다 도저히 안돼서 질문을 드리게 되었습니다.

    마지막단계 빌드시 다음과 같은 에러메세지가 나옵니다.

    ANDROID_HOME=D:\Android
    JAVA_HOME=C:\Program Files\Java\jdk-9.0.1
    (node:7224) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): CordovaError: Requirements check failed for JDK 1.8 or greater
    (node:7224) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
    [16:05:52] lint finished in 2.59 s

    도움을 받을 수 있을까요?

    • slater95

      2018년 1월 9일 at 10:12 오후

      1.자바 버전 8버전
      2. 안드로이드 sdk가 설치된 곳(D:\android\sdk이라 가정)
      cmd 에서
      test (자신이 만든 프로젝트폴더)
      D:\test>set ANDROID_HOME=D:\android\sdk
      D:\test>set PATH=%PATH%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools
      이렇게 하니까 오류 없이 빌더 되네여

  7. GSoul

    2018년 3월 26일 at 9:15 오전

    (node:20752) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

    안드로이드 apk 빌드 단계에서 이런 오류 메세지가 나옵니다. 해결 팁 좀 알려주세요.ㅠㅠ

  8. besuhof

    2018년 7월 4일 at 8:47 오후

    감사히 공부하고 빌드까지 마무리했습니다. 저의 경우는, 다른 분도 마찬가지이겠지만, 빌드 과정에서 헤매게 되더군요. UnhandledPromiseRejectionWarning 등.

    일단, 안드로이드 스튜디오와 자바를 먼저 설치하고, 10분 강의를 다시 처음부터 하는 것으로 해결한 것 같습니다…. 나머지는 상식적이거나 순차적으로 해결한 것 같음.

    그리고, 매우 중요하게… 검색을 하다보니 자바 버전을 1.8 버전을 설치해야 하는 것으로 나오더군요.
    https://forum.ionicframework.com/t/help-on-building-apk/125470
    (왜냐하면, cordova 코드의 버그 같은 느낌…)

    그러고 나서, 도스 창에서 cmd로 path를 설정하는 데, 그 이전에 이미 자바 10 을 설치하고 path를 준 것이 있었는데… (자바 10을 삭제한 것은 아니고, cmd에서의 자바10 pathf 를 지우느라…) 아주 옛날의 도스 명령어를 사용해야 하는 상황이 있네요… 요것도 검색해서 알아냈습니다.
    https://stackoverflow.com/questions/21289762/remove-unwanted-path-name-from-path-variable-via-batch

    • besuhof

      2018년 7월 4일 at 8:50 오후

      참, 그리고 ANDROID_HOME 은 저의 경우에는
      C:\Users\내이름\AppData\Local\Android\sdk 였는데, PC 폴더를 보니까 처음에는 폴더가 안 보여서 없는 것인가 했는데, 그게 요즘 (??) PC에는 숨김 폴더 기능이 되어 있어서 그렇더군요.

Leave a Comment

카카오 챗봇
공지사항
문의하기
  • 챗봇의 종류를 소개합니다.
    챗봇 종류
  • WPTEAM 사이트
  • PC 전용 서브 타이틀
    API형
  • 아이템 VIEW 설정
  • PC 카카오 전용 공지사항
  • PC VIEW 설정
  • 이미지형 답변
  • 메시지 종합형 답변
  • 버튼형
  • 라벨형 답변
  • 공지사항
    공지사항을 확인하세요!
    전체 PC 카카오톡 Mobile 카카오톡 의미없는 카테고리
    thumbnail

    현재 모바일의 카카오톡 모드

    2018-04-20 15:17:12
    현재 모바일 카카오톡 스마트 채팅의 경우 버튼형으로 테스트 진행하고 있으며, 얼마간의 테스트 이후 API형으로 변경 할 예정입니다.
    thumbnail

    현재 PC의 카카오톡 모드

    2018-04-20 15:16:10
    버튼형으로 설정되어 있는 상태이며, 각 키워드에 따른 그룹을 보여줍니다. 버튼형 테스트 이후 API형으로 변경 할 예정입니다.
    thumbnail

    안녕하세요. WPTEAM KAKAO CHAT BOT 플러그인 베타 테스트를 진행합니다.

    2018-04-20 15:14:55
    카카오톡 스마트 채팅 기능을 이용해 워드프레스 사이트에 원클릭 설치 및 이용 할 수 있는 카카오톡 챗봇을 개발하였습니다. 현재 WPTEAM 사이트 내에서 베타 테스트를 진행합니다. 관심 있으신 분들은 테스트해보세요~ 감사합니다.
    문의하기
    궁금한 사항을 문의주세요.

    도움이 필요하다면 언제라도 문의주세요.

    WPTEAM은 남들이 싫어하는 코드 분석, 유지보수를 즐깁니다. 코드가 길다면 보다 많은 시간이 걸리고 고된 것은 사실이나 그것을 그것 나름대로 즐길 줄 아는 코더입니다.

    우리가 할 수 있는 것들

    • 테마 자체 제작이 가능합니다. 원하는 기능이 무엇인가요? 저희는 워드프레스 REST API, 다음 맵, 구글 맵, 네이버 맵, 다음 주소, firebase 와 워드프레스 연동, 워드프레스 앱 만들기, hipchat api, cafe24 sms, 넥스모 sms, 페이팔, 이니시스, 스트라이프, 역경매, 실시간 채팅 등을 워드프레스로 제작해 보았습니다.
    • 어떠한 오류라도 해결해 드리겠습니다. 만들어진 테마에 오류가 생겼다면 문의주세요. 저희가 해결해드립니다.
    • 앱을 제작해드립니다. 단순 패키징 뿐만아니라 REST API를 이용해 PC와 데이터가 완벽하게 연동되는 앱을 만들어 드릴 수 있습니다.
    • 설계부터 함께 해드립니다. 프로젝트의 설계가 부족하다면 얼마든지 도와드릴 수 있습니다. 스토리 보드는 저희가 가장 잘 만드는 것들 중 하나입니다.

    감사합니다!

    언제라도 문의 주세요. WPTEAM mins9919@naver.com  
    카카오 챗봇
    질문을 제게 알려주세요.
    전송
    ← 뒤로가기