앱 개발 처음이라면 웹앱으로 시작해야하는 이유

앱 개발 처음이라면 웹앱으로 시작해야하는 이유

처음 개발을 시작하면 웹으로 만들어야 할지 앱으로 만들어야 할지 고민하게 됩니다. 저도 처음에는 무조건 앱을 만들어야 한다고 생각했습니다. 스마트폰에 설치해서 쓰는 형태가 더 제대로 된 서비스처럼 보였기 때문입니다. 그런데 직접 Flutter로 앱을 만들어보고, 이후 웹앱도 만들어서 배포해보니 생각이 조금 달라졌습니다. 지금도 최종적으로는 앱이 더 좋다고 생각하는 부분이 있지만, 처음 개발하는 분에게는 웹앱부터 시작하는 것을 추천하고 있습니다.

첫 앱 개발 경험

Flutter 앱 선택

저는 처음 서비스를 만들 때 Dart 언어를 사용해서 Flutter로 앱을 개발하려고 했습니다. 당시에는 웹보다 앱이 더 좋아 보였습니다. 사람들이 스마트폰에 직접 설치할 수 있고, 앱스토어에도 올릴 수 있으니 제가 생각한 서비스를 제대로 만들려면 앱부터 해야 한다고 생각했습니다. Flutter는 하나의 코드로 안드로이드와 iOS를 함께 개발할 수 있다는 이야기도 많이 들어서 처음 시작하기에 괜찮을 것 같았습니다.

생각보다 어려운 개발

막상 시작해보니 생각했던 것보다 훨씬 어려웠습니다. Dart도 처음 배워야 했고 Flutter에서 화면을 만드는 방법도 익혀야 했습니다. 단순히 화면에 글자와 버튼을 넣는 것까지는 할 만했지만 실제로 제가 원하는 기능을 하나씩 넣기 시작하면서 어려움이 커졌습니다. 페이지를 이동하고 데이터를 저장하고 서버와 연결하는 것처럼 실제 서비스에 필요한 부분을 만들기 시작하니 하나를 해결하는 데도 시간이 오래 걸렸습니다.

반복되는 개발 문제

가장 힘들었던 것은 문제가 생겼을 때였습니다. 개발에 익숙한 사람이라면 금방 찾을 수 있는 오류도 저에게는 몇 시간이 걸렸습니다. 검색해서 코드를 그대로 넣어도 작동하지 않는 경우가 있었고, 겨우 하나를 고쳤는데 다른 부분에서 문제가 생기는 경우도 있었습니다. 처음에는 앱 하나 만드는 데 이렇게 많은 시간을 사용하게 될 거라고 생각하지 못했습니다.

6개월 개발 기간

결국 제가 생각했던 앱을 만드는 데 6개월이 넘는 시간이 걸렸습니다. 처음에는 한두 달 정도면 어느 정도 만들 수 있을 거라고 생각했습니다. 하지만 공부하면서 동시에 앱을 만들다 보니 시간이 계속 늘어났습니다. 지금 생각하면 개발을 처음 하는 사람이 새로운 언어와 Flutter를 배우면서 실제 서비스까지 한 번에 만들려고 했던 것 자체가 쉽지 않은 일이었습니다.

긴 개발 기간 문제

사라진 주제 관심

6개월이라는 시간이 더 아깝게 느껴졌던 이유가 있습니다. 제가 처음 앱을 만들기 시작할 때는 사람들이 관심을 가지고 있던 주제가 있었습니다. 저도 그 관심을 보고 관련 서비스를 만들면 괜찮겠다고 생각했습니다. 그런데 개발하는 동안 시간이 계속 지나갔고 앱이 어느 정도 완성됐을 때는 사람들이 이미 그 주제에서 많이 떠난 뒤였습니다.

늦어진 서비스 출시

이때 처음으로 개발 속도가 정말 중요할 수도 있겠다는 생각을 했습니다. 제가 아무리 열심히 6개월 동안 앱을 만들어도 사람들이 관심을 가지는 시기를 놓치면 의미가 많이 줄어듭니다. 특히 요즘처럼 새로운 서비스와 새로운 주제가 계속 등장하는 상황에서는 몇 달이라는 시간이 생각보다 길었습니다. 저는 앱을 만들고 있었지만 그동안 사람들의 관심은 기다려주지 않았습니다.

