찐망고'S 퍼블리싱그리고디자인

안녕하세요 찐망고입니다. 이전 포스팅에서 MinSans와 Pretendard 서체 비교를 다룬 이후, 가변 폰트(Variable Font)에 대한 질문이 많아서이번에는 가변 폰트의 개념과 Pretendard 가변 폰트 다운로드 및 적용 방법을 정리해보겠습니다. 1. 가변 폰트(Variable Font)란?◈ 기존 폰트와 가변 폰트의 차이점가변 폰트는 한개의 폰트 파일로 여러가지 스타일(굵기, 너비, 기울기 등)을 조절할 수 있는 폰트 포맷입니다.기존의 정적인 폰트와 달리, 가변폰트는 CSS속성만으로 다양한 스타일을 자유롭게 적용할 수 있죠→ 여러개의 폰트파일대신, 하나의 가변폰트파일로 다양한 스타일을 구현할 수 있는 기술!비교 항목기존 폰트(Static Font)가변 폰트(Variable Font)파일..

안녕하세요 찐망고입니다.이번에도 새로운 폰트를 사용한 웹사이트를 발견했어요.바로 인크루트웍스 웹사이트인데요. AI로 검증하는 채용솔루션, 인크루트웍스인크루트웍스 채용솔루션으로 더 똑똑하고 빠르게 채용하세요! 기업채용에 최적화된 지원자관리,평가관리,면접관리,인재검증 등 다양한 솔루션을 제공합니다.works.incruit.com 보자마자 프리텐다드 폰트가 생각났어요,실제로 비교해 보니 조금 차이가 나지만요 어때요 구별이 되나요? ㅎㅎ영상으로 보여드릴게요프리텐다드와 민산스폰트변화 확인 민산스폰트는 좀 더 부드럽고 둥근 느낌이고프리텐다드는 좀 더 각지고 정돈된 스타일이다.민산스폰트가 글자 폭이 상대적으로 넓고프리텐다드폰트가 살짝 좁음 민산스는 노토산스폰트를 기본으로 커스텀한 폰트인데실제로 보면 프리텐다드와 더 ..

안녕하세요 찐망고입니다.간만에 swiper관련 포스팅을.. 이번반 학생이 클론 하는 사이트인데요.이 사이트에서 세로형태로 슬라이딩되는 섹션을 swiper를 이용해 구현했습니다.이를 통해 배경이 부드럽게 전환되며, 동시에 탭 버튼이 해당 배경과 연동되도록 만들었죠사용자는 텍스트 버튼을 클릭해 직접 원하는 슬라이드로 이동할 수 있습니다.   지금은 충전중 │ 현대자동차모두의 삶이 한층 더 편해지는 현대자동차 ACR을 통해 여행의 행복을 선물합니다. 현대자동차와 자유로운 제주로 지금 바로 떠나보세요.acrtrip.com 아래 캡처된 이미지는 Swiper를 활용해 세로방향으로 슬라이드 되는 섹션을 구현한 모습이구요텍스트버튼(탭)은 Swiper와 연동되어 해당 슬라이드에 맞는 텍스트가 강조됩니다.선택된 버튼은 배..

안녕하세요 찐망고입니다. 웹사이트에서 많이 사용하는 폰트들이 있죠?예전에는 Noto Sans KR폰트가 압도적으로 많이 사용 되었지만최근에는 Pretendard폰트로 넘어가는 추세더라구요 그리고 요즘 검색량이 급상승하는 폰트가 하나 더 있는데요!바로 SUIT폰트입니다. 저는 최근 대시보드 디자인 및 퍼블리싱 외주 작업을 진행하면서SUIT폰트를 적용해봤는데, 가독성이 너무 좋았어요.아직 작업중이라 공개할 순 없으니 실제로 SUIT폰트를 사용한 최근 웹사이트 디자인을 찾아볼까요?GDWEB에서 최근 디자인사례를 검색해 봤어요  💡 검색한 사이트 업로드 게시날짜: 2024년 11월 ~ 현재 💡 총 검색한 사이트 수: 120개 💡 그 중 SUIT 폰트를 사용한 사이트: 4개 (3.33%)  일년전만해도 12..

안녕하세요 찐망고입니다. 결국 제가 구글머터리얼 심볼(Material Symbols)에 대해서  또 포스팅을 하게 되었네요.솔직히 Customize 기능이 넘 사라 좀 쓸만하죠? 이전 발행글이 하나 있는데 css로 적용했던 방법을 포스팅 하였습니다. 새로운 구글 머티리얼 심볼 활용법: 웹아이콘의 모든 것안녕하세요 찐망고입니다. 이전에 xeicon관련 포스팅을 했었는데요.드디어 다음 포스팅을.. 2021.07.23 - [WEB/CSS] - 웹에서 사용가능한 웹아이콘 적용방법 - XEIcon 웹에서 사용가능한 웹아이콘 적용uiweb.tistory.com  이번 포스팅은 수업 중 클론 코딩을 하다가 저 펭귄그림 있는 부분에 아이콘들을구글 아이콘을 html요소로 적용해보자로 시작해서포스팅으로 마무리를 해봅니다 ..

