웹 개발 알아두기 (33) 썸네일형 리스트형 Web app manifests 웹애플리케이션 정보를 제공하는 파일로 웹애플리케이션 다운로드와 표시할 정보를 담고 있습니다. 참고 Web app manifests | MDN Web app manifests are part of a collection of web technologies called progressive web apps (PWAs), which are websites that can be installed to a device's homescreen without an app store. Unlike regular web apps with simple homescreen links or bookmarks, PW developer.mozilla.org HTTP vs HTTPS http (Hyper Text Transfer Protocol)는 애플리케이션 층의 프로토콜로 브라우저와 서버 간에 통신을 가능하게 합니다. https (Hyper Text Transfer Protocol Security)는 그 이름에서 알 수 있듯이 http에 보안기능을 추가한 형태로 http과 달리 암호화된 경로 (Secure Socket Layer 또는 Transport Layer Security 인증서 사용)를 사용하여 데이터가 외부에 노출되지 않도록 합니다. http를 사용하는 웹사이트는 아래와 같이 검색창 좌측에 'Not secure'라는 문구가 뜹니다. https를 사용하는 웹사이트는 아래와 자물쇠 기호가 뜹니다. 사용자의 개인정보 등을 전송하지 않는 경우 http를 사용하여도 무관하지만 개.. 반응형 디자인 (responsive design) 반응형 디자인은 하나의 웹사이트의 콘텐츠가 화면의 크기, 디바이스의 종류나 해상도와 관계없이 자연스럽게 표시되도록 하는 설계방식으로 과거와 달리 웹사이트 접근을 위해 사용하는 디바이스가 데스크톱에 국한되지 않는 요즘 웹사이트 제작 시 반드시 고려되어야 하는 요소 중에 하나가 되었습니다. 반응형 웹사이트를 만드는 방식은 아래와 같이 크게 두 가지로 나뉩니다. 1. mobile first design 모바일 화면을 먼저 구성하고 점차 큰 디바이스들의 화면에 맞게 콘텐츠를 늘려가는 방식 2. desktop first design 데스크 톱 화면을 먼저 구성하고 점차 작은 디바이스들의 화면에 맞게 콘텐츠를 줄여가는 방식 반응형 웹사이트 제작 시 활용 가능한 것들 1. 상대단위 웹사이트의 스타일을 담당하는 CSS.. User Experience (UX) UX (User Experience)는 사용자가 제품을 접하면서 갖게 되는 느낌을 의미합니다. UX 디자인은 이러한 유저의 경험이 긍정적인 경험이 될 수 있도록 하는데 초점을 둡니다. 사용자와 인터페이스의 소통이 가장 중요한 웹디자인의 특성상 UX는 UI와 밀접한 관계를 가지고 때로는 혼용되어 사용되는데요. UX와 UI는 모두 쉽고 편리하게 사용할 수 있는 웹사이트를 사용자에게 제공하는 것을 목적으로 하는 점에서는 동일하나 UX는 사용자와 Interface의 관계에 초점을 두는 UI와 달리 보이지 않는 모든 부분까지 고려한다는 점에서 UI를 포함하는 개념입니다. 참고 What is User Experience (UX) Design? What is User Experience (UX) Design? Use.. 캐시 (cache) 캐시는 데이터 저장소를 의미합니다. 사용목적은 데이터 요청이 있을 때 해당 정보를 저장해 두었다가 추후 해당 데이터가 다시 요청될 때 사전에 저장된 데이터를 제공함으로써 응답시간을 단축시키기 위해 사용합니다. 캐시는 요청을 저장하는 Service worker와 달리 응답을 저장합니다. 네트워크 프락시 (Network Proxy) 프락시 서버는 브라우저와 서버 중간에서 요청을 전달하는 역할을 수행합니다. 프락시 서버는 단순한 중재자의 역할을 넘어 아래와 같은 다양한 기능을 제공합니다. 특정 IP를 제외시키거나 해당 IP에 대한 접근량이 얼마나 되는지 파악할 수 있게 해 줍니다. 캐시에 이전 검색기록을 저장하여 같은 요청이 있을 경우 중간에서 요청 처리가 가능하기 때문에 속도향상. 마찬가지로 같은 사이트에 대해 다수의 요청이 있을 때 서버에 대한 요청 1회로 모든 요청을 처리할 수 있어 네트워크 성능향상. 요청하는 IP 주소를 수정하거나 부가정보 노출 없이 서버에 요청이 가능하여 개인정보 노출을 줄일 수 있음. 추가로 IP주소를 수정하는 기능을 통해 접근하는 위치를 노출하지 않거나 다른 곳에서 요청하는 것처럼 위장할 수 있어 특정 .. 서비스 워커 (Service Worker) 서비스 워커는 브라우저에서 작동하는 스크립트로 사용자의 요청을 저장합니다. 사용자가 탭을 닫더라도 서비스워커는 지속되기 때문에 다음에 사용자가 웹에 접근 시 서비스 워커가 먼저 작동합니다. 이러한 특성 때문에, 서버와 브라우저 사이에 위치하며 브라우저에서 서버로 가는 요청을 받아 이전 캐시 (cashe) 기록을 참고하여 처리할 수 있는 요청은 서버로 보내지 않고 처리하는 것이 가능합니다 (network proxy와 같은 역할 수행). 이처럼, 캐시기록이 남아있는 경우, 서비스워커는 독립적으로 전체 애플리케이션을 로딩할 수 있으며 이는 서버에 대한 의존성을 줄여 로딩 속도를 향상함으로써 User Experience (UX)를 크게 향상해 줍니다. 참고 Angular angular.io HTML 삽입 미리보.. 프로그레시브 웹 앱 프로그레시브 웹앱은 웹과 앱의 장점을 합친 애플리케이션입니다. 두 플랫폼의 장점을 호환하고 네트워크가 없는 환경에서도 애플리케이션을 구동할 수 있게 하기 위해 service worker, cache, web storate, indexedDB 등 다양한 기술을 활용합니다. 프로그레시브 웹앱인지 아닌지를 구분하는 기준은 아래와 같습니다. 모바일 화면과 웹 화면 모두에서 구동 가능한 반응형 애플리케이션 일 것 네트워크에 연결되지 않아도 애플리케이션의 모든 기능을 사용 가능할 것 Web push API, Notifications API 등일 사용하여 업데이트 알림 등으로 사용자가 해당 애플리케이션을 사용할 수 있도록 소통이 가능할 것 전용 아이콘을 통해 애플리케이션을 사용 가능할 것 애플리케이션 설치 없이 UR.. 이전 1 2 3 4 5 다음