첫 개발 실패 경험

처음에는 앱만 완성하면 사람들이 사용할 거라고 생각했습니다. 하지만 실제로는 앱을 완성하는 것보다 언제 보여주느냐가 더 중요할 수도 있었습니다. 이 경험 이후에는 처음부터 완벽한 서비스를 만드는 것보다 일단 사용할 수 있는 수준까지 빠르게 만들어서 사람들에게 보여주는 것이 더 낫다고 생각하게 됐습니다.

웹앱 개발 전환

익숙한 웹 언어

그래서 이후에는 웹앱을 만들어서 배포하는 방법을 선택했습니다. 저 같은 경우에는 HTML, CSS, JavaScript가 이미 익숙했기 때문에 앱을 만들 때보다 훨씬 편했습니다. 화면을 하나 만드는 것도 빠르게 할 수 있었고 버튼이나 입력창에 기능을 넣는 것도 Flutter를 처음 배울 때보다 부담이 훨씬 적었습니다.

쉬운 웹 개발 시작

HTML, CSS, JavaScript도 처음 접하면 당연히 공부가 필요합니다. 하지만 개인적으로는 처음 웹을 배우는 분들이 접근하기에 그렇게 어려운 언어는 아니라고 생각합니다. HTML로 화면에 내용을 넣고 CSS로 모양을 바꾸고 JavaScript로 버튼이나 입력 기능을 만들 수 있습니다. 기본적인 것만 어느 정도 익혀도 작은 웹사이트 하나는 직접 만들어볼 수 있습니다.

빠른 결과 확인

웹을 만들면서 가장 좋았던 점은 제가 작성한 내용을 바로 확인할 수 있다는 것이었습니다. HTML 파일에 내용을 조금 바꾸고 브라우저를 새로고침하면 바로 결과가 보였습니다. CSS를 수정하면 디자인이 바로 바뀌고 JavaScript를 수정하면 기능도 바로 테스트할 수 있었습니다. 처음 Flutter를 배울 때와 비교하면 제가 원하는 결과까지 가는 시간이 훨씬 짧았습니다.

간단한 서비스 제작

처음부터 어려운 웹서비스를 만들 필요도 없습니다. 저도 웹으로 방향을 바꾸면서 모든 기능을 한 번에 넣으려고 하지 않았습니다. 일단 제가 필요하다고 생각한 기능부터 만들었습니다. 그렇게 하나씩 추가하다 보면 단순한 웹페이지에서 실제로 사용할 수 있는 웹앱이 됩니다.

웹 개발 입문 시작점

HTML 기본 사용

처음 웹 개발을 시작한다면 저는 HTML부터 해보는 것을 추천합니다. HTML은 웹페이지에 글을 넣고 이미지를 보여주고 버튼이나 입력창을 만드는 데 사용합니다. 처음에는 복잡한 문법을 모두 외울 필요도 없습니다. 제목 넣는 방법, 글 넣는 방법, 이미지 넣는 방법, 링크 넣는 방법 정도부터 직접 써보면 됩니다.

CSS 디자인 적용

HTML로 내용을 넣을 수 있게 되면 CSS를 같이 사용하면 됩니다. 처음에는 글자 크기를 바꾸고 여백을 넣고 버튼 색이나 크기를 바꾸는 정도만 해도 충분합니다. 저도 웹을 만들면서 모든 CSS 기능을 외워서 사용한 것이 아닙니다. 필요한 것이 생길 때마다 찾아가면서 만들었습니다.

JavaScript 기능 구현

JavaScript는 웹페이지에 실제 기능을 넣을 때 사용했습니다. 버튼을 눌렀을 때 다른 내용을 보여주거나 사용자가 입력한 값을 받아 결과를 보여주는 기능도 만들 수 있습니다. 처음부터 어려운 JavaScript를 모두 배울 필요는 없습니다. 변수, 조건문, 함수, 이벤트 정도부터 익히고 직접 사용해보면 생각보다 많은 것을 만들 수 있습니다.

기본 학습 우선