안녕하세요 찐망고입니다.스레드를 시작하다 보니 포스팅을 안 하게 되는 것도 있고..ai로 지정된 댓글들도 보기 싫고ai로만 이루어진 글이 판을 치면서 내용도 없는 글들의 애포가 날로 성장하는 게 배가 아프고(아 이건 아닌가)거두절미하고 오늘은 CSS의 filter속성에 대해서 포스팅해 봅니다 filter속성은 이미지, 텍스트, 요소 전체에 다양한 그래픽 효과를 적용하는 CSS속성인데요. 기본적으로는 이렇게 씁니다..element { filter: 효과이름(값);} 여러 개의 필터를 사용할 땐 공백으로 구분하여 연속 적용이 가능합니다..element { filter: blur(5px) brightness(0.8) contrast(1.2);}  주요 fiter효과에 대해서 알아볼까요1) blur(..

안녕하세요 찐망고입니다 2025년을 대비해 프론트엔드 개발에서 새롭게 등장한 HTML과 CSS의 기능들을 소개하고, 이런 기능들이 얼마나 개발을 쉽게 만들어주는지 알려주려는 글이 있어 포스팅(번역) 해봅니다. New Front-End Features For Designers In 2025 — Smashing MagazineSearching for the most flexible front-end workflows and toolkits, it’s easy to forget how powerful some of the fundamentals on the web have become these days. This post is a journey through new front-end features and..

영화 취화선을 기억하는 사람이 있을까?2002년에 개봉한 영화이 영화도 명작이지만, 영화만큼 화자가 되었던 것이 있다. 바로 취화선 웹사이트다. 얼마전 간만에 눈이 즐거운 전시를 보고왔다.개인적으로 전시를 좋아하지만 명화를 미디어로 구현한 전시는 선호하지 않는편이다.그러나 이번 전시는 여러모로 아주 흡족했다  간송미술관이 주최하고 DDP 뮤지엄 전시관 2에서 진행하는 이 미디어 전시는,각 컬렉션마다 공간을 독창적으로 구성해 몰입감을 극대화했다.영상의 퀄리티가 훌륭해 지루할 틈이 없었다. 전시의 마지막은 추사체의 주인공 김정희의 작품 세계였다.먹과 한지의 향기가 가득한 흑백의 공간.춤추는 먹의 농담(濃淡)과 화선지 위를 달리는 강렬한 글씨.검은 먹으로 물든 바탕과, 그 위에 떠오르는 흰 글씨는 대비의 미학..

안녕하세요 찐망고입니다.이전에 SEO(검색엔진최적화)작업에 대한 포스팅을 했는데요. SEO(검색 엔진 최적화)작업안녕하세요 찐망고입니다. 마케팅에서 SEO(검색 엔진 최적화)가 필수라고들 하죠?그런데 정작 "SEO를 어떻게 작업하고, 실제로 무슨 일이 벌어지는지" 궁금한 분들이 있을거라 생각합니다. 오늘은uiweb.tistory.com 그렇다면 현재 마크업하는 입장에서 우리는 멀 체크하며 작업을 해야할 지 알아봐야겠죠? 물론 그동안 계속 포스팅을 하긴 했지만 정리차원에서1. HTML 마크업에서 체크해야 할 요소  1. 시맨틱 태그 사용콘텐츠 구조를 명확히 하고 검색 엔진이 쉽게 이해할 수 있도록 합니다.예: , , , , 등의 시맨틱 태그 사용. SEO란 무엇인가? 검색 엔진 최적화는...    2..

안녕하세요 찐망고입니다. 마케팅에서 SEO(검색 엔진 최적화)가 필수라고들 하죠?그런데 정작 "SEO를 어떻게 작업하고, 실제로 무슨 일이 벌어지는지" 궁금한 분들이 있을거라 생각합니다. 오늘은 실무에서 SEO가 어떻게 진행되는지 알기 쉽게 정리해 드릴게요.  1. SEO 작업은 이렇게 시작됩니다 SEO의 시작은 분석과 계획이에요. 마치 집을 지으려면 설계도가 필요한 것처럼, SEO도 준비가 중요하죠. 아래 작업들을 먼저 진행합니다. 키워드 조사사람들이 검색할 때 어떤 단어를 사용하는지 찾는 작업이에요. 예를 들어, "맛집 추천" 대신 "홍대 맛집 추천"처럼 구체적인 키워드를 찾습니다.사용 툴: 네이버 키워드 도구, Google 키워드 플래너(구글광고계정무료), Ahrefs, SEMrush (키워드 및..