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

안녕하세요 찐망고입니다 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 (키워드 및..

안녕하세요 찐망고입니다.git은 분산 버전 관리시스템(Distributed Version Control System)인데요.소스코드의 변경사항을 기록하고, 여러 개발자가 협업하며 변경사항을 추적할 수 있도록 도와줍니다. GitHub는 Git을 기반으로 하는 클라우드 기반 협엽 플랫폼입니다.Git을 사용하여 관리되는 프로젝트를 호스팅하고, 팀원들과 협업을 쉽게 할 수 있도록 도와줍니다. GitHub와 Git의 차이점항목GitGitHub목적버전 관리Git 저장소를 호스팅하고 협업 지원형태로컬 소프트웨어클라우드 기반 웹 서비스인터페이스주로 명령줄 웹/GUI제공접근 방식로컬 컴퓨터에서 실행인터넷을 통해 원격 접근기능브랜치, 병합, 커밋 등 Git자체 기능PR, Issue, Actions등 협업 및 호스팅 기능 ..

안녕하세요 찐망고입니다.디자이너를 위한 접근성연구가이드 관련 글입니다.아주 이전글이지만 너무 기본적인 글이라 공유합니다. 디자이너를 위한 접근성 연구 가이드모든 사용자와 능력 수준을 고려한 디자인을 돕는 연구 전략By Susanna Zaraysky 이미 여러분은 접근성이 고려된 인터페이스, 공공 공간, 건축물을 사용하고 있을 가능성이 높습니다. 왜냐하면 장애인을 위한 설계는 모든 사람의 경험을 개선하기 때문입니다. 예를 들어, 길모퉁이에서 볼 수 있는 낮아진 연석을 생각해보세요. 이 경사진 표면은 휠체어를 사용하는 사람이 보도에서 도로로 안전하게 이동하도록 돕지만, 유모차를 밀거나 여행 가방을 끄는 사람에게도 유용합니다. 더 많은 사람이 제품을 더 잘 사용할 수 있도록 하려면, 시각, 청각, 손 사..

안녕하세요 찐망고입니다.오늘은 구글 머터리얼 디자인 Implementing accessibility부분에 대해 포스팅을 시작합니다. Implementing accessibility 접근성 구현표준 플랫폼 컨트롤과 시맨틱 HTML(웹에서)을 사용하면, 앱은 플랫폼의 보조 기술과 잘 작동하는 데 필요한 마크업과 코드를 자동으로 포함하게 됩니다. 각 플랫폼의 접근성 표준을 충족하고, 그 보조 기술(단축키 및 구조 포함)을 지원하면 사용자에게 효율적인 경험을 제공합니다.  Do. 표준 플랫폼 대화 상자와 같은 기본 요소를 사용하세요.Caution. 비표준 요소(예: 비표준 플랫폼 대화 상자)를 사용하여 표준 대화 상자 작업을 수행하는 데 주의하세요. 이러한 경우 보조 기술과 잘 작동하려면 추가적인 테스트가 필요..

안녕하세요 찐망고입니다.오늘은 구글 머터리얼 디자인 Sound and motion부분에 대해 포스팅 해볼까요 Sound and motion Sound사용자가 UI 요소에 설명 레이블을 추가하면, 소리를 사용하여 앱을 탐색할 수 있습니다. 스크린 리더(TalkBack과 같은)를 사용하고 터치 탐색을 통해 탐색할 때, 사용자가 화면의 UI 요소를 터치하면 레이블이 음성으로 읽어집니다. 스크린 리더 사용이 어려울 수 있는 상황:스크린 리더 위로 소리가 재생될 때 (예: 자동 재생되는 배경 음악. 사용자가 이 소리를 일시정지하거나 중지할 수 있는 컨트롤을 제공해야 함).기본 요소에 추가 소리가 삽입될 때 (스크린 리더는 기본 요소를 정확하게 해석할 수 있어야 함).소리에 대한 대안 (Alternatives to..

안녕하세요 찐망고입니다.오늘은 구글 머터리얼 디자인 Imagery부분에 대해 포스팅 해볼까요 Imagery Material DesignBuild beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.m3.material.io  이미지의 종류이미지에 접근성 지침을 적용하려면, 이미지의 종류에 따라 기준이 다르기 때문에 이를 이해하는 것이 중요합니다. 1. 장식용 이미지장식용 이미지는 페이지 내용에 중요한 정보를 추가하지 않는 이미지입니다.W3C 기준에 따르면, 장식용 이미지는 다음과..

안녕하세요 찐망고입니다.머터리얼 디자인에서 접근성 텍스트 관련 포스팅 입니다. Writing   접근성 텍스트란?접근성 텍스트는 Google의 TalkBack(안드로이드), Apple의 VoiceOver(iOS), **Freedom Scientific의 JAWS(데스크톱)**과 같은 스크린 리더 접근성 소프트웨어에서 사용됩니다.스크린 리더는 **화면에 표시된 텍스트와 UI 요소(버튼 등)**을 읽어주며, 보이는 텍스트와 **보이지 않는 대체 텍스트(Alternative Text)**도 읽어줍니다.    보이는 텍스트와 보이지 않는 텍스트보이는 텍스트: UI 요소의 레이블, 버튼의 텍스트, 링크, 양식 등에 표시되는 텍스트.보이지 않는 텍스트: 이미지에 대한 대체 텍스트처럼 화면에 표시되지 않는 설명 경우..