제가 처음 웹을 배우는 분에게 하고 싶은 말은 모든 내용을 다 배우고 시작하려고 하지 않아도 된다는 것입니다. HTML, CSS, JavaScript의 기본적인 부분만 보고 작은 것을 직접 만들어보는 편이 훨씬 낫습니다. 만들다가 모르는 것이 나오면 그때 찾아보면 됩니다. 저도 실제로 웹을 만들 때 모든 내용을 알고 시작한 것이 아니라 필요한 기능을 그때그때 찾아서 사용했습니다.

웹사이트 웹앱 차이

단순 웹사이트 시작

처음부터 웹앱을 만들어야 한다고 생각하면 어렵게 느껴질 수 있습니다. 저는 처음 시작하는 분이라면 그냥 웹사이트 하나를 만든다고 생각해도 된다고 봅니다. 글이나 이미지를 보여주는 페이지를 먼저 만들고 거기에 필요한 기능을 하나씩 추가하면 됩니다.

기능 추가 과정

예를 들어 처음에는 입력창 하나와 버튼 하나만 만들 수도 있습니다. 사용자가 값을 입력하고 버튼을 눌렀을 때 결과가 나오게 만들면 이미 단순한 정보 페이지보다는 기능이 있는 서비스에 가까워집니다. 이후 데이터 저장이 필요하면 데이터베이스를 연결하고 로그인이 필요하면 로그인 기능을 배우면 됩니다.

웹앱 부담 감소

처음부터 로그인, 회원가입, 결제, 관리자 페이지까지 모두 생각하면 시작하기도 전에 어려워집니다. 저도 앱을 만들 때 이것저것 처음부터 넣으려고 하면서 개발 기간이 길어졌습니다. 웹으로 다시 만들 때는 정말 필요한 기능부터 넣었고 이 방법이 저에게는 훨씬 편했습니다.

모바일 대응 반응형 웹

스마트폰 화면 제작

웹으로 만든다고 해서 컴퓨터에서만 사용할 수 있는 것은 아닙니다. CSS를 이용하면 스마트폰 화면에서도 편하게 볼 수 있도록 만들 수 있습니다. 저도 웹앱을 만들면서 PC 화면만 생각하지 않고 스마트폰에서도 버튼을 누르기 편한지, 글자가 너무 작지 않은지 확인하면서 만들었습니다.

반응형 웹 적용

화면 크기에 따라 메뉴나 콘텐츠 크기를 바꾸는 반응형 웹도 처음에는 어렵게 들릴 수 있습니다. 하지만 기본적인 미디어 쿼리 사용법 정도만 알아도 스마트폰 화면에 맞게 변경할 수 있습니다. 처음 개발하는 분이라면 PC용 사이트와 모바일용 사이트를 따로 만들기보다 하나의 웹페이지를 화면 크기에 맞게 보이도록 만드는 것이 훨씬 편합니다.

모바일 브라우저 활용

이 정도만 만들어도 사용자는 앱을 설치하지 않고 스마트폰 브라우저에서 바로 서비스를 이용할 수 있습니다. 저는 이 부분이 웹앱의 가장 큰 장점이라고 생각했습니다. 링크를 하나 보내면 상대방이 바로 들어올 수 있기 때문에 처음 만든 서비스를 다른 사람에게 보여주기도 쉬웠습니다.

웹앱 빠른 배포

링크 하나 공유

앱을 만들 때와 비교해서 웹앱이 특히 편했던 것은 배포였습니다. 웹에 올린 뒤 주소만 보내면 다른 사람이 바로 사용할 수 있었습니다. 앱스토어에서 검색하게 할 필요도 없고 먼저 설치하라고 설명할 필요도 없었습니다. 링크를 누르고 바로 사용할 수 있다는 점이 처음 서비스를 테스트할 때 정말 편했습니다.

즉시 수정 반영

문제가 발견됐을 때도 바로 수정할 수 있었습니다. 사용자에게 새로운 파일을 다시 받으라고 할 필요 없이 제가 웹에 올라간 코드를 수정하면 됐습니다. 아직 기능을 계속 바꾸는 단계라면 이런 방식이 앱보다 훨씬 편했습니다.

빠른 아이디어 테스트

특히 새로운 아이디어를 시험해볼 때는 웹이 잘 맞았습니다. 사람들이 사용할지 모르는 서비스를 몇 달 동안 앱으로 만드는 것보다 간단한 웹앱을 만들어 먼저 보여주는 편이 부담이 적었습니다. 반응이 없다면 크게 아쉬워하지 않고 다른 것을 만들어볼 수도 있었습니다.

