본문 바로가기

전체 글59

스켈레톤 UI란? | 스켈레톤 UI의 정의와 중요성 사용시 주의사항 요즘 웹이나 앱에서 자주 보이는 디자인 요소 중 하나가 바로 "스켈레톤 UI"입니다. 특히 로딩 중인 화면에서 콘텐츠가 비어 있는 대신 회색의 박스나 줄무늬 애니메이션이 반복되는 형태로 나타나는 UI를 본 적 있으신가요? 이처럼 사용자에게 실제 콘텐츠가 준비되고 있다는 신호를 시각적으로 전달해주는 방식이 바로 스켈레톤 UI입니다.스켈레톤 UI란 무엇인가요?스켈레톤(Skeleton) UI는 콘텐츠가 완전히 로딩되지 않았을 때 임시로 보여주는 뼈대 형태의 사용자 인터페이스입니다. 기존에는 로딩 스피너(로딩 중임을 알려주는 원형 회전 아이콘)를 주로 사용했지만, 이는 사용자에게 단순히 기다리라는 의미만 전달할 뿐 어떤 콘텐츠가 나올지 예측하기 어렵다는 단점이 있었습니다. 반면 스켈레톤 UI는 콘텐츠의 구조를 .. 2025. 6. 9.

PMP 자격증 취득을 위한 시험 경력 입력과 승인 완벽 가이드 PMP 시험을 준비하시는 분들이라면 누구나 경력 증명의 까다로움을 경험하게 됩니다. 저 역시 PMP 자격증을 취득하면서 가장 신경 쓴 부분이 바로 이 경력 입력과 승인 과정이었습니다. PMI(Project Management Institute)에서는 단순히 시험만 잘 보면 되는 것이 아니라, 실제 프로젝트 관리 경험을 철저히 검증합니다. 특히 최근 들어 PMI의 경력 심사가 더욱 엄격해지고 있어, 정확한 입력 방법을 알고 있어야 불필요한 시간 낭비와 재심사를 피할 수 있습니다. 오늘은 실제 화면을 통해 단계별로 어떻게 경력을 입력하고 승인받을 수 있는지 상세하게 안내드리겠습니다. 경력 입력 단계별 가이드 Step 1: 학력 정보 입력 (Academic Education)제일 먼저 학력에 대한 정보를 입력.. 2025. 6. 7.

Figma Buzz 피그마 버즈 기능 사용 후기: 템플릿 제작과 등록, 활용방법 A to Z 피그마 버즈(Figma Buzz)는 피그마에서 제공하는 AI 기반 디자인 어시스턴트 기능입니다. 최근 디자인 툴에 AI가 접목되면서 작업 효율성이 크게 향상되고 있는데, 과연 피그마의 AI 기능은 얼마나 실용적일까 궁금했습니다.특히 템플릿 제작부터 팀 내 공유까지의 전체 워크플로우를 직접 경험해보고 싶어서 이번 실험을 시작하게 되었습니다. 디자인 업무에서 반복되는 작업을 줄이고, 팀원들과 효율적으로 협업할 수 있는 방법을 찾고 계신 분들께 도움이 되길 바라며 상세한 후기를 공유드립니다.1단계: 피그마 버즈 기능 접근하기피그마 버즈 기능은 피그마 인터페이스 우측 상단의 패널에서 접근할 수 있습니다. Create버튼을 눌러서, Buzz를 선택해주세요2단계: 실제 작업물 제작 및 템플릿으로 등록하기저는 우선 .. 2025. 6. 4.

2025년 피그마 신기능 총정리: 디자인에서 마케팅까지 원스톱 플랫폼의 등장 한국 시장을 주목하는 피그마의 본격적인 움직임2025년 5월 디자인 업계에 중요한 소식이 전해졌습니다. 글로벌 디자인 플랫폼 피그마(Figma)가 한국어 지원 베타 업데이트를 기념해 서울에서 기자 간담회와 메이커 콜렉티브 행사를 개최한 것입니다. 특히 CPO(Chief Product Officer) 유키 야마시타가 직접 방한하여 피그마의 새로운 비전을 소개했다는 점에서 한국 시장에 대한 피그마의 진지한 관심을 엿볼 수 있었습니다.피그마가 공개한 한국 시장 데이터는 상당히 인상적입니다. 한국에서만 하루 평균 7만 5천 개 이상의 디자인 파일이 생성되고 있으며, 현재까지 총 400만 개 이상의 디자인 파일이 만들어졌다고 합니다. 이는 한국 디자이너들의 활발한 활동을 보여주는 동시에, 디지털 디자인 시장의 급.. 2025. 6. 3.

