1. 하이브리드 앱을 제작하고 싶은 생각이 있습니다만, 보통 어떠한 순서로 제작되는 것이 좋을지 궁금합니다.
일단 하이브리드 앱을 하는 방식은 여러개가 있지만, 크게 나누면
- React Native, Ionic, Flutter 등으로
안드로이드와 iOS 앱을 동시에 개발 할 수 있습니다. 물론 설정을 따로 해줘야 할 수 있는것들이 있을 수 있지만, 적어도 90%이상의 코드는 공유하니까 많이 선택합니다.
현재 웹까지 같이 공유되는것은 없습니다만, 요즘 웹에서 많이 쓰는 React는 이름에서 보이듯이 React Native와 형제격입니다. 우리나라말 하면 북한이 쓰는 한국어 하는데 좀만 배우면 다 이해한다고 보시면 됩니다. 그리고 Flutter에서도 웹사이트를 만드는 방법이 생겼는데, 이게 코드 한번에 같이 되는지 아니면 따로 되는지는 정확하게 모르겠습니다.
일단 Web사이트 제작은 React가 대세이며 이 추세는 안좁혀질꺼 같습니다. 앱 또한 React Native가 대세이지만, Flutter의 성장세와 진짜 많은 개발자들이 Flutter가 더 좋다고 보고 있죠. 하지만 기존 앱들이나 이미 형성되어 있는 시장, 인력들이 React Native에 더 많기 때문에 Flutter가 좋다고 해도 RN를 배우고 실제로 많이 쓰고 있습니다.
- PWA (Progressive Web App)
이것은 브라우저에서도 웹 앱을 네이티브 처럼 쓰게 해주는 방식입니다. 즉 웹앱이 Mobile App 처럼 사용이 가능하게 되는것이죠. 현재 많이 들 개발하고 연구 단계에 있습니다. 장점은 바로 React 하나로 웹, 모바일까지 다 커버가 가능한것입니다.
그러나 이것은 Frontend를 말한 것이고, 앱의 핵심은 바로 Backend입니다. 자동차로 비유하면 Frontend는 외관 프레임, Backend는 엔진이죠. 외간을 아무리 잘만들었다고 한들 엔진이 이상하면 자동차는 잘나가지 않죠. 앱도 똑같습니다. 많은 사람들이 이 Backend에 대한 지식이 없어서, 이거 만들어 주세요 저거 만들어 주세요 하다가 바로 우리가 아는 스파게티 코드 + 구조가 나오게 됩니다. 하이브리드앱이던, 웹앱이던, 모바일 앱이던,
Backend의 방식이나 구조등을 기초적으로도 개발을 해놓고 Frontend으로 해야 합니다.
- Backend는
Node.js + MongoDB 가 많이 쓰이며 이 두개와 React + React Native으로 앱을 만들경우 자바스크립트 언어로 커버가 됩니다. 물론 각각 배울것들이 있기는 하지만요.
앱을 제작하는 순서는 보통
* 전체적인 구동 방식 (어떤 프론트앤드를 쓰고, 어떤 백앤드, DB, 어떻게 동작할껀지 등등)
* 최소 구동 방식 (각각 파트에 필요한 것들을 생각)
* 데이터베이스 구조 (이건 사람마다 다르게 할 수 있고 회사마다 다르게 저장 할 수 있습니다)
* 백앤드 제작 (기초공사, Phase 1 단계 기능)
* 프론트앤드 제작 및 백앤드와 연결
등등입니다.
적어도 2-3달은 프론트앤드, 백앤드, 데이터베이스의 개념을 무조건 숙지해야 합니다. 남들 있는 영상보고 만들어야지 하면서 시작하면, 오히려 나중에 기능 하나 추가하는데 엄청난 시간이 소요되고 합니다.
제가 추천드리는 것은 JavaScript 공부 하시고, 기초 html + css, 웹사이트 구조, 백앤드 프론트앤드 동작 구조입니다.
여기서 님이 어느정도 아셔야 할 것은
- 백앤드
Node + Express
REST API
- 프론트앤드
React & React Native
Next.js
Redux
Redux-thunk
Redux-saga
- 전채적인 흐름
Microservice (백앤드와 DB를 서비스마다 생성합니다)
GraphQL
Apollo-Client
-DB
몽고DB
코드는 할 줄 몰라도, 이것들이 어떤것인지만 알면 시작하세요. 현재 추세는 모든 것들의 모듈화 입니다. 즉 비행기 모형을 만들때 플라스틱 녹여서 그대로 만들어 버리거나 레고 블록으로 만들거나 비행기 모양이 나오지만, 그 비행기를 자동차로 바꿔야 한다고 할때, 레고로 만들었던건 그냥 블록들 때서 자동차로 만들면 되는 것이죠. 그리고 요즘은 그 블록들도 쉽게 개별화 할 수 있기 때문에 모양도 잘나온다고 생각하시면 됩니다.
2. 기존에 웹사이트가 있다면 하이브리드 앱으로 제작이 가능할까요?
웹사이트가 제작된 방식, 또는 카페24 같은 곳에서 제작된 페이지는 불가능하거나 한계가 있을까요?
어떻게 제작하냐에 따라서 다르지만, 힘듭니다. 아직도 자바로 웹 관리 하는 곳이 많은 이유는 바로, 한번 만들어지면 고치기 힘들기 때문입니다. 그래서 최근에 모듈화 방식인 React 나 Node Microservice 같은게 뜨는겁니다.
3. 하이브리드 앱 제작 후에 스마트폰만의 기능( 사진, 푸쉬알람 등 )을 이용하기 위한 기능 추가가 가능할까요?
가능 합니다만, 업데이트 방식으로 해야 되며 이것은 웹사이트보다 좀 복잡합니다. 웹사이트 원리는 스마트폰 앱사용 하는 것과 방식이 똑같습니다. 우리가 www.naver.com에 간다고 치면, 에 있는 웹서버 (앱스토어) 에서 웹사이트 관련 파일들을 전송 받습니다 (앱다운로드). 그러면 이 파일을 실행시키는 겁니다 (다운 받은 앱 실행). 하지만 웹사이트는, 이 웹서버만 고쳐주면 되기 때문에 기능 추가가 굉장히 쉽죠.
하지만 모바일은 다운 받은 앱을 유저가 업데이트 해야 업데이트 된 기능들이 추가가 됩니다. 함부로 업데이트 안됬다고 서비스를 끊을 수도 없기 때문에 필요 기능들은 미리 미리 집어넣는게 모바일 앱개발에서는 필요합니다.
4. 소모임, 밴드 같은 어플리케이션은 모임마다 페이지가 주어지고 팀장? 모임장? 같은 권한을 통해 다양한 활동을 할 수 있게 해두었는데요. 모임마다 페이지를 준다는 것은 어떤 방식으로 가능한 것인지 궁금합니다..아무리 생각해도 규모가 엄청난 것 같고, 게시판을 모임마다 부여해주는 것인지, 서버같은 부분은 어떻게 진행되는 건지...
너무 막연한 질문인 것 같네요 ㅜㅜ!
자, 모임마다 페이지를 만들어주는게 개별적으로 만드는게 아닙니다. 공장에서 자동차 만들듯이 페이지 관련을 템플릿 화 시키는 겁니다. 모임마다 페이지를 만드는것이 어떻게 처리 되는지 알아보죠.
1) 유저가 모임 생성 버튼 클릭
- 모임 생성에 관한 데이터 값 입력
*모임 이름 (안녕)
*카테고리 (책읽기)
-모임 생성 데이터 값 백앤드로 전송
2) 백앤드가 유저의 모임 생성 요청 받음
- 유저가 보낸 값중에 틀리거나, 필요한게 빠졌는지 체크
*생성 설정에 '모임 공개값'이 무조건 필요하다고 설정 되어 있는데, 받은 데이터에는 없음 -> 요청 거절 (이것을 프론트앤드에서도 미리 빈칸이 있습니다 경고로, 데이터를 무조건 입력 후 보내도록 시킬 수 있지만 백앤드에서도 하는 이유는 바로 웹사이트가 아닌 곳에서도 백앤드 링크로 이 요청을 할 수 있기 때문입니다)
*두번째 요청에는 필요한 모든 데이터들이 도착, 확인 후 -> 데이터베이스에 저장 후 -> 유저에 요청 완료 전달
3) 백앤드에서 받은 요청 완료 결과를 유저에게 프론트앤드에서 뛰움.
- 유저 목록에서 확인하려고 함
- 유저 이름으로 생성된 모임 리스트를 백앤드에 요청
*유저아이디 전송 (이것은 보통 로그인 할때 쿠키나 로컬스토리지에 저장. 그래서 님이 쿠키를 지우면 자동로그인 되어있던 사이트에서 로그아웃 되는 겁니다)
4) 백앤드가 유저가 생성한 모임 리스트 요청 받음
- 받은 유저 아이디로 DB에서 query (검색)
- query 결과를 DB에서 가져옴
- 결과를 유저에게 전송함.
즉 이렇게 통신합니다.
백앤드를 건너 띄어서 데이터베이스에 직접 쓸 수 있지만 왜 이렇게 할까요? 바로 웹, 모바일 등등 다른 어플리케이션에서 동일하게 요청하고 받을 수 있고, 트래픽을 분산하거나 보안등을 처리 할 수 있기 때문이죠. 그리고 아까 말했듯이, 웹사이트나 앱은 유저가 코드를 받아서 유저 컴터에서 돌립니다. 즉, 민감한 코드들이 노출 되거나 유저가 자기 맘대로 데이터에 쓰고 할 수 있기 때문입니다.
자 그러면 보통 어떻게 하냐
DB에 모임관련 설정을 합니다
{
모임
- 이름: 필요함
- 장소: 필요함
* 이 외 데이터는 무조건 거절
}
백앤드에서도 프론트앤드에서 오는 데이터를 확인 후 데이터베이스에 보낼지 적용
{
프론트앤드에서 온 데이터
- 이름: 도착함
- 장소: 도착안함
* 데이터베이스에 쓰기 거절함
}
허나 만약에 백앤드에서 필터를 통과해서 데이터베이스에 전송이 됬을때, 바로 위에서 설정된 데이터베이스 설정으로 인해 저장이 거절되죠.
프론트앤드에서도 유저가 필요 정보를 다 적어야 백앤드에 전송할 수 있도록 설정함. 즉 이렇게 보안을 처리 할 수 있는거죠.
그리고 이렇게 데이터베이스를 만들때
{
유저
- id: sdfasdf,
- 나이: 32
}
{
모임
- 생성자: 유저.id (바로 위에서 가저옴)
- 장소: 인천
}
이렇게 하거나, 유저에 첨가 시키는등 여러 방법이 있습니다. 만약 제가 무슨말을 하는지 모르시겠다면, 백앤드 프론트앤드 DB의 개념과 어떻게 서로 통신하는지 등등을 꼭 공부하시고 이해하실때까지 읽어보세요.
5. 하이브리드 앱이라면 어떤 앱들이 있을까요? 소모임이나 밴드 어플도 하이브리드 어플로 볼 수 있을까요?
앱은 소스코드를 보기 전까지는 어떻게 만들어 졌는지 알기 힘듭니다. React Native로 만들어진 앱 중 대표적인게 Instagram 과 Facebook 앱이고요.
정말 궁금한 것이 정말 많습니다
제가 열심히 배워서 할 수 있을지에 대한 가능성도 궁금하네요..! 그렇다면 기간도 정말 길게 잡아야겠죠 ?
3년 잡고 하세요. 왠만해서는 4-6개월에도 어느 정도 만들 수 있지만, 빡세게 3년 하고 *계속 프로잭트 하면서 개발 실력이 어느 정도 되시면 그떄 잘 할 수 있을껍니다!
