기획을 위한 최소한의 개발 지식 (5)
App 과 Web
목차
✅ 컴퓨터의 구성 요소와 운영체제
✅ 프로그래밍 언어
✅ 네트워크, 클라이언트, 서버
✅ 스크래핑, API, JSON
✅ App 과 Web ⬅︎
✅ 네이티브, 리액티브, 웹앱, 하이브리드
✅ 데이터베이스
✅ 프레임워크, 라이브러리
✅ 개발팀 협업 방법
✅ 클라우드
B2C 서비스를 론칭하면 보통은 PC Web, Mobile Web, App(iOS & aOS) 중에서 1가지 이상은 론칭을 한다. 사용자에게 보여지는 화면이 아닌, 사용자의 원장을 관리하거나 직원들이 업무를 처리하는 Admin 화면도 기획이 필요하다. Notion, Slack, Mailchimp, Salesforce 등 특정 업무를 편리하게 해주는 S/W를 제공하는 B2B SaaS 회사들의 경우에는 아무래도 Web 형태를 많이 띄고, App 을 같이 제공하는 경우도 있다.
S/W를 기획하려면 서비스 사용자의 니즈를 가장 잘 만족시켜 줄 형태가 무엇인지 파악할 필요가 있다. 예를 들어 카카오톡은 App을 위주로 서비스를 출시했지만 추후 PC와 태블릿 버전을 출시했다. PC로 업무를 하(는 척 하)면서 카톡을 하는 게 얼마나 즐거운지는 회사원이라면 누구나 공감할 거다. 또, App 서비스라고 하더라도 그 안에는 화면 별로 Web 형태로 개발하는 것이 효율적일 때가 있다.
또, App과 Web으로 서비스를 출시함에 따라 개발 혹은 디자인의 어떤 작업이 달라지는 지를 명확하게 알아야 그들과 소통하며 프로젝트를 이끌어갈 수 있다. 예를 들어 앱스토어에 대한 이해가 부족해서 심사가 지연된다던지 목업이 뭔지 모르고 준비를 못한다던지 하는 일을 줄일 수 있다.
☑️ App : Application Software. 응용 프로그램 즉 OS 위에 설치해서 사용하는 모든 프로그램. 버전 업데이트를 할 때 기존 버전 사용자에게 강제 업데이트를 시킬지, 수동 업데이트를 시킬지 등도 정책에 반영해야 한다. 과금 체계가 바뀌는 등의 중대한 정책 변화는 강제 업데이트가 필요하다. 업데이트를 너무 자주 하면 사용자 이탈이 발생하고, 너무 안 하면 버그 등의 수정이 늦게 반영된다. 따라서 적절한 시기에 적절한 기능 개선 등을 모아서 업데이트를 할 필요가 있다.
☑️ 앱 마켓 별 특징 : 앱을 처음 출시할 때는 앱 마켓의 심사 과정을 거친다. 구글 aOS의 플레이 스토어는 직원이 직접 앱을 살펴보고 버그가 있으면 reject 할 수는 있지만, 심사 과정이 간소해서 보통 반나절 안에 승인해 준다. 다만 구글의 지침에 맞지 않는 앱의 경우 예고 없이 마켓에서 내려 버린다. 애플 iOS의 앱스토어는 사전에 테스트를 깐깐하게 진행하며 상대적으로 심사가 오래 걸릴 수 있어 보수적인 일정 산정이 필요하다. 앱스토어에 지침에 어긋난 앱이 있더라도 경고장을 보내고 수정하지 않을 때 내리는 식으로 진행되며 구글보다 논의가 더 빠르고 활발하다. 사전 심사가 느슨한 플레이 스토어에 비해 앱스토어에 등록된 앱이 적으며 대부분의 앱이 정상 동작하고 깔끔하다.
☑️ Web : 브라우저를 통한 호출로 이루어지며, URL을 알고 있거나 검색 등을 통해서만 접속이 가능하다. 서버에 원본이 있고 브라우저에서 사본을 다운로드 받아서 보여주는 방식이라서 서버의 원본이 바뀌어도 '새로고침' 버튼만 한 번 누르면 실시간으로 바뀐 내용을 볼 수 있다. Web을 이해하기 위해 HTML, CSS, JavaScript를 알아야 한다.
☑️ HTML : Hyper Text Markup Language. 운영체제와 관계 없이 브라우저만 있으면 일정한 형식이 언제나 동일하게 보이게 해주는 문서. 크롬이나 사파리 등의 브라우저에서 개발자 도구를 누르면 HTML 코드를 볼 수 있다. HTML은 컴퓨터에게 특정한 일을 시킬 수 있는 프로그래밍 언어가 아니라 브라우저가 볼 수 있는 문서를 적는 언어이다. HTML은 텍스트 등의 정보만 표현하고, 디자인 요소가 들어있지 않다. HTML 작업을 '마크업' 작업이라고 부르기도 한다.
☑️ CSS : Cascading Style Sheets. HTML에 디자인을 입힐 수 있는 코드이다. HTML과 CSS 작업을 합쳐서 '퍼블리싱' 작업이라고 표현하고, 이 작업을 하는 사람들을 '퍼블리셔' 라고 부른다.
☑️ JavaScript : HTML과 CSS로는 구현하기 힘든 기능을 구현하기 위한 프로그래밍 언어이다. 예를 들어 네이버 검색창에 글자를 쳤을 때 추천 검색어를 띄워 주는 기능은 사용자가 입력한 글자를 input값으로 하는 실시간 검색어 목록을 조회하는 API 요청을 네이버 서버로 보내서 (GET) JSON 형식으로 받아 표현해 주는 것이다.
App 과 Web의 차이점과 장단점은 정리할 필요가 있어서 표로 만들어 봤다. (아래의 여러 참고자료 에서 개인적으로 필요한 정보만 가져와서 정리했다.)
<App 과 Web의 차이>PC 위주의 디바이스 트렌드가 애플의 아이폰을 시작으로 스마트폰, 태블릿 등 다양한 기기로 옮겨 가면서 UI/UX 최적화가 가능한 앱의 수요가 폭증했다. 여러 장단점이 있지만 사용자가 사용성을 그 어느 때보다 중시하는 만큼, '원하는' 서비스만 설치해 놓고 자주 사용하는 패턴이 당분간 쉽게 바뀔 것 같지는 않다. 그래서 기획자가 디자인 요소에 대해서도 민감해야 하고 직접 디자인을 하지 않는다 뿐이지 tab이나 버튼의 노출 위치 등은 리서치를 통해 사용자 편의를 최적화할 수 있는 방향으로 디자이너와 논의해서 결정할 수 있어야 한다.
결론은, 기획자는 '다 조금이라도 더 아는 게 좋다' 이다. App과 Web의 구분 자체가 사라지는 건 당분간 어려울 것 같고, 경우에 따라 사용자의 수요가 둘 다 있으니 둘 다 기획할 줄 아는 게 아무래도 좋다.
참고 자료
<비전공자를 위한 이해할 수 있는 IT 지식>, 최원영, 2021.02.01., T.W.I.G.
<주니어도 쉽게 이해하는 SaaS>, G&B, 2022.9.26., https://www.grownbetter.com/article/176
<[어플기획 십계명] 웹이냐.. 앱이냐.. 그것이 문제로다..>, 야메군, 2011.1.25., https://www.yamestyle.com/96
<빠른 성장을 위해 앱과 웹 중 어디에 집중해야 할까요?>, HYEJIN JOH, 2022.4.29., https://blog.ab180.co/posts/apps-vs-website-growth
<자사몰 앱 VS 웹 무엇이 더 좋을까요?>, MD 커리어 인사이트, 2022.6.20., https://www.onmd.net/md-magazine/?idx=11872842&bmode=view
<빠른 목업 제작을 위해 알아두면 좋은 서비스들>, 지금 써보러 갑니다, 2021.10.13., https://yozm.wishket.com/magazine/detail/1083/