티스토리 구글 애드센스 납세자 거주지 증명서 서류 발급 및 인증방법 🏠 홈택스 거주자증명서 발급 완벽 가이드 (구글 애드센스용)안녕하세요! 블로그로 애드센스 수익을 내고 계신 분들이라면 한 번쯤은 들어보셨을 거주자증명서! 세금 관련해서 구글에 제출해야 하는 서류인데, 처음 발급받을 때는 정말 막막하더라고요. 😅오늘은 홈택스에서 거주자증명서를 발급받는 과정을 처음부터 끝까지 상세하게 알려드릴게요. 저도 처음에 헤맸던 부분들까지 모두 포함해서 정리했으니, 이 글만 따라하시면 문제없이 발급받으실 수 있을 거예요!💡 거주자증명서가 뭐죠?간단히 말하면 **"나는 한국에 거주하는 한국인입니다"**를 증명하는 공식 서류예요. 구글 애드센스에서 세금을 정확히 계산하기 위해 필요한 서류이고, 이게 있어야 한미조세협정에 따른 세율 혜택을 받을 수 있답니다.📋 준비사항- 인터넷 가능.. 2025. 6. 2.

What is a User Journey? An In-Depth Guide for UX Designers (Including the Reference for Figma Journey Map Templates) User Journey MapIntroductionIn a world overflowing with digital services, capturing the hearts of users is no easy task. Why do some apps get deleted right after installation, while others become part of our daily routine? The answer lies in the "User Journey." A user journey is more than just an analysis tool — it's a powerful method for uncovering real user needs and driving service innovation.. 2025. 6. 1.

사용자 경험 여정이란 무엇인가: UX 디자이너를 위한 심층 해설 (사용자 경험 여정의 중요성, 구성요소, Template link 포함) 들어가며디지털 서비스가 넘쳐나는 시대, 사용자의 마음을 사로잡는 것은 결코 쉬운 일이 아닙니다. 왜 어떤 앱은 설치 후 바로 삭제되고, 어떤 서비스는 매일 찾게 될까요? 그 답은 바로 '사용자 경험 여정(User Journey)'에 있습니다. 사용자 경험 여정은 단순한 분석 도구를 넘어, 사용자의 진짜 니즈를 발견하고 서비스를 혁신하는 강력한 무기입니다. 오늘은 UX 디자이너와 서비스 기획자라면 반드시 알아야 할 사용자 경험 여정에 대해 자세히 알아보겠습니다.사용자 경험 여정(User Journey)이란?사용자 경험 여정은 사용자가 특정 목표를 달성하기 위해 서비스와 상호작용하는 전체 과정을 시간 순서대로 시각화한 지도입니다. 단순히 '클릭-이동-구매'와 같은 표면적인 행동만 추적하는 것이 아니라, 각 .. 2025. 6. 1.

UIUX: App Service Design – How to Create a Flowchart When planning a new app service, the very first steps are usually defining requirements and drafting a functional specification to address them. Once these two steps are complete, the next big task is designing the user flow — and this is where the flowchart comes in. 💡 What Is a Flowchart? A flowchart is a visual document that maps out the series of steps and decisions involved in using a serv.. 2025. 5. 29.

