WEB (11) 썸네일형 리스트형 [Web] 디스플레이 해상도에 따른 실 사용자 뷰포트 고려 ✅ 디자인 툴 vs 실제 브라우저 화면 차이항목디자인 툴 (Figma 등)실제 브라우저 (PC 기준)해상도1440×1024, 1920×1080 등 프레임 기준대부분 1366×768, 1920×1080 등사용 가능 높이전체 해상도 기준주소창 + 북마크바 + 탭바 등으로 약 150~200px 손실실제 뷰포트 높이1080px 기준 약 800~900px 정도(노트북은 768px 이하도 빈번)예시: 1920×1080 모니터 기준, 브라우저 크롬(주소창, 탭 등)을 제외하면, 실제 뷰포트는 약 890~920px 수준.=> 실제 브라우저에서의 뷰포트 높이는 디자인 프레임보다 상당히 작다. ✅ 실무 기준: 실제 사용자 높이 기준은?UI/UX 디자이너나 퍼블리셔는 보통 세로 기준 800px 또는 900px을 최소 기준 .. [Web] 프로젝트 디자인 협업 진행 - 논리적 픽셀 크기window.innerWidth: 1512window.innerHeight: 982=> 논리적 픽셀 크기: 1512x982. i.e) 뷰포트 크기와 동일하게 동작함. 디스플레이 해상도는 물리적 픽셀 크기를 뜻함. - DPR & 운영체제 배율window.devicePixelRatio: 1.25 i.e) DPR(픽셀 비율): 1.25=> 운영체제 배율(125%)은 자동으로 브라우저에서 DPR에 반영됨. 운영체제 배율과 DPR은 다른 개념!!! Ex)고해상도 이미지는 DPR 기반으로 제공@media screen and (min-resolution: 192dpi) { .image { background-image: url('image@2x.png'); }}텍스트와 레이.. [WEB] 웹 앱 vs 모바일 웹 총정리 ✅ 모바일 웹 vs 웹 앱모바일 웹(Mobile Web)과 웹 앱(Web App)은 모두 웹 기술을 기반으로 브라우저에서 실행되지만, 그 목적과 기능 측면에서 차이가 있습니다. - 웹 앱: 레이아웃 방식에 구애받지 않고 브라우저에서 동작하는 애플리케이션. 브라우저에서 실행되지만 애플리케이션의 기능을 제공하는 웹 기반 프로그램. - 모바일 웹은 모바일 브라우저(예: Chrome, Safari)에서 최적화된 웹사이트. 특정 모바일 기기나 화면 크기에 맞게 디자인된 웹 페이지로, 모바일 사용자가 보기 편리하도록 레이아웃과 콘텐츠를 최적화한 형태입니다. 결론: 모바일 웹은 모바일 친화적인 웹사이트를 의미하며, 주로 정보 제공이나 콘텐츠 소비에 중점을 둡니다. 반면, 웹 앱은 애플리케이션의 기능을 제공하며, 사.. [WEB] 피그마 협업 시 1배수 디자인 고려할 점(해상도, 배율, 뷰포트) Window 10 Pro 운영체제, 뷰포트 1536x703, 디스플레이 해상도 1920x1080, 배율 125%야. 타겟 사용자의 디스플레이를 MacBook Pro로 결정해서 피그마에서 1280x832크기의 프레임에 디자인을 해야 한다면, 어떤 식으로 디자인 해야 하고 이를 어떤 식으로 해석하여 내 디스플레이에서 개발을 진행해야 해? ChatGPT MacBook Pro 사용자를 타겟으로 1280x832 크기의 프레임에 디자인을 진행할 때, 그리고 Windows 10 Pro 환경에서 개발하는 경우 다음과 같은 과정을 통해 작업을 진행하는 것이 좋습니다. 1. 디자인을 Figma에서 1배수로 진행 Figma에서는 1280x832 크기의 프레임을 사용하여 MacBook Pro 타겟으로 1배수 디자인을 진행합니.. [WEB] 디스플레이 해상도 디스플레이 해상도가 높을 수록브라우저는 더 많은 내용을 한 번에 보여줄 수 있다. ## 개발 진행할 때 고려할 점 ✅ 다양한 해상도에 지원되어야 한다: 사용자마다 해상도와 배율 설정이 다를 수 있다.EX) 고해상도 유저(2560x1440, 4K 해상도), 노트북 사용자(1366x768, 낮은 해상도) ✅ 반응형 웹 디자인 필요하다.: 다양한 화면 크기(모바일, 태블릿, 데스크톱)와 해상도에서 사용자에게 최적의 경험을 제공해야 한다. 화면 크기에 맞게 UI가 자동으로 조정되도록 해야 한다. 🤔🤔🤔그렇다면 적응형 웹 디자인은 안 쓰이는가???: 아주 가끔 쓰인다. 로딩 속도 빠름, 특정 해상도에서 최적화된 정밀한 제어 가능.But, 320px, 768px, 1024px에 대한 고정 레이아웃을 개발해둔 .. [WEB] 적응형/반응형, 모바일웹/웹앱 - 적응형PC용과 모바일용 따로 구분지어 웹사이트를 만듦. ❌❌❌EX) 네이버 www.naver.com, m.naver.com m.이 있다고 무조건 모바일 웹ㅇ - 반응형동일한 소스코드를 사용하여 웹사이트를 만듦. 😎😎😎반응형에 적합한지도 고려해봐야 함!!! 반응형 웹도 단점이 존재한다.1. 하나의 화면에 많은 정보를 담아야 할 때 적합하지 않음.2. 작은 규모의 사이트를 만들 때 더 효율적임.3. 반응형으로 다루기 쉬운 레이아웃이어야 함. https://yozm.wishket.com/magazine/detail/8/ 모바일 웹과 반응형 웹 비교 | 요즘IT모바일 웹과 반응형 웹, 대충은 알겠는데 어떤 방법이 더 효율적일지 잘 모르시겠다구요? 위시켓에서 모바일 웹과 반응형 웹을 전격 비교해봤습니.. [WEB] Node.js란?: JavaScript 엔진으로 빌드된, JavaScript가 동작하는 환경. Node.js와 함께 NPM(Node Package Manager)도 함께 설치된다. 브라우저: HTML, CSS, JavaScript만 동작함.=> 개발 효율을 늘리기 위한 모듈을 사용함. But, 브라우저는 모듈을 인식하지 못함. 따라서 Node.js 환경에서 모듈을 작동시켜 HTML, CSS, JavaScript로 변환시킴. Node.js → HTML, CSS, JavaScript → Web 웹사이트: 정적인 페이지 (위키피디아)웹 애플리케이션: 사용자가 능동적으로 이용하는 서비스 (거의 모든 최근 서비스) 웹서버: 단순히 요청에 응답을 함.웹애플리케이션서버: 동적인 로직을 처리함. [WEB] React + Spring Boot ✅ 아하! 모먼트node.js 는 리액트에서 자바스크립트를 사용하기 위해 사용하는 것이다.정적 데이터 HTML 파일 렌더링은 브라우저이다. ✅ Spring 개발 방법SSR1. 정적 컨텐츠2. MVC와 템플릿 엔진CSR3. API ✅브라우저 - Chrome웹서버 - 정적인 데이터(HTML 파일) 처리 : React웹애플리케이션 - 동적인 데이터(DB에서 가져옴) 처리 : Spring BootDB - Oracle, MySQL ✅ Nginx( 웹서버의 한 종류 )리버스 프록시: 라우팅을 통해 웹서버, WAS, DB 전부 다 하나의 서버로 사용가능하다. 비용 절약 가능. 전기세 느낌(시간당). 트래픽 많다고 비용 하나의 서버에서 사용할 수 있음.https://narup.tistory.com/238 [Nginx].. 이전 1 2 다음