PWA 설치 기능 경험

처음 가진 기대

웹앱을 만들고 나서는 PWA도 사용해봤습니다. PWA를 이용하면 웹사이트를 스마트폰 홈 화면에 추가해서 앱처럼 실행할 수 있기 때문입니다. 처음에는 이것만 있으면 굳이 네이티브 앱을 만들지 않아도 되지 않을까 생각했습니다.

개인적인 설치 습관

그런데 생각해보니 저부터 웹사이트에서 무언가를 잘 내려받지 않는 사람이었습니다. 처음 보는 사이트에 들어갔는데 갑자기 설치하거나 홈 화면에 추가하라고 하면 저도 바로 누르지 않습니다. 평소 제가 그렇게 행동하면서 방문자들에게는 웹에서 PWA 방식으로 설치해달라고 하는 것이 과연 잘 될까 하는 의문이 생겼습니다.

실제 방문자 반응

실제로 운영해보니 PWA 방식으로 설치하는 방문자는 매우 적었습니다. 사이트에는 들어와도 대부분 브라우저에서 그대로 사용했고 굳이 홈 화면에 추가하거나 설치까지 하는 경우는 많지 않았습니다. 개발할 때는 설치 기능을 넣으면 많은 사람이 사용할 것 같았는데 실제 방문자의 행동은 제 예상과 달랐습니다.

설치 신뢰 문제

생각해보면 당연한 일이기도 합니다. 잘 모르는 웹사이트에서 설치를 권한다고 해서 바로 설치하는 사람은 많지 않습니다. 앱스토어에서 받는 앱과 달리 사용자가 직접 사이트에 방문해서 설치해야 하니 익숙하지 않은 사람도 있습니다. 무엇보다 사용자가 그 서비스를 자주 사용할 이유가 아직 없다면 굳이 설치할 필요도 없습니다.

PWA 설치 기능 선택

처음부터 설치 불필요

이 경험 때문에 지금은 웹앱을 만든다고 해서 처음부터 PWA 설치를 중요하게 생각할 필요는 없다고 봅니다. 처음 방문한 사람에게 설치를 요구하는 것보다 브라우저에서 바로 기능을 사용할 수 있게 만드는 편이 낫습니다.

반복 방문 이후 설치

사용자가 서비스를 여러 번 이용하면서 정말 자주 찾게 된다면 그때 홈 화면 추가를 안내하는 것은 괜찮습니다. 이미 어떤 서비스인지 알고 있고 자신에게 필요한 서비스라는 것도 알고 있기 때문에 처음 방문했을 때보다 설치할 이유가 생깁니다.

PWA 현실적인 한계

저는 처음에는 PWA가 네이티브 앱을 대신할 수 있을 거라는 기대도 했습니다. 하지만 실제 방문자들이 설치하지 않는 모습을 보면서 생각이 달라졌습니다. 기술적으로 설치할 수 있다는 것과 사람들이 실제로 설치한다는 것은 전혀 다른 문제였습니다.

네이티브 앱 개발 시점

현재 앱 개발 선택

그래서 저는 현재 다시 앱 개발을 하려고 하고 있습니다. PWA로 설치를 유도하는 것보다 앱스토어에서 실제 앱을 받을 수 있게 만드는 편이 제가 원하는 서비스에는 더 맞다고 판단했기 때문입니다. 예전처럼 앱 개발 자체가 필요 없다고 생각하는 것은 아닙니다. 오히려 최종적으로 앱이 필요한 서비스라면 결국 앱을 만드는 것이 좋다고 보고 있습니다.

어려운 앱 개발 현실

다만 제가 직접 처음 앱을 만들면서 겪어봤기 때문에 초보자에게 처음부터 앱 개발을 추천하기는 어렵습니다. Flutter 하나만 선택해도 Dart를 배워야 하고 Flutter 사용법을 익혀야 하며 앱에서 발생하는 여러 문제도 직접 해결해야 합니다. 여기에 서버나 데이터베이스까지 필요해지면 초보자 입장에서는 해야 할 일이 정말 많아집니다.

웹앱 추천 이유