피그마 플러그인 추천 | Design Lint - Style 연결 끊김, 해제 한번에 정리하기 (디자인 라이브러리 연결하기) 실무에서 디자인 파일을 여러 개 작업하다 보면 라이브러리나 스타일 연결이 끊어지는 경우가 자주 발생합니다. 특히 텍스트 스타일이나 컴포넌트가 원본과 분리되어 따로 놀고 있는 상황을 한 번쯤은 겪어보셨을 텐데요. 오늘은 이런 문제를 효율적으로 해결할 수 있는 Design Lint 플러그인 사용법을 공유해드리겠습니다. 연결이 끊긴 요소들, 어떻게 찾을까요?디자인 파일을 여러 개 만들다 보면 라이브러리가 끊겨 있는 경우가 자주 있어요. 저 같은 경우 특히 텍스트 스타일이 자주 끊깁니다. Pretendard 폰트로 통일해서 사용하고 있는데, 어느 순간 보면 연결이 끊어져서 독립적인 스타일로 변해있더라고요.이런 상황에서 하나하나 찾아서 다시 연결하기엔 너무 비효율적이죠. 특히 페이지가 많은 프로젝트에서는 더욱 그.. 2025. 5. 29.

PMBOK 7판 핵심 완전 정복: 프로젝트 관리의 12가지 원칙 심화 분석 현재 저는 pmp 자격증을 준비중인데요. 공부겸 필요한 원칙들에 대해서 작성해보려고 합니다.프로젝트 관리 전문가라면 반드시 알아야 할 PMBOK 7판의 혁신적 변화, 바로 프로젝트 관리의 12가지 원칙입니다. 기존의 프로세스 중심 접근법에서 원칙 기반 관리로 패러다임이 전환되면서, 실무 현장에서의 적용 방식도 크게 달라졌습니다.오늘은 PMP 자격증 취득을 준비하는 분들과 현업에서 프로젝트를 이끄는 PM들을 위해, 각 원칙의 본질적 의미와 실무 적용 노하우, 그리고 놓치기 쉬운 함정들까지 상세히 분석해보겠습니다.🎯 원칙 1: 성실하고 존경할 만하며 배려심 있는 관리자 되기핵심 개념프로젝트 관리자는 단순한 업무 조율자가 아닌, 조직의 가치와 윤리를 구현하는 핵심 역할을 담당합니다. 이는 모든 의사결정과 행.. 2025. 5. 28.

피그마(Figam) 팁 : 플러그인 활용해서 디자인 가이드 (Design Guide) 쉽고 편하게 만들기 - 피그마 유용한 플러그인 추천 디자인 컴포넌트를 만들고 제일 중요하지만 귀찮은 부분이 사실 디자인 가이드를 만드는 부분이라고 생각합니다. 이 작업을 쉽게 해주는 플러그인이 있어서 피그마에서 쉽고 편하게 디자인 가이드를 만들 수 있는 유용한 플러그인을 소개해 드리려고 합니다. 덧붙여서 디자인 가이드 생성 후 컴포넌트 별로 디자인 가이드를 연계하여 관리하는 방법까지 함께 소개해 드리겠습니다.1. UI Stories장점 : 생성된 디자인 가이드를 별도 페이지에 생성할 수 있음단점 : Varient 유형까지만 간단하게 표현 됨[사용방법]1. 디자인 가이드를 제작하고 싶은 컴포넌트를 선택하고 UI Stories 플러그인을 실행합니다. (Generate on new page 선택 : 새 페이지에 디자인 가이드가 생성됨)2. Figma Page.. 2025. 2. 19.

피그마(Figam) 팁 : 플러그인 활용해서 Variables 스타일을 쉽게 스타일 가이드로 만드는 방법 (Variables관련 유용한 플러그인 모음) 피그마로 작업을 하면서 스타일 가이드를 보통 Local Style이나 Variables로 많이 구축합니다. 저는 Token Studio를 대체하는 용으로 Variables을 더 사용합니다. 그래서 이번 포스팅에서는 Variables로 지정된 스타일을 쉽게 스타일 가이드로 제작해 주는 플러그인에 대해서 소개해볼까 합니다. 스타일을 지정한 후 가이드로 만들려면 일일이 매칭되게 기입해야 하고 또 작업하다가 스타일을 추가하거나 변경하면 그걸 다시 변경하고 만들어야 해서 관리가 번거롭습니다. 하지만 유용한 플러그인 하나면 스타일 지정만 하고 가이드는 보다 편리하게 생성할 수 있습니다. 또 변경이 되었을 경우에도 버튼 클릭 하나로 새롭게 추가된 스타일이 자동으로 업데이트되어 생성되기 때문에 저는 플러그인을 활용합니.. 2024. 10. 31.

이전 1 2 3 4 5 다음

티스토리툴바