클라이언트 - 서버 구분이 이해되셨나요?
클라이언트는 또 다시 2가지로 구분되는데요.
하나는 프론트엔드 개발자, FE 개발자 라고도 합니다.
이들은 주로 웹 개발을 하는 분들입니다.
WEB
1. 웹을 구성하는 컴퓨팅 언어들 (HTML, CSS, JS)
2. 브라우저
3. 하이브리드 어플리케이션
1. 웹을 구성하는 컴퓨팅 언어들 (HTML, CSS, JS)
HTML & CSS & JavaScript
- HTML : 문서의 내용을 정의한다.
- CSS : 문서의 레이아웃(디자인)을 명확하게 정의한다.
- JavaScript : 문서의 동작을 프로그래밍한다.
—> HTML + CSS = 퍼블리싱
(이걸 하는 사람은 컴퓨터 프로그래머는 아님. 퍼블리셔임)
HTML과 CSS는 절대로 컴퓨터에게 일을 시킬 수가 없다.
그래서 그 뒤에 나온게 자바스크립트
하나의 사이트를 구성함에 있어서..
HTML만 있는 경우
CSS까지 있는 경우
Javascript 까지 있는 경우
네이버 페이지에서 내가 개발자 도구에서 CSS 다 삭제하면?
Web Applications
앱 같은 웹
웹사이트 -> 웹 어플리케이션 이런 변혁을 이끌었던 것이 구글,페이스북임.
구글 독스가 처음 나왔을 때 센세이션이었다.
그 전까지만 해도..
웹사이트에서 어떤 버튼을 누르면 무조건 페이지가 전환되거나 새로운 창이 뜨는 게 당연했음.
그런데 이제는 하나의 웹 사이트 내에서 동작함.
헷갈리나요?
기존 웹사이트 : 네이버 카페
웹 어플리케이션 : 페이스북
이런 웹의 발전된 버전을 웹 애플리케이션 Web Application ( a.k.a Web App )이라고 부릅니다.
= 웹 브라우저에서 이용할 수 있는 응용 소프트웨어 ( via. Wikipedia )
= 웹 애플리케이션은 웹 브라우저가 지원하는 HTML/XHTML 같은 표준 형식의 웹 문서 조합을 동적으로 만들어 내는 것
= 동적 기능을 수행하는 자바 스크립트라는 표준 언어가 클라이언트 동작을 담당 → 사용자에게 인터렉티브한 경험 전달
구글, 페이스북이 Javascript라는 언어를 엄청 발전시켰다.
Google Progressive Web Apps
브라우저
웹은 브라우저에서 돌아간다.
2008년 9월,구글이 크롬을 발표했는데,
지금은 전세계에서 크롬의 점유율이 제일 높다.
브라우저 버전
그런데, 브라우저도 업데이트를 한다.
업데이트를 하는 것이 중요한 이유는?
- 심지어.. 브라우저가 업데이트 하기 전인 CSS 언어는 읽지 못함.
fyi. 그걸 미리 테스트 해볼 수 있는 사이트
PM은
- 웹 서비스의 경우엔 브라우저 마다 어느 버전까지 대응을 할지,
- 어느 버전은 대응하지 않을 건지 정해 줘야 한다.
ex. “IE 8, 9은 동작이 안되더라도 화면 만큼은 깨지지 않게 해주세요.”
- 대응하지 않는 버전의 경우에 유저에게 어떻게 안내할지 기획해야 한다.
ex. 대응하지 않는 버전일 경우,
앱 내에서의 브라우저도 있습니다. 이걸 웹 뷰 Webview 라고 합니다.
카카오톡 브라우저 & 페이스북 브라우저
Cross Browsing Test
똑같은 서비스를 개발했어도, 브라우저마다 다르게 나올 수 있다.
그래서 실제 유저들에게 배포되기 이전에 꼭 한번 테스트를 해야한다.
브라우저마다 한번씩 열어보고 테스트를 해보는 것임.
다 들어가 보고, 이것저것 다 클릭 해보는 것.
요즘엔 대부분 UI는 다 잘 나오지만, Javascript로 만들어 두었던 ‘움직이는 기능들’은 동작이 잘 되는지 꼭 확인 해봐야 한다.
PM에게 중요한 것은,
- 동일한 웹 사이트인데 웹 브라우저 마다 다르게 나오지 않도록 방지하는 것.
- 브라우저 버전마다 다 잘 돌아가는지 체크하는 것.
프론트엔드 개발자가 쓰는 언어들
PM에게 중요한 것은,
우리 웹 서비스가 어떤 언어를 쓰는지 이해하고 있는 것.