제가 초보자에게 웹앱을 추천하는 이유도 웹앱이 무조건 앱보다 좋아서가 아닙니다. 처음 시작하기에 현실적으로 훨씬 접근하기 쉽기 때문입니다. HTML, CSS, JavaScript 기본만 알아도 화면을 만들 수 있고 작은 기능을 추가해서 실제 인터넷에 배포할 수 있습니다. 처음부터 앱 하나를 완성하려고 몇 달을 사용하는 것보다 직접 만든 서비스를 빠르게 공개해보는 경험을 먼저 가져보는 편이 좋다고 생각합니다.

초보 개발자 추천 순서

웹사이트 첫 제작

처음에는 HTML, CSS, JavaScript를 이용해서 작은 웹사이트 하나를 만들어보는 것을 추천합니다. 정말 간단해도 됩니다. 입력창 하나와 버튼 하나가 있고 버튼을 누르면 결과가 나오는 정도여도 괜찮습니다. 중요한 것은 내가 직접 작성한 코드가 인터넷에서 실행되는 것을 경험해보는 것입니다.

필요한 기능 추가

그다음에는 자신이 만들고 싶은 서비스에 필요한 기능을 하나씩 추가하면 됩니다. 데이터 저장이 필요하면 그때 데이터베이스를 공부하고 로그인 기능이 필요하면 그때 배워도 됩니다. 처음부터 서비스에 들어갈 모든 기술을 배울 필요는 없습니다.

웹앱 실제 배포

기능이 어느 정도 만들어졌다면 직접 웹에 올려보는 것을 추천합니다. 다른 사람이 링크를 눌러 들어와서 사용하게 해보면 혼자 만들 때는 몰랐던 부분을 알게 됩니다. 버튼이 불편할 수도 있고 설명이 부족할 수도 있고 생각보다 아무도 사용하지 않을 수도 있습니다. 이런 경험은 실제로 배포해보기 전에는 알기 어렵습니다.

PWA 선택 적용

사용자가 자주 방문하기 시작했다면 PWA 기능을 추가해볼 수 있습니다. 다만 제가 경험한 것처럼 설치율이 생각보다 낮을 수도 있습니다. 처음부터 PWA 설치 숫자를 기대하기보다 브라우저에서 편하게 사용하는 것을 먼저 생각하는 편이 낫습니다.

네이티브 앱 확장

웹에서 서비스를 운영해보고 사람들이 실제로 사용하고 있다는 것을 확인한 뒤 앱이 필요한 이유가 생기면 그때 네이티브 앱을 만들어도 됩니다. 저처럼 PWA 설치가 생각보다 잘 되지 않거나 앱스토어에서 받을 수 있는 앱이 필요하다고 판단되면 그때 앱 개발에 시간을 투자하는 것입니다.

첫 개발 추천 방향

웹 우선 시작

제가 처음으로 돌아간다면 다시 Flutter부터 시작하지는 않을 것 같습니다. HTML, CSS, JavaScript가 익숙한 만큼 우선 웹으로 서비스를 빠르게 만들고 사람들에게 먼저 보여줄 것입니다. 실제로 사용하는 사람이 있는지 확인한 다음 필요한 기능을 추가할 것입니다.

앱 개발 후순위

그렇다고 앱을 만들지 않겠다는 뜻은 아닙니다. 저 역시 현재는 앱 개발을 다시 생각하고 있습니다. 다만 처음부터 앱을 만드는 것과 웹에서 먼저 가능성을 확인한 뒤 앱을 만드는 것은 부담이 크게 다릅니다. 이미 사람들이 사용하는 서비스라면 어려운 앱 개발에 시간을 쓰는 이유도 분명해집니다.

초보자 현실 선택

처음 개발하는 분에게 웹앱을 추천하는 이유는 단순합니다. 앱 개발보다 시작하기 쉽고 결과를 훨씬 빨리 볼 수 있기 때문입니다. HTML, CSS, JavaScript는 기본적인 내용만 익혀도 직접 무언가를 만들어볼 수 있습니다. 작은 웹사이트부터 만들어보고 기능을 추가해보고 실제로 배포한 뒤 그다음에 앱 개발을 고민해도 늦지 않습니다.

결론

