📒 | IT지식_앱, 웹

비전공자를 위한 이해할 수 있는 IT 지식 - 5-6장 앱, 웹

 

출처 : DALL-E

1. 앱

• 응용 프로그램(Application Software): 데스크톱에 설치하는 프로그램
• 앱, 애플리케이션(APP,): 스마트폰에 설치하는 프로그램

버전 기록

• 00.00.00 점을 기준으로 버전 히스토리 부여
  • 오른쪽 끝자리 : 작은 변화
  • 중간 숫자 : 하위 버전과 호환이 가능하지만 큰 변화
  • 왼쪽 끝자리 : 하위 버전과 호환이 가능하지 않은 큰 변화
  • 버전이 달라질 때 이전에 있던 정보가 바뀔 때 혼란을 방지하기 위해 변동 가능한 회사 정책에 관한 정보는 보통 애플리케이션에 넣지 않고 API로 서버에서 불러오게 만든다 (ex. 가격, 할인율 등)

앱마켓(모바일)

• iOS : 앱스토어
• 안드로이드 : 구글 플레이 스토어
• 각 스토어의 룰을 따라서 스토어에 업로드 → 애플과 구글 직원이 직업 업로드 된 어플을 살펴 본 후 버그 발견시, 룰에 어긋날 시 리젝

 

출처 : DALL-E

2. 웹

웹을 구성하는 3요소 : HTML CSS, JS

HTML(Hyper Text Markup Language)

• 각각의 운영체제에서만 호환되는 파일을 주고받는다면 서로 파일을 열지 못해 문제 발생(윈도우 유저 / 맥 유저)
• 운영체제나 프로그램에 상관없이 일정한 형식이 언제나 동일하게 보이도록 하는 새로운 개념 필요로 탄생
• HTML : 운영체제에 상관없이 브라우저만 있으면 스마트폰, PC, 노트북, 윈도우, 맥 등 모두 웹사이트에 접속하여 동일한 정보 열람 가능
• 구성 코드
  • 태그 : 정보를 표현하기 위한 코드 (ex. h-Header, p-Paragraph, ol-Ordered List, ul-Unordered List), a태그 : 정보를 자유롭게 공유할 수 있는 '링크'
• HTML은 프로그래밍 언어가 아니다. 컴퓨터에게 특정 일을 시킬 수 있는 언어가 아닌 단지 브라우저가 볼 수 있는 문서를 적는 언어
• 문제 : 정보 전달에만 초점을 맞추다 보니 디자인 기능 부족 → 해결 : 디자인을 입힐 수 있는 CSS코드 붙임
  • HTML과 CSS를 합쳐 퍼블리싱, 마크업 작업이라고 표현

JavaScript(js)

• 웹 프로그래밍 언어(기능하게 함)
• 사용자가 네이버 검색창에  a를 치면 JS가 '사용자가 a를 쳤다'는 것을 감지한다→ a에 해당하는 실시간 검색어 목록을 조회하는 API 요청을 네이버 서버로 보냄(GET요청) → 네이버 서버는 a에 대한 실시간 검색어 목록을 정리해서 응답(JSON형식) →JS는 응답을 열어 HTML로 변경, CSS추가
• 네이버 개발자모드에서 body를 날리면 화면속 정보들이 날아간다. but 서버에 있는 원본을 건드린게 아니라 컴퓨터에 다운로드된 사본의 일부분을 지운 것이기 때문에 새로고침하면 다시 다운로드됨
  • 웹과 앱을 가르는 큰 차이점
  • 앱은 1.0.0에서 2.0.0으로 변경하기 위해서 업데이트와 심사 후에 유저는 그 결과를 다운로드 받아야 함
  • 웹은 변경된 서버를 새로고침 하면 바로 다운로드됨
  • 웹은 항상 새로고침을 받아햐 하므로 네트워크 속도의 영향을 많이 받는다
  • 앱은 웹보다 효율적으로 네트워크의 영향을 조금만 받도록 만들 수 있다

브라우저 버전의 파편화

• 시간이 흐르며 HTML, CSS, JS에는 새로운 기능들이 추가됨
• 각 브라우저는 서로 다른 어플리케이션이기 때문에 브라우저에 따라 그 안의 구현 방식이 다름
  • HTML, CSS, JS 특정 기능이 버전별로 브라우저별로 작동이 불가능할 수도 있다

반응형

• 과거 웹 페이지 : 양옆이 잘려 가운데에 콘텐츠가 모여있는 형태로 디자인
• but 스마트폰, 태블릿의 등장으로 화면이 잘려 보이지 않게 됨
• 브라우저의 가로넓이에 맞춰 반응하여 구성요소가 변하는 기술이 도입(반응형)
• 이를 위해서는 서로 다른 기기의 넓이에 따른 CSS를 추가로 코딩해야함 (작업 시간이 오래 걸리고, 더 높은 비용 필요)

 

 

출처 : DALL-E

 

3.  하이브리드 어플리케이션

운영체제에 내장된 브라우저

• 운영체제에 해당 기업의 브라우저를 내장시켜서 출시하여 유저를 많이 모집
• iOS 개발 : 스위프트, Objective-C
• 안드로이드개발 : 자바, 코틀린
  • 원래 정해놓은 언어들을 사용해 운영체제 자체의 기능을 사용하기 때문에 원주민이라는 '네이티브'가 붙게 됨

 

운영체제 안에 브라우저가 내장되자 앱의 특정 부분에 브라우저를 올리는 방식으로 앱개발이 가능해짐

네이티브와 브라우저가 혼합된 애플리케이션=하이브리드 애플리케이션

• HTML파일을 불러올 URL을 설정
• 브라우저가 뜨고 그 브라우저는 HTML과 HTML에 연결된 파일들을 불러와서 보여줌
• 수정할 때
  • 브라우저 위에서 돌아가는 부분 : 서버에 있는 원본(HTML, CSS, JS)수정
  • 네이티브인 부분 : 운영 체제 별로 다른 프로그래밍 언어를 통해 수정한 뒤 심사 신청 / 유저들이 업데이트
• 장단점
  • 브라우저를 통해 보여주는 방식 장점 : 수정이 용이함
  • 브라우저를 통해 보여주는 방식 단점 : 네트워크에 종속되기 때문에 네트워크 속도가 느린 공간에서는 대기해야함
  • 네이티브를 통해 보여주는 방식 장점 : 사용성이 좋다. 네트워크를 최소한으로 이용하도록 코딩하면 느린 환경에서도 빠르게 동작
  • 네이티브를 통해 보여주는 방식 단점 : 수정하는 데 넘어야 할 산이 많다