[기획자 코딩] 은 기획자라면 알아야 할 기초적인 코딩 지식들을 다루었다.
모든 코딩지식을 알 필요는 없지만, 개발자와 소통할 정도의 지식은 필요하다.
웹
1. 웹
1-1. 웹의 구성
- HTML (브라우저가 볼 수 있도록 문서를 적으면) + CSS (디자인을 입히고) + JavaScript (프로그래밍을 한다)
*HTML 작업 = 마크업 작업 (HTML 작업하는 분들 = 마크업 개발자)
- HTML, CSS, JavaScript 완성본은 모두 서버에 저장 >> 고객이 보는 화면은 서버의 HTML 문서를 '사본'으로 가져온 것
- 변경 사항을 반영하기 위해서는 '새로고침' 하나면 OK (cf. 앱: 심사 필요)
장점: 수정이 용이. 유저가 업데이트 하지 않아도 새로 고침으로 빠르게 적용.
(수정 방식: 1. 코드 수정 2. 원본 파일을 수정된 파일로 교체 3. 변경 완료)
단점: 네트워크 영향에 크게 의존.
1-2. 브라우저
하는 일: HTML, CSS, JavaScript를 받아서 읽음
1) 크롬 (by. google - OS: 안드로이드)
2) 인터넷 익스플로러 (by. microsoft - OS: 윈도우)
3) 파이어폭스
4) 오페라
5) 사파리 (by. apple - OS: 맥 OS, iOS)
=> 브라우저의 파편화, 파편화를 잡는 것이 필요, 세계 점유율 고려할 필요 있음
(+) 반응형 웹
- 레이아웃 위주로 작업하여 각 디자인 기기에 반영 (모바일용 웹 페이지 추가 제작 X)
- 웹 페이지의 크기가 사용자의 기기에 맞춰 자동 변형
- bootstrap 참고
- 더 많은 시간과 비용 (*서로 다른 기기 넓이에 따른 CSS 추가 코딩 필요)
(+) PWA
- HTML, CSS, JavaScript로 만든 웹/앱을 모바일 환경에 설치 (웹 기술을 사용해 개발한 애플리케이션)
- 앱 설치 없이 웹 브라우저에서 곧바로 사용
- 앱처럼 홈 화면에 아이콘을 추가할 수 있고, 오프라인에서도 작동이 가능
앱
2. 앱 종류
(1) 네이티브 앱
- 각 운영체제에 맞는 언어를 사용해 제작
- ex. iOS 운영체제 내 개발 - 스위프트, Objective-C 언어 활용
- 장점: 사용성이 좋음
- 단점: 수정 불편, iOS 심사의 어려움, 사용자의 업데이트
(2) 하이브리드 애플리케이션
- 웹 기술(HTML, CSS, JavaScript)로 개발한 앱을 네이티브 앱 형태로 포장
- 애플리케이션 특정 부분에 브라우저를 올리는 방식, HTML 파일을 불러올 URL 설정
- 장점: 수정 용이 (서버 내 수정 후 새로고침으로 반영)
- 단점: 네트워크에 종속 (ex. 와이파이가 느린 공간 - HTML, CSS, JavaScript 다운 과정에서 시간 지연 시 불편)
프레임워크, 라이브러리
프레임워크: 다양한 키트들 제공 (이미 만들어놓은 코드), 한 프로젝트에 하나만 사용 가능
라이브러리: 한 프로젝트에 여러개 사용 가능
애플 / 프로그래밍 언어: OBJECTIVE-C, Swift / Cocoa
구글 / 프로그래밍 언어: Java, Kotlin / 안드로이드 프레임워크
웹 / 프로그래밍 언어: JS / Angular.js (구글), React.js (페이스북), Vue.js (중국 사람)
프로그래밍 언어 - 프레임워크, 라이브러리
Ruby - RAILS
JAVA - spring
JS - Express
python - django
어떤 부분이 웹이고,
어떤 부분이 네이티브 앱인지 어떻게 파악해?
- API 문서 살펴보기
- hint. 모든 부분이 새로고침되거나, 모바일 브라우저에서 HTML의 링크 클릭 시 회색 박스가 나타난다면 웹일 확률