처음 개발을 시작하는 분이라면 처음부터 앱 개발에 많은 시간을 쓰기보다 HTML, CSS, JavaScript로 웹앱부터 만들어보는 것을 추천합니다. 저 역시 Flutter 앱 개발에 6개월 넘게 사용한 뒤 웹앱으로 방향을 바꾸면서 훨씬 빠르게 서비스를 만들고 배포할 수 있었습니다. PWA는 실제 방문자들이 설치하는 비율이 낮아 현재는 다시 앱 개발을 생각하고 있지만, 초보자에게는 웹앱으로 먼저 서비스를 만들어보고 실제 사용자가 생긴 뒤 앱 개발을 고민하는 방법이 현실적이라고 생각합니다.

FAQ

웹 개발을 처음 시작하면 어떤 언어부터 배우는 게 좋나요?

처음에는 HTML, CSS, JavaScript부터 배우는 것을 추천합니다. 세 가지 모두 기본적인 내용만 익혀도 직접 웹페이지를 만들고 간단한 기능까지 넣어볼 수 있습니다. 처음부터 모든 문법을 외우려고 하기보다 필요한 기능을 만들면서 하나씩 배우는 방법이 편합니다.

초보자가 처음부터 Flutter로 앱을 만들어도 되나요?

물론 가능합니다. 다만 개발 경험이 없다면 Dart 언어와 Flutter 사용법을 동시에 배워야 해서 생각보다 많은 시간이 필요할 수 있습니다. 저 역시 처음 Flutter로 앱을 만들면서 6개월 넘게 걸렸기 때문에 빠르게 서비스를 만들어보고 싶은 분이라면 웹부터 시작하는 것을 권하고 싶습니다.

웹사이트와 웹앱은 어떤 차이가 있나요?

웹사이트는 정보를 보여주는 용도로 많이 사용하고, 웹앱은 사용자가 직접 입력하거나 데이터를 저장하고 여러 기능을 이용할 수 있는 형태라고 생각하면 이해하기 쉽습니다. 처음에는 간단한 웹사이트로 시작한 뒤 기능을 하나씩 추가하면서 웹앱으로 만들어도 됩니다.

웹앱도 스마트폰에서 편하게 사용할 수 있나요?

반응형 웹으로 만들면 스마트폰에서도 충분히 편하게 사용할 수 있습니다. 화면 크기에 맞춰 글자와 버튼 크기를 조절하고 메뉴 배치를 바꾸면 별도의 앱을 설치하지 않아도 모바일 브라우저에서 이용할 수 있습니다.

PWA를 적용하면 사람들이 많이 설치하나요?

제가 직접 운영해본 경험으로는 PWA 방식으로 설치하는 방문자가 생각보다 많지 않았습니다. 저 역시 평소 웹사이트에서 무언가를 쉽게 설치하지 않는 편이라 사용자들도 비슷할 수 있겠다는 생각을 했고, 실제 방문자들도 대부분 브라우저에서 그대로 이용했습니다.

PWA와 네이티브 앱 중 어떤 것이 더 좋나요?

어느 한쪽이 무조건 좋다고 보기는 어렵습니다. 빠르게 서비스를 만들고 배포하는 것이 중요하다면 웹앱이나 PWA가 편할 수 있고, 앱스토어 배포나 스마트폰 기능 활용이 중요하다면 네이티브 앱이 더 적합할 수 있습니다.

웹앱으로 시작했다가 나중에 앱을 만들어도 되나요?

가능합니다. 오히려 처음에는 웹앱으로 서비스를 공개해 사람들이 실제로 사용하는지 확인한 뒤 앱이 필요한 이유가 생겼을 때 개발하는 방법도 좋습니다. 저 역시 현재는 웹앱 운영 경험을 바탕으로 다시 앱 개발을 생각하고 있습니다.

처음 개발할 때 가장 중요하게 생각해야 할 것은 무엇인가요?

처음부터 완벽하게 만들려고 하기보다 실제로 작동하는 작은 서비스를 하나 만들어 배포해보는 것을 추천합니다. 직접 다른 사람이 사용하는 모습을 보면 공부만 할 때는 알기 어려웠던 부분을 많이 배울 수 있고, 계속 개발할 가치가 있는 서비스인지도 더 빨리 판단할 수 있습니다.