roqkf

✨ Intro 네이버나 구글 같은 검색 엔진을 이용하면서 원하는 결과를 바로 찾기 어려웠던 경험과 반대로 원하는 결과는 찾았지만 굳이 마지막 페이지까지 매번 보는 유저는 많이 없을 것이다. 심지어 원하는 결과가 상위에 있다면 검색 페이지의 1 페이지 조차 전부 확인하지 않고 넘어가는 경우가 대부분일 것이다. 우리가 이렇게 열심히 학습해 웹 페이지를 만들어도 유저가 검색했을 때, 검색 결과의 상위에 없거나 뒷 페이지로 밀려나게 된다면 아무도 찾지 않는 웹 페이지가 된다. 이러한 사태를 방지하기 위해서 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화 해 주는 작업 SEO가 필요하다. ❤️‍🔥 SEO Search Engine Optimization의 약자, 검색 결과에 상위에 노출될 수 있도록 내 콘텐츠를 ..

❤️‍🔥 웹 접근성 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것 ❤️‍🔥 웹 접근성을 갖추면 얻을 수 있는 효과 사용자층 확대 웹 접근성을 확보하면 장애인, 고령자 등 정보 소외 계층도 웹 사이트를 자유롭게 이용할 수 있게 된다. 그만큼 사이트의 이용자를 늘릴 수 있고, 새로운 고객층을 확보할 수 있게 된다. 실제로 웹 접근성 향상을 통해 매출이 증가한 외국 쇼핑몰 사례도 있으며, 국내 온라인 쇼핑몰에서도 노년층의 매출이 증가 추세를 보이고 있다. 다양한 환경 지원 정보 소외 계층이 아니더라도 정보에 접근하기 어려운 상황에 처할 수 있습니다. 운전 중이라 화면을 보기 어렵거나, 마우스를 사용할 수 없는 상황 등이 있다. 웹 접근성을 향상시..

❤️‍🔥 Cross Browsing 웹 사이트에 접근하는 브라우저의 종류에 상관없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업을 의미 핵심 point! 동일한 이 아닌 동등한 표현에 집중하자. 크로스 브라우징은 모든 브라우저 상에서 완전히 똑같은 화면이 보이도록 만드는 것이 아니다. 애초에 브라우저마다 사용하는 렌더링 엔진이 다르기 때문에 화면을 완전히 똑같이 만드는 것은 불가능하다. 따라서 크로스 브라우징의 목표는 모든 브라우저에서 동등한 수준의 정보와 기능을 제공하는 것이다. 😲 우리는 이미 Cross Browsing이 되지 않아 불편함을 겪은 적이 있다! 무언갈 하려고 할 때마다 뜨는 경고창이 뜨는 걸 경험해 본 적이 있을 것이다. 이 문제는 인터넷 익스플로러(Internet Explore..

❤️‍🔥 자주 틀리는 Markup ⚠️ 인라인 요소 안에 블록 요소 넣기 HTML 요소는 표시 방법에 따라 인라인, 블록 요소로 나뉜다. Inline element: 콘텐츠가 차지하는 만큼 ex) `` Block element: 가로로 넓게 화면 영역을 차지 ex) `` Inline 요소는 항상 Block 요소 안에 들어가야 하며, 반대의 경우는 있어서는 안 된다. 보통 특정 요소가 Inline 인지 Block 요소인지 정확하게 알지 못할 때 이런 실수를 한다. // h1, div 요소는 블록 요소이고, // a, span 요소는 인라인 요소입니다. 나쁜 예시 1 나쁜 예시 2 ⚠️ , 요소 사용하기 요소와 요소는 각각 글씨를 굵게 만들 때, 글씨를 기울일 때 사용하는 요소 웹 표준을 준수하기 위해서는 ..

❤️‍🔥 웹 표준 W3C(World Wide Web Consortium)에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법 💖 웹 표준의 장점 유지 보수의 용이성 웹 표준으로 HTML, CSS, JavaScript 등의 사용 방법을 정리하기 이전에는 구조, 표현, 동작이 뒤섞인 코드도 많았다. 그러다보니 어느 한 부분을 수정하려면 전부 뜯어고쳐야 할 때도 있었다. 하지만 각 영역이 분리되면서 유지 보수가 용이해졌고, 코드가 경량화되면서 트래픽 비용이 감소하는 효과도 생겼다. 웹 호환성 확보 웹 사이트가 특정 운영체제나 브라우저에 종속적이라면 그 외 환경에서는 정상적으로 ..

❤️‍🔥 wireframe 선과 틀을 잡는다는 뜻으로, 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기 위한 목적으로 만든다. 와이어프레임을 표현할 때 품질 수준을 전문 용어로 피델리티로 표현해 3가지 레벨로 나뉜다. 1. Low Fidelity Wireframe (Lo-Fi Wireframe) 손으로 빠르게 그린 수준의 와이어프레임 2. Middle Fidelity Wireframe (Mid-Fi Wireframe) Lo-Fi 와이어프레임을 그리면서 아이디어가 어느 정도 구체화되고 확정된 이후 보기 좋게 다듬은 수준의 와이어프레임 3. High Fidelity Wireframe (Hi-Fi Wireframe) 와이어프레임을 완성본에 가깝게 작성한 수준의 와이어프레임 ❤️‍🔥 prototy..