Codepen 활용법 : 블로그에 임베드 하는 법 등

웹 개발을 하다 보면 빠르게 아이디어를 실현하거나, 새로운 기술을 실험하거나, 동료와 코드를 공유해야 할 때가 많습니다. 이럴 때 Codepen은 개발자와 디자이너 모두에게 유용한 도구가 입니다. Codepen이란 무엇인가?Codepen은 HTML, CSS, JavaScript 코드를 브라우저에서 바로 작성하고, 실시간으로 결과를 확인할 수 있는 온라인 코드 에디터이자 커뮤니티입니다. 별도의 설치나 복잡한 환경 설정 없이, 웹 브라우저만 있으면 누구나 즉시 코딩을 시작할 수 있습니다. 또한, 수많은 개발자들이 만든 코드 예제를 탐색하고, 자신의 프로젝트를 공유하거나 피드백을 받을 수 있는 소셜 플랫폼의 역할도 합니다.https://codepen.io/ CodePenAn online code editor,..

• topic 카테고리 없음
• · 2025. 4. 15.
• textsms

신입 UX 디자이너 포트폴리오는 어떻게 만들어야 할까

UX 디자이너로서 성공적인 취업을 위해 포트폴리오는 필수적인 도구입니다. 하지만 단순히 작업물을 나열하는 것으로는 충분하지 않습니다. 채용 담당자들은 지원자의 문제 해결 능력, 사고 과정, 그리고 UX 디자인 철학을 보고 싶어 합니다. 그렇다면 UX 포트폴리오를 만들 때 가장 중요한 요소는 무엇일까요? 1. 문제 해결 중심의 스토리텔링UX 포트폴리오에서 가장 중요한 것은 [문제 해결 능력]과 이를 보여주는 [프로세스]입니다. 단순히 결과물을 보여주는 것이 아니라, 문제를 어떻게 정의하고 해결했는지 과정을 명확히 전달해야 합니다. 각 프로젝트는 다음과 같은 구조를 따라야 합니다.문제 정의: 해결하고자 했던 문제와 그 배경을 설명합니다.해결 과정: 사용자 조사, 아이디어 구상, 프로토타이핑, 사용성 테스트 ..

• topic 업무 Tip
• · 2025. 4. 15.
• textsms

초보 디자이너 사전 : CTA(Call To Aaction)과 비슷한 UX 디자인의 요소들

CTA(Call To Action)와 비슷한 UX 디자인 요소들은 사용자 행동을 유도하거나 특정 작업을 수행하도록 돕는 역할을 합니다. 그러나 CTA는 주로 특정 행동을 명확히 지시하는 버튼이나 링크로 정의되며, 다른 UX 요소들은 더 광범위하거나 간접적인 방식으로 사용자 경험을 개선합니다. 주요 차이점은 다음과 같습니다. CTA와 비슷한 UX 디자인 요소 목록1. 액션 버튼(Action Button)액션 버튼은 특정 행동을 유도하는 인터페이스 요소로, CTA와 유사합니다. 그러나 모든 액션 버튼이 CTA로 사용되는 것은 아닙니다. 액션 버튼은 일반적인 작업(예: 저장, 삭제 등)을 수행할 때도 사용됩니다. 2. UX 라이팅(UX Writing)UX 라이팅은 인터페이스 전반에 걸쳐 사용되는 텍스트로, 사..

• topic UX 디자인
• · 2025. 4. 14.
• textsms

이 폰트 무슨 폰트일까? 궁금할 때 찾아보는 방법 4가지

웹사이트를 둘러보다 보면 종종 시선을 사로잡는, 감각적이고 세련된 폰트를 만나는 순간이 있습니다. 특히 디자인에 관심이 있거나 직접 글을 쓰는 사람이라면, 이런 멋진 폰트를 발견했을 때 꼭 이름을 알아내고 싶을 때가 있습니다.그래서 이 글에서는 웹페이지나 이미지 속에 사용된 폰트가 어떤 것인지 알아보는 방법들을 소개하려고 합니다. 어렵고 복잡할 것 같지만, 사실은 생각보다 간단하게 확인할 수 있는 방법들이 있습니다. 폰트를 찾아낼 수 있는 유용한 도구들을 지금부터 함께 알아보겠습니다. 1. 웹폰트로 사용된 경우쉽게 말해 화면에 사용된 폰트가 마우스 드래그로 긁어진다면, 웹폰트를 사용했다고 볼 수 있습니다. 이 경우 브라우저의 '개발자도구'를 활용하면 폰트의 이름을 알아낼 수 있습니다. 텍스트에 블록지정..

• topic 폰트
• · 2025. 4. 14.
• textsms

SVG 파일을 HTML 내에 삽입하는 방법 5가지

SVG(Scalable Vector Graphics)는 웹 페이지에서 벡터 이미지를 표현할 수 있습니다. HTML 문서에 SVG를 삽입하는 방법은 다양하며, 각 방법은 상황마다 적합한 방식이 있습니다. 아래에서는 SVG를 HTML에 삽입하는 여러 가지 방법과 그 장단점을 설명하겠습니다.1. 인라인 SVG인라인 SVG는 SVG 코드를 HTML 문서 안에 직접 삽입하는 방식입니다. 이 방법은 추가 HTTP 요청을 줄이고 CSS 및 JavaScript를 사용해 SVG를 쉽게 스타일링하거나 조작할 수 있다는 장점이 있습니다. 하지만 재사용성이 낮아 사용빈도가 적습니다. 장점:CSS와 JavaScript로 스타일링 및 애니메이션 가능HTTP 요청 감소로 로딩 시간 단축단점:HTML 파일 크기 증가재사용성이 ..

• topic HTML&CSS
• · 2025. 4. 14.
• textsms

무료 SVG 아이콘 사이트 추천

웹 디자인이나 앱 개발을 하다 보면 깔끔하고 직관적인 아이콘이 필요할 때가 많습니다. SVG(Scalable Vector Graphics)는 확장 가능한 벡터 그래픽을 표현하기 위한 XML 기반 파일 형식입니다. 벡터 방식으로 이미지를 저장하므로 확대하거나 축소해도 품질이 유지되며, 웹 환경에서 2D 그래픽을 표현하는 데 널리 사용됩니다. 이번 글에서는 무료로 SVG 아이콘을 제공하는 사이트들을 소개하겠습니다.1. Flaticonhttps://www.flaticon.com Free Icons and Stickers - Millions of resources to downloadDownload Free Icons and Stickers for your projects. Resources made by an..

• topic Tool&작업환경
• · 2025. 4. 11.
• textsms