기획하는 디자이너

처음 비즈니스를 시작했다면 이메일 서명부터 준비해야 하는 이유

기획하는디자이너 — Fri, 22 May 2026 18:04:32 +0900

이메일 하단의 서명이 중요한 이유

이메일 하단의 작은 서명이 생각보다 중요한 이유

처음 비즈니스를 시작하면 생각보다 작은 부분에서 고민이 생깁니다.

사업자등록을 하고
브랜드 이름을 정하고
인스타그램 계정을 만들고
홈페이지나 스마트스토어를 준비하다 보면 어느 순간 거래처나 고객에게 메일을 보내야 하는 상황이 생깁니다.

그때 문득 이런 생각이 들 수 있습니다.

메일 끝에는 내 이름만 적어도 될까
회사명은 어떻게 넣어야 할까
대표라고 적어도 괜찮을까
연락처와 링크는 어디까지 넣어야 할까
아직 로고가 없는데 이메일 서명을 만들어도 될까

이메일 하단에 들어가는 서명은 아주 작은 영역이지만 비즈니스에서는 생각보다 중요한 역할을 합니다.

메일을 받은 사람이 보낸 사람을 바로 확인할 수 있고 필요한 연락처와 브랜드 정보를 자연스럽게 확인할 수 있기 때문입니다.

이메일 서명은 작은 디지털 명함입니다

이메일 서명은 정보만 전달하는 것에 목적이 있지 않습니다.
오프라인에서 명함을 건네듯이 온라인에서는 이메일 하단의 서명이 나와 내 브랜드를 소개하는 역할을 합니다.

처음 일을 시작한 사람일수록 이메일 서명이 깔끔하게 디자인 되어 있으면 더 정돈된 인상을 줄 수 있습니다.

아직 큰 회사가 아니어도
혼자 운영하는 브랜드 또는 프리랜서로 일을 시작하는 단계에서 신뢰도를 위해 필요한 부분이기도 합니다.
중요한 것은 상대방이 나를 신뢰할 수 있도록 기본 정보를 보기 좋게 정리하는 것입니다.

이메일 서명에 넣으면 좋은 정보

이름
직함
회사명 또는 브랜드명
전화번호
이메일 주소
홈페이지
인스타그램
블로그
카카오톡 채널
브랜드 로고

모든 정보를 다 넣을 필요는 없지만
내가 어떤 일을 하는 사람인지 상대방이 어디로 연락하면 되는지가 분명하게 보여야 합니다.

이메일 서명에 넣는 정보

처음 사업을 시작한 사람에게 이메일 서명이 필요한 이유

처음 비즈니스를 시작하면 아직 모든 것이 완벽하지 않을 수 있습니다.

로고가 없을 수도 있고 홈페이지가 준비 중일 수도 있습니다.
명함을 아직 만들지 않았을 수도 있고 브랜드 소개서가 없는 경우도 많습니다.

하지만 그렇다고 고객이나 거래처와의 첫인상까지 비어 있을 필요는 없습니다.

이메일 서명은 가장 간단하게 세팅할 수 있는 비즈니스 기본 요소입니다.

메일 하단에 이름과 연락처만 정리되어 있어도 상대방은 훨씬 편하게 정보를 확인할 수 있고
브랜드 링크가 함께 있다면 메일을 받은 사람이 홈페이지나 SNS로 자연스럽게 이동할 수도 있습니다.

작은 차이지만 이런 정돈된 모습이 신뢰감으로 이어집니다.

이 사람은 자신의 일을 체계적으로 하고 있구나
연락할 수 있는 정보가 잘 정리되어 있구나
브랜드를 계속 확인해볼 수 있겠구나

이런 인상을 주는 것이 이메일 서명의 가장 큰 장점입니다.

html로 이메일 서명 코드를 만들어야 하는 이유

HTML 이메일 서명이 좋은 이유

이메일 서명을 만들 때 이미지 하나로 만들어 붙이는 경우도 있습니다.

하지만 이미지로만 서명을 만들면 불편한 점이 있는데요.
메일 환경에 따라 이미지가 보이지 않을 수 있고, 연락처나 링크를 바로 클릭하기도 어렵습니다.
때로는 모바일 화면에서 텍스트가 너무 작거나 이미지의 크기가 어색하게 보일 때도 있습니다.

그래서 비즈니스용 이메일 서명은 HTML 형태로 만드는 것이 좋습니다.

HTML 이메일 서명은 텍스트와 링크를 함께 넣을 수 있습니다.
홈페이지 버튼이나 인스타그램 링크도 클릭할 수 있고 전화번호나 이메일 주소도 더 자연스럽게 정리할 수 있습니다.

또한 Gmail이나 Outlook 같은 메일 서비스에 붙여 넣어 사용할 수 있어 실무에서도 활용하기 좋습니다.

HTML이라는 단어가 어렵게 느껴질 수 있지만 꼭 코드를 직접 작성할 필요는 없습니다.
이름과 연락처를 입력하면 이메일 서명 코드가 만들어지는 도구를 사용하면 훨씬 쉽게 준비할 수 있습니다.

이메일 서명 만들 때 넣으면 좋은 정보

이메일 서명을 만들 때 넣으면 좋은 정보

이메일 서명은 너무 많은 정보를 넣는 것보다 필요한 정보만 정리하는 것이 좋습니다.

이메일 서명의 기본이 되는 구성은 다음과 같습니다.

이름
직함
브랜드명
전화번호
이메일
웹사이트
SNS 링크

여기에 브랜드 로고가 있다면 함께 넣어도 좋습니다.
카카오톡 채널을 운영하고 있다면 상담 링크를 넣을 수도 있습니다.
쇼핑몰을 운영한다면 공식몰 링크를 넣는 것도 좋습니다.

프리랜서라면 포트폴리오 링크를 넣는 것이 좋고
1인 사업자라면 브랜드 소개 페이지나 문의 페이지를 넣어두면 좋습니다.
스마트스토어를 운영한다면 구매 페이지나 공식 채널을 연결해둘 수도 있습니다.

중요한 것은 상대방이 메일을 보고 다음 행동을 쉽게 할 수 있게 만드는 것입니다.

전화할 수 있게 하기
홈페이지를 볼 수 있게 하기
상담 채널로 이동할 수 있게 하기
브랜드를 더 확인할 수 있게 하기

이메일 서명 htlm 코드 작성기 TAGLINE

Gmail과 Outlook, 네이버에서도 사용할 수 있을까

이메일 서명은 Gmail이나 Outlook, NAVER 등 모든 이메일 플랫폼에서 사용할 수 있습니다.

Gmail에서는 설정 메뉴에서 서명 영역을 찾은 뒤 만들어둔 서명을 붙여 넣으면 됩니다.
Outlook에서도 메일 설정에서 서명을 추가할 수 있습니다.

다만 HTML 서명은 메일 서비스마다 보이는 방식이 조금씩 다를 수 있습니다.
그래서 너무 복잡한 디자인보다 안정적으로 보이는 단순한 구성이 좋습니다.

이미지를 많이 넣기보다 텍스트 중심으로 구성하고
링크는 필요한 것만 넣고, 모바일에서도 읽기 쉬운 크기로 만드는 것이 좋습니다.

처음 만드는 이메일 서명이라면 화려한 디자인보다 깔끔한 정보 정리에 집중하는 것이 가장 안전합니다.

1인 사업자와 프리랜서에게 특히 유용합니다

이메일 서명은 큰 회사만 사용하는 것이 아닙니다.

오히려 혼자 일하는 사람에게 더 유용할 수 있습니다.

1인 사업자는 대표이자 실무자이자 고객 응대 담당자입니다.
프리랜서는 자신의 이름이 곧 브랜드가 되는 경우가 많습니다.
초기 창업자는 아직 브랜드 인지도가 부족하기 때문에 작은 접점에서도 신뢰를 만들어야 합니다.

이때 이메일 서명은 부담 없이 시작할 수 있는 브랜딩 도구가 됩니다.

명함을 새로 인쇄하기 전에도 사용할 수 있고
홈페이지를 완성하기 전에도 사용할 수 있고
브랜드 소개서를 만들기 전에도 바로 적용할 수 있습니다.

메일을 보낼 때마다 자연스럽게 내 이름과 브랜드가 함께 전달되기 때문에 꾸준히 노출되는 효과도 있습니다.

이메일 서명은 첫 비즈니스 정리의 시작

처음 비즈니스를 시작할 때 모든 것을 한 번에 완벽하게 준비하기는 어렵습니다.

하지만 작은 것부터 차근차근 정리할 수는 있습니다.
그 시작점으로 이메일 서명은 좋은 선택입니다.

내 이름을 어떻게 보여줄지
내 역할을 어떻게 소개할지
고객이 어디로 연락하면 좋을지
브랜드를 어디에서 확인할 수 있을지

이런 기본 정보를 정리하다 보면 자연스럽게 내 비즈니스의 모습도 조금 더 선명해집니다.

이메일 서명은 작지만 자주 보이는 영역이고,
이메일을 발송하면 하루에도 여러 번 보내는 메일 끝에 붙는 작은 소개입니다.
그래서 더 정돈되어 있어야 하고 더 신뢰감 있게 보여야 합니다.

처음 보내는 비즈니스 메일부터 조금 더 단정하게

비즈니스의 첫인상은 거창한 곳에서만 만들어지지 않습니다.

짧은 메일 한 통
메일 하단의 이름 한 줄
연락처와 브랜드 링크

이런 작은 부분에서도 충분히 만들어질 수 있습니다.

처음 사업을 시작했다면 이메일 서명부터 준비해보세요.

아직 완벽한 브랜드가 아니어도 괜찮습니다.
지금 하고 있는 일을 상대방이 더 쉽게 이해할 수 있도록 정리하는 것부터 시작하면 됩니다.

이메일 서명은 가장 작은 디지털 명함이자
가장 간단하게 시작할 수 있는 비즈니스 브랜딩입니다.

마무리하며

이메일 서명을 html 코드로 정리하는 것, 신뢰도 있는 비즈니스의 시작일 수 있습니다.

이메일 서명 코드 사용 가능한 이메일 플랫폼

이메일 서명 코드를 제작할 html 담당자가 없다면, TAGLINE을 사용해 제작해보세요.

이메일 서명 코드 제작 서비스 TAGLINE 사용해보기

AI가 인간을 뛰어넘는 세상 – Sam Altman이 말한 미래

기획하는디자이너 — Tue, 28 Oct 2025 09:47:52 +0900

AI가 인간을 뛰어넘는 세상 – Sam Altman이 말한 미래

세계적인 AI 기업 OpenAI의 CEO 샘 알트먼(Sam Altman)은 TED 2025에서 ChatGPT, AI 에이전트, 그리고 슈퍼인텔리전스에 대해 이야기했습니다. 그의 말 속에는 우리가 맞이할 ‘AI 시대의 미래’에 대한 힌트가 담겨 있었어요.

1️⃣ AGI란 무엇일까?

알트먼은 AGI(범용 인공지능)에 대해 이렇게 말했어요. “AI가 인간처럼 생각하고, 스스로 배우며, 모든 지식 분야에서 일할 수 있을 때” 그걸 AGI라고 부른다고요.

하지만 지금의 AI는 아직 그 단계에 이르지 못했대요. 스스로 계속 배우거나, 완전히 인간처럼 사고하진 못하니까요. 그래서 중요한 건 “언제 AGI가 완성되느냐”가 아니라 “그 과정에서 얼마나 안전하게 발전하느냐”라고 강조했습니다.

“AGI는 한순간에 완성되는 게 아닙니다. 계속 발전하는 과정이 중요합니다.” – Sam Altman

2️⃣ AI가 바꾸는 창작의 세상

알트먼은 AI가 단순히 글을 쓰거나 그림을 그리는 수준을 넘어서 진짜 ‘창작의 동반자’가 되고 있다고 했어요.

Sora 모델은 영상을 만들고, 지능적으로 이미지까지 구성할 수 있어요.
AI는 이제 “도구”가 아니라 “아이디어를 함께 만드는 친구”가 되었죠.

하지만 새로운 문제도 생겼어요. AI가 유명한 작가나 화가의 스타일을 모방한다면, 그건 저작권 침해일까요?
그래서 그는 ‘창작의 경제모델’을 새롭게 설계해야 한다고 말했어요. 예를 들어, 특정 작가의 스타일을 썼다면 수익 일부를 나누는 방식처럼요.

“AI는 창작자에게 더 강력한 도구를 주지만, 그만큼 새로운 규칙도 필요합니다.” – Sam Altman

3️⃣ 오픈소스와 AI의 성장

OpenAI는 앞으로 더 강력한 오픈소스 AI 모델을 공개할 계획이에요. 누구나 사용할 수 있게 함으로써, AI 기술이 더 널리 퍼지고 더 빠르게 발전할 거라고 했죠.

다만, 이런 오픈소스 AI가 잘못 사용될 위험도 있어요. 그래도 그는 “위험이 있어도 함께 발전시켜야 한다”고 강조했어요.

OpenAI는 현재 주간 5억 명이 넘는 사용자를 보유하고 있어요.
앞으로는 단순한 ‘모델 성능’보다, 사용자의 데이터를 이해하고 기억하는 ‘제품 경험’이 중요하다고 했어요.

4️⃣ 에이전트 AI의 등장

이제 AI는 단순히 질문에 대답하는 것을 넘어 ‘스스로 행동하는 에이전트(AI Agent)’로 발전하고 있어요.

예를 들어, AI가 사용자의 일정표를 보고 대신 식당 예약을 하거나, 이메일을 정리해주는 일이 가능해질 거예요.

하지만 여기엔 큰 위험도 숨어 있어요. 신용카드 정보, 개인정보 등을 잘못 다룰 수도 있으니까요.

그래서 그는 이렇게 말했어요.

“좋은 AI는 안전한 AI입니다. 신뢰할 수 있어야 진짜 도우미가 될 수 있습니다.” – Sam Altman

5️⃣ AI가 바꿀 우리의 미래

샘 알트먼은 미래 세대가 우리를 이렇게 볼 거라고 했어요. “그 시절 사람들은 참 불편하게 살았네!”

그만큼 AI가 바꾸게 될 세상은 지금보다 훨씬 빠르고, 풍요로울 거라는 뜻이에요. 하지만 기술이 발전한다고 자동으로 행복해지는 건 아니죠. 사회가 준비되고, 안전과 윤리가 함께 발전해야 진짜로 좋은 미래가 될 거예요.

“AI는 엄청난 풍요를 가져올 것입니다. 하지만 그 세상은 우리가 함께 만들어가야 합니다.” – Sam Altman

정리하자면

AGI는 아직 멀었지만, 그 과정이 더 중요하다.
AI는 창작의 친구가 되지만, 저작권과 경제모델이 새로 필요하다.
오픈소스와 안전성은 AI 발전의 두 축이다.
에이전트 AI는 편리하지만, 신뢰가 없으면 위험하다.
AI는 풍요로운 세상을 만들지만, 사회의 준비가 함께해야 한다.

기술은 결국 사람을 위한 것이 되어야 해요. 샘 알트먼이 말한 AI의 미래는, 우리 모두가 그 방향을 함께 고민해야 한다는 메시지이기도 합니다.

✍️ 출처 : TED 2025, Sam Altman Interview

SEO의 끝? 이제는 GEO AEO의 시대

기획하는디자이너 — Fri, 24 Oct 2025 13:42:25 +0900

검색의 시대는 끝나고, 생성형 검색엔진이 주도하는 GEO의 시대가 시작되었습니다.
AI가 인용하고 싶은 콘텐츠를 만드는 전략, 지금부터 준비해야 합니다.

AI Generated Content (c)dbre

검색의 주도권이 바뀌고 있다

불과 몇 년 전까지만 해도 검색 최적화는 키워드의 싸움이었고, 이는 곧 검색 상위에 노출되기 위한 단순한 전략이었습니다.
제목에 핵심 키워드를 넣고, 본문에 적절히 반복시키면 검색 상위 노출은 어느 정도 예측 가능했죠.

하지만 최근 AI가 전세계적인 화두로 떠오르고 거의 모든 분야에 AI 활용 방안을 연구하는 시대에 이제 사용자는 검색창에 단어를 입력하지 않고, 대신 AI에게 질문을 합니다.

OOO 잘하는 국내 업체 추천해줘.
OO제품 브랜드별로 비교해줘.

검색의 중심이 키워드 → 문장 → 맥락으로 옮겨고 있으며 이것이 바로 AI SEO의 시작점이라고 할 수 있습니다.

이번 글에서는 AI SEO, 즉 GEO/AEO의 개념에 대해서 알아보고자 합니다.

AI Generated Content (c)dbre

GEO, AEO란 무엇인가?

1. GEO

GEO는 Generative Engine Optimization의 약자로 생성형 검색엔진 최적화를 의미합니다.
이전의 SEO(Search Engine Optimization)가 검색엔진이 페이지를 더 잘 읽고, 상위 노출시키는 기술이었다면 GEO는 AI가 콘텐츠를 답변의 근거로 선택하도록 만드는 전략이에요.

이제는 단순히 검색엔진이 인식할 수 있는 콘텐츠가 아니라 AI가 인용하고 싶은 글을 만들어야하는 시대가 되었습니다.

2. AEO

AEO는 Answer Engine Optimization의 약자로, 답변형 검색엔진 최적화를 뜻합니다.
기존의 SEO가 검색 결과 상위 노출을 목표로 했다면 AEO는 AI가 사용자의 질문에 답변할 때 그 근거로 내 콘텐츠를 채택하게 만드는 전략 입니다.

예를 들어, 사용자가 '브랜딩 잘하는 국내 에이전시 추천해줘'라고 물었을 때 AI가 답변 안에서 특정 브랜드를 언급하거나 인용한다면, 그것이 바로 AEO의 성과입니다.

즉, GEO가 AI의 콘텐츠 생성 구조를 이해하고 최적화하는 전략이라면, AEO는 AI의 답변 결과 안에 내 브랜드를 포함시키는 실전형 전략이라고 볼 수 있습니다.

GEO와 AEO 이 두 가지는 서로 보완 관계에 있기 때문에 결국 AI 검색 생태계 전체를 대비한 통합적 접근이 필요합니다.

AI Generated Content (c)dbre

지금 GEO가 필요한 이유

지금 이 순간 GEO가 반드시 필요한 이유를 알아보겠습니다.

1. 검색 결과의 형태가 바뀌었다.

구글의 AI Overview, ChatGPT의 Browse 기능이나 Perplexity와 같은 AI 검색엔진은 이제 10개의 링크 대신 한 줄의 요약을 제공합니다. 이를 통해 사용자는 링크를 클릭하지 않고도 답을 얻을 수 있게 된 것입니다. 이로 인해 GEO 검색 결과를 잘 활용하기 위해서는 AI의 한 문장 안에 브랜드가 포함되어야 합니다.

2. AI는 '단어'를 넘어 '의미'를 이해한다

AI는 텍스트의 문맥을 읽어서 분석합니다.

쉽게 말해 '이 단어가 몇 번 나왔는가'보다 '이 문장이 어떤 의도를 담고 있는가'를 파악하는 것입니다.
따라서 AI가 이해하기 쉬운 방식으로 콘텐츠를 구성해야 한다는 것으로 이해할 수 있습니다.

AI가 이해하기 쉬운 문맥이 담긴 콘텐츠의 구성은 다음과 같습니다.

명확한 문장
구조화된 데이터 (예: FAQ, How-to, Schema)
중복 없는 핵심 정보

이 세 가지가 AI가 글을 ‘답변 후보’로 선택하는 기준이 될 수 있습니다.

3. AI는 '신뢰'와 '일관성'을 본다

AI는 단순히 많이 언급된 페이지를 맹목적으로 믿지 않습니다. 브랜드가 얼마나 전문적인지와 다른 채널에서도 동일한 메시지를 전달하고 있는지를 복합적으로 평가합니다.

결국 GEO의 본질은 콘텐츠 신뢰도 관리라고 할 수 있습니다.
포털의 검색엔진이 신뢰할 수 있는 콘텐츠를 판단할 때 사용되는 핵심 기준인 E-E-A-T(전문성, 경험, 권위, 신뢰) 원칙이 이제 SEO뿐 아니라 GEO의 핵심 기준으로 작동하고 있습니다.

E-E-A-T란?

E - Experience : 실제 경험에서 나온 정보인가?
E - Expertise : 전문적인 지식을 담고 있는가?
A - Authoritativeness : 그 분야에서 인지도나 권위를 가지고 있는가?
T - Trustworthiness : 전체적으로 신뢰할 수 있는가?

via Freepik

GEO 전략으로 콘텐츠를 설계하는 방법

GEO 전략을 위해 콘텐츠를 설계하는 단계는 5가지로 나누어 볼 수 있는데요.
콘텐츠는 AI가 쉽게 인용할 수 있는 형태로 제공하고, JSON-LD 구조화 데이터를 활용한 스키마(Schema)를 웹에 적용하여 페이지의 의미를 명확히 전달할 수 있습니다.

또한 앞서 언급한 검색엔진 신뢰도를 강화하여 출처 신뢰도를 향상시킴으로써 AI가 정보를 제공할 때 높은 신뢰도를 기반으로 제공할 수 있어야 하고, 다양한 멀티채널로 확장하여 마찬가지로 다양한 출처를 AI가 인식할 수 있도록 해야 합니다.

마지막으로 AI가 답변 내에서 언급할 수 있는 추적 루트를 제공하기 위한 Search console 등을 적절히 활용해야 합니다.

단계	핵심 포인트	설명
① 콘텐츠 구조화	Q&A, FAQ, How-to 중심 구성	AI가 쉽게 인용할 수 있는 형태
② 스키마(Schema) 적용	JSON-LD 구조화 데이터 활용	페이지 의미를 명확히 전달
③ 신뢰도(E-E-A-T) 강화	브랜드의 전문성·일관성·투명성 확보	출처 신뢰도 향상
④ 채널 확장	블로그·유튜브·뉴스룸 등 멀티채널	AI가 다양한 출처를 인식
⑤ 데이터 추적	Search Console·AI 인용 추적	AI 답변 내 언급 여부 확인

핵심은 하나로 일축할 수 있습니다.
바로 AI가 내 콘텐츠를 인용하도록 만드는 것 이라고 할 수 있습니다.

AI가 내 콘텐츠를 인용하게 만들자

검색 상위노출보다 중요한 것이 이제는 AI답변 안에 콘텐츠가 포함되도록 하는 것이 되겠네요.

AI Generated Content (c)dbre

SEO vs. GEO 무엇이 달라졌나?

제가 알아본 기존의 SEO와 AI 기반의 답변인 GEO의 차이는 다음과 같이 정리해보았습니다.

항목	SEO	GEO
초점	키워드 중심	의미·문맥 중심
목표	검색엔진 랭킹	AI 답변 인용
평가 기준	트래픽, 링크 수	신뢰도, 일관성
포맷	텍스트 위주	구조화 데이터, 요약형
전략	노출 중심	인용 중심

GEO가 가져올 검색의 미래

AI는 앞으로 검색의 형태를 완전히 바꿔놓을 듯 합니다. 이미 많이 바뀌었지만요.
AI는 스스로 정보를 만들어내기보다는 누군가의 콘텐츠를 바탕으로 답을 생성하죠.
이 때 그 누군가가 바로 내 브랜드 또는 내 서비스가 되어야 GEO를 잘 활용하는 것이라 볼 수 있습니다.

AI가 질문에 답할 때 내 글이 그 근거로 인용되는 것이 바로 GEO의 목표이자, 새로운 검색 경쟁의 무대가 아닐까요?

AI Generated Content (c)dbre

SEO는 여전히 웹 상에서 나를 잘 보여주기 위한 필수적인 요소입니다.

하지만 이제는 그것만으로 부족하죠. AI는 키워드가 잘 들어간 글 보다는 가장 명확하고 신뢰할 수 있는 설명을 선택합니다.
이제 우리는 검색엔진을 위한 글이 아니라 AI와 사람 모두가 이해할 수 있는 콘텐츠를 만드는 것을 목적으로 해야겠습니다.

UIUX 디자인할 때 꼭 알아야 할 사이트

기획하는디자이너 — Fri, 17 Oct 2025 23:24:42 +0900

UIUX 디자이너를 위한 놀이터, ‘디자이너스(Designus)’

Desinus

UIUX 디자인을 공부하거나 업으로 삼고 있다면, 한 번쯤은 이런 생각을 해보셨을 거예요.

다른 사람들은 어떻게 디자인하지?
지금 내 작업, 괜찮은건가?

이럴 때 도움이 되는 사이트가 바로 디자이너스(Designus)입니다.
주로 App UIUX를 다루는 공간인데, 초기에는 카카오톡 오픈채팅으로 시작해서 매일 1개씩 AB테스트와 같은 토픽을 업로드해서 투표하거나 의견을 자유롭게 나누는 것에서부터 시작되었습니다.

UIUX 레퍼런스 모음집

디자이너스에서는 기존에 출시된 앱, 웹의 다양한 세부 화면 디자인 사례를 한눈에 볼 수 있고,
디자인 챌린지나 토론 주제에 참여하면서 실전 감각도 키울 수 있습니다.

각 화면은 산업군 별, UI 컴포넌트 별로 필터링이 가능해요.
내가 지금 하고 있는 디자인에서 필요한 요소만 콕 찝어서 다른 서비스에서는 어떻게 디자인했나 를 찾아볼 수 있는 것이죠.

UI/UX 디자이너, 브랜딩 디자이너, 프로덕트 디자이너라면 하루에 한 번쯤은 들러볼 만한 가치가 있어요.

커뮤니티 중심의 구조

디자이너스의 가장 큰 장점은 ‘소통’이에요.
멋진 작업물만 공유하고 보여주는 게 아니라 서로의 생각을 나누고 피드백을 주고받을 수 있는 구조로 되어 있습니다.

Topic : 디자인 관련 토론이나 질문을 올리고 의견을 나눌 수 있어요.
Reference : 앱, 웹, 스토어 등 실제 서비스의 디자인을 레퍼런스로 모아둔 곳이에요.
Challenge : 실전 감각을 키울 수 있는 과제형 프로그램이에요.

이 모든 커뮤니티 기능을 무료로 활용해 볼 수 있다는 게 가장 큰 장점이에요.

오픈채팅방에서 관련 업종에 종사하거나 관심이 있는 학생들이 모이다보니, ‘디자인을 배우는 사람’과 ‘이미 현업에서 일하는 사람’이 자연스럽게 섞여 있고 서로 조언을 주고받아요.
경력자에게는 영감이, 초보자에게는 배움이 되는 공간이죠.

화면 AB 테스트 의견 들어보기

디자이너스의 여러 메뉴 중에서도 제가 가장 도움을 많이 받는 공간은 토픽이에요.
주로 마케팅에서 많이 사용되는 A/B 테스트는 같은 기능이나 정보를 서로 다른 형태로 제공한 뒤 결과 데이터를 추출하기 위한 테스트에요.

UIUX 기획, 디자인을 하다보면 내가 이렇게 표현한 화면이 과연 많은 사람들이 가장 편하게 사용할 수 있는 형태인가? 하는 의심이 들 때가 많은데 이럴 때 하나의 주제를 가지고 서로 다르게 디자인된 두개의 UI 화면에 대한 업계 전문가들의 의견을 들어볼 수 있어요.

시간이 될 때 마다 종종 들어가서 다양한 토픽 중 몇 개를 선택해서 달린 댓글들을 보다보면 다양한 의견들을 통해 나만의 인사이트를 발견하기도 해요.

이렇게 활용해보세요

1. 매일 하나의 레퍼런스 살펴보기
UI, 타이포그래피, 인터랙션 등 섬세한 포인트를 살펴보면 감각이 쌓입니다.

2. 토픽 참여하기
다른 디자이너들의 시선과 사고방식을 엿볼 수 있어요. 의견을 나누다 보면 자신만의 디자인 철학도 생깁니다.

3. 그로우업 챌린지 도전하기
실제 프로젝트처럼 구성된 과제를 풀며 실무 감각을 익힐 수 있습니다.
결과물은 포트폴리오로 활용해도 손색없어요.

UI 디자인 또는 기획을 공부하는 분들에게도 정말 많은 도움이 되는 컴포넌트 용어사전도 확인해볼 수 있답니다.

기획자나 UIUX 디자이너라면, 이런 사이트들을 즐겨찾기에 넣어두고 틈날 때마다 들러보세요.
꾸준히 보다 보면 감각이 달라집니다.

사용자 경험을 향상시키는 skeleton UI 스켈레톤

기획하는디자이너 — Sat, 10 May 2025 21:10:49 +0900

기다리는 순간마저 덜 지루하게 만들어주는 사용자 경험의 디테일

Skeleton UI란?

유튜브의 skeleton UI 적용 사례

웹사이트나 앱을 사용할 때, 콘텐츠가 완전히 로딩되기 전 회색 박스나 흐릿한 틀부터 먼저 보인 적 있으신가요?
바로 그게 Skeleton UI입니다.

말 그대로 Skeleton UI는 ‘뼈대 UI’를 의미합니다.
즉, 콘텐츠가 준비되기 전에 실제 내용이 들어갈 자리를 미리 시각적으로 보여주는 틀이죠.

실제로 네이버, 쿠팡, 인스타그램, 유튜브 등 인기 있는 앱들을 보면
Skeleton UI가 기본으로 적용되어 있는 경우가 많습니다.

왜 Skeleton UI가 필요할까요?

요즘 사용자들은 빠르고 즉각적인 반응에 익숙해져 있습니다.
그런데 화면이 텅 비어 있거나, 단순히 로딩 스피너만 돌아가고 있다면 어떤 생각이 들까요?

“이거 오류 난 건가...? 너무 오래 걸리는데?”

Skeleton UI는 이러한 불안감을 줄여주는 역할을 합니다.
어디에 어떤 콘텐츠가 들어올지 대략적으로 보여주기 때문에,
사용자는 ‘페이지가 제대로 작동 중이구나’라는 인식을 하게 되죠.

그 결과, 체감되는 로딩 시간이 줄어들고 사용자의 이탈률도 낮아지는 효과가 있습니다.

Skeleton UI vs 로딩 스피너, 뭐가 더 좋을까?

로딩중일 때의 페이지에는 보통 로딩 스피너가 적용되어있는데, 스켈레톤 UI 와 비교했을 때 어떨까요?

구분	Skeleton	UI로딩 스피너
시각 정보	콘텐츠의 형태를 미리 보여줌	회전 애니메이션만 표시됨
UX 만족도	높음 (기대감을 형성)	낮음 (불확실성 존재)
사용 트렌드	최신 웹/앱에서 널리 사용 중	점차 사용 빈도 감소

다양한 로딩 애니메이션 디자인을 볼 수 잇는 Lottiefile

Skeleton UI, 이렇게 활용해요

Skeleton UI는 주로 다음과 같은 형태로 나타납니다.

텍스트 자리 → 회색 선 (줄글 모양)
이미지 영역 → 회색 박스
리스트 형태 → 동일한 구조의 카드들이 반복됨

이러한 ‘가짜 콘텐츠’는 실제 콘텐츠가 로드되면 자연스럽게 교체됩니다.
덕분에 사용자 입장에서는 화면 전환이 훨씬 더 부드럽고 자연스럽게 느껴지게 되죠.

마무리하며

Skeleton UI는 단순히 보기 좋기 위한 장치가 아닙니다.
콘텐츠 로딩이 느릴 수밖에 없는 환경에서도 사용자의 이탈을 막아주는 전략적인 UI 요소입니다.

특히 이커머스, 뉴스, SNS처럼 데이터가 많고 로딩 빈도가 높은 서비스일수록 그 효과는 더욱 큽니다.

혹시 지금 운영 중인 사이트나 앱에서 로딩 속도 개선이 어려우신가요?
그렇다면 Skeleton UI를 한 번 적용해보는 것도 좋은 방법이 될 수 있습니다.

속도를 바꿀 수 없다면, 체감을 바꿔보세요!

노션으로 인스타그램 피드 캘린더 작성하기 노션양식 다운로드

기획하는디자이너 — Wed, 13 Nov 2024 00:33:10 +0900

인스타그램 피드에 꾸준히 게시물을 올리기가 쉽지 않죠. 그래서 저는 30일짜리 캘린더를 만들어, 콘텐츠 기획을 미리 설정하고, 필요한 이미지, 캡션, 해시태그까지 모두 준비해 매일 손쉽게 발행할 수 있는 콘텐츠 기획 양식을 만들었습니다.

이 양식은 한 달 동안 사용할 수 있는 30일치 플랜입니다.

다음 달 기획을 추가할 때는 페이지를 새로 만들어 레퍼런스 이미지, 제목, 캡션, 해시태그 등 미리 세팅해두면, 디자인 콘텐츠 작업이 빠르면 30분, 길어도 1시간 안에 끝낼 수 있어요.

인스타그램 콘텐츠 발행 시간을 단축하고 사전 기획으로 마케팅 플랜을 구성할 수 있는 콘텐츠 캘린더 제작 방법을 공유합니다. 직접 만드는 게 번거로우시다면, 제가 제공하는 양식을 사용해보세요. 무료 다운로드 링크를 포스팅 하단에 첨부했습니다.

노션으로 인스타그램 피드 플래너 제작하기

노션에서 새로운 페이지를 만든 후, /gallery를 입력해 갤러리 뷰를 추가하세요.

타이틀을 ‘11월’ 등으로 수정합니다.

New page 버튼을 클릭해 신규 페이지를 만듭니다. 이 페이지 하나가 하루치 콘텐츠 정보가 됩니다.

new page 갤러리 생성하기

콘텐츠 정보 입력하기

제목 입력

주제: 페이지 타이틀에 콘텐츠의 주제를 적어주세요.

date Type 변경하기

날짜: 기본으로 생성된 Created 날짜는 작성일 기준으로 고정되어 있어, 변경 가능한 Date 프로퍼티로 수정했습니다. 제목은 Update date로 변경했습니다.

태그 추가하기

태그 설정: Property의 우측 빈 공간을 클릭해 새로운 태그를 추가합니다. 텍스트를 입력한 후 스페이스바를 눌러 태그로 설정하고, 엔터를 클릭해 확정합니다.

캡션과 해시태그 입력

캡션: 텍스트 프로퍼티의 이름을 ‘Caption’으로 바꾸고 인스타그램 게시물에 들어갈 내용을 입력합니다.

해시태그: Text 프로퍼티를 하나 더 추가하고 이름을 ‘Hashtags’로 변경해 해시태그를 입력합니다.

갤러리뷰 설정

입력한 프로퍼티들이 갤러리뷰에서 보이도록 하려면 New 버튼 옆의 … 버튼을 클릭해 Properties에서 세팅할 수 있습니다.

숨겨진 프로퍼티는 눈 아이콘을 클릭해 표시하도록 설정할 수 있습니다.

텍스트 줄바꿈 설정

카드 내 텍스트가 잘릴 때는 ‘wrap all properties’를 활성화해 모든 텍스트를 줄바꿈으로 볼 수 있습니다.

카드 크기 조정 및 편집

카드는 Small / Medium / Large 크기 중 선택이 가능하며, 카드 위에 마우스를 올리면 우측 상단에 편집 아이콘이 나타나 카드 상태에서 바로 수정할 수 있습니다. 카드에 이미지를 삽입하려면 상세보기 화면에서 이미지 파일을 추가하면 됩니다.

콘텐츠 복사 및 관리

드래그하여 선택한 카드를 Command + D (Mac 기준)로 복사하면 30개까지 추가해 한 달 치 피드 플래너를 완성할 수 있습니다. 페이지 안에 이미지, 텍스트, 링크를 자유롭게 삽입해 레퍼런스 이미지 보관이나 완성된 콘텐츠 저장 용도로 활용할 수도 있습니다.

피드 플래너 양식을 만들었습니다. 아래에서 무료로 다운받으실 수 있어요.
다운로드 받을 이메일 주소를 남겨주시면 링크를 보내드립니다.

무료 피드 플래너 다운로드 방법

1. 비밀 댓글로 이메일 주소와 코멘트를 남기기
2. 이메일로 노션 페이지 초대
3. 페이지에 접속해 내 노션으로 복제 후 사용

피그마로 웹 기획하기 장점과 단점 figma 기획서 템플릿 다운로드

기획하는디자이너 — Fri, 1 Nov 2024 23:28:28 +0900

피그마 웹 기획 예시

요즘 피그마로 웹 기획을 진행하는 프로젝트들이 많아졌습니다.
국내 대표 에이전시인 P 사에서도 피그마로 기획하는 클래스 상품을 오픈한 걸 보면 대세는 피그마인 것 같습니다.

피그마로 웹 기획 시 장점

웹기획을 피그마로 하게 되면 다양한 장점이 있는데요.
전통적인 방식인 파워포인트를 벗어나 유연한 UI 가이드의 변경 적용이 쉽습니다. 버튼 하나만 수정 되어도 매 페이지의 버튼을 바꿔주어야 하는 ppt와는 달리 다이나믹 컴포넌트라는 기능을 활용하면 피그마에서는 컴포넌트 하나만 바꿔주어도 모든 페이지에 연결된 컴포넌트가 변경됩니다.

페이지 이동이 쉬워 작업시간을 획기적으로 줄여줍니다. 하나의 페이지에 많은 내용을 담게 되는 기획문서는 100페이지가 넘는 것은 일도 아니지요. 이럴 때 프로세스를 설명하기 위해 페이지 이동을 몇 페이지씩 해야 하는 ppt와는 달리 마우스 컨트롤 + 스페이스 바 를 사용해 아트보드의 원활한 이동이 가능합니다.

기획 문서에서 디자인으로의 전환이 더욱 원활합니다. 기획도 피그마로 진행하고 디자인도 피그마로 작업하게 될 경우, 기획을 위한 더미데이터나 텍스트 등을 그대로 활용할 수 있기에 무의미한 반복작업의 공수가 줄어들 수 있습니다.
또한 기획을 위한 공통 UI가이드를 활용하여 디자인 공통을 조금 더 상세화하여 뽑아낼 수 있어 각각 작업할 때 보다 빠른 작업 속도를 낼 수 있습니다.

이러한 쉬운 컨트롤과 코멘트, 채팅 기능 등을 통해 팀 간의 소통도 원활하게 해준다는 장점이 있습니다.

피그마로 웹 기획 시 단점

다만 프로젝트 산출물인 문서화를 위해서는 문서 자체에서 수정이 어렵고 피그마 파일로 옮겨 추출 후에 다시 수정해야 한다는 단점은 있는데요. 프로그램을 파워포인트에서 피그마로 옮긴 것 뿐이라는 점 외에는 단순히 익숙하지 않은 것에 대한 불편함 정도 외에는 매력적인 툴인 것은 확실합니다.

피그마로 웹 기획 하기 위해 필요한 몇 가지

피그마로 웹 기획을 하고자 하시는 분들이 알면 좋을 몇 가지를 소개해드리겠습니다.

1. 페이지 나누기

피그마에서는 페이지별로 보드를 나눌 수 있습니다. 보통 기획을 할 때에나 디자인을 진행할 때에는 이 부분을 메뉴로 나누어 구성하게 됩니다. 컴포넌트와 레이아웃, 홈, 메뉴, 주요 페이지 등으로 구성하여 컴포넌트와 레이아웃 페이지의 내용들은 다이나믹 컴포넌트로 연결해두면 공통적인 내용을 수정 시 해당 페이지에서만 수정하면 수정과 변경이 쉽습니다.

2. 다이나믹 컴포넌트 활용하기

피그마로 만드는 모든 요소는 다이나믹 컴포넌트화 할 수 있는데요. 공통적으로 사용되는 버튼이나 상단 레이아웃과 같은 요소는 페이지를 구성 시 마다 공통으로 사용하면 수정이 쉬워집니다.

전체 메뉴에서 이 메뉴는 빼고 이 위치에 넣는다거나 푸터에서 아이콘의 위치를 바꾼다거나, GNB의 폰트 사이즈를 줄이는 등 모든 페이지에서 사용되는 요소 수정 반영을 원활하게 할 수 있는 피그마의 핵심적인 기능이라고 할 수 있습니다.

3. 플러그인 활용하기

아이콘과 같은 간단하게 쓰기만 해도 의미가 통하는 요소들은 무료 플러그인을 사용하여 툭툭 간편하게 삽입할 수 있습니다. 플러그인은 피그마에서 검색을 통해 사용이 가능한데요. 유료 플러그인도 많지만 무료 플러그인으로 제공되는 아이콘 만으로도 기획 문서 만들기는 충분합니다.

주로 사용되는 대표적인 아이콘인 햄버거버튼이나 글로벌 사이트의 언어 변경을 나타내는 지구본모양, 챗봇 연결을 위한 말풍선 모양 등 기획에서 크게 디자인을 고려하지 않아도 되는 아이콘들은 무료 플러그인을 사용하여 간단하게 표현이 가능합니다.

피그마로 기획 문서를 작성할 때 쉽게 적용할 수 있는 템플릿이 있다면 더 편리하겠죠?

UI 디자인을 진행할 때 유용하게 사용되는 다이나믹 컴포넌트로 기획문서를 ppt로 작성할 때 마스터 페이지를 수정하는 것과 같은 활용이 가능합니다. 따라서 기획 문서도 템플릿화 하여 피그마에서 문서 전체를 이미지나 pdf로 내려받는 방식으로도 활용이 가능합니다.

제가 만들어 본 피그마 기획문서 템플릿을 무료로 공유하니 필요하신 분은 아래 링크에서 다운로드 받아보세요.

피그마 화면설계서 템플릿 무료 다운로드

dbre_화면설계서 템플릿_v.1.0.fig

* 재공유 시 반드시 출처를 명시해주세요. (출처 : dbreblog.com)
* 수정 사용 가능합니다.
* figma 파일이므로 피그마에서 import하여 사용하세요.

로컬 폰트를 웹폰트로 적용하는 방법

기획하는디자이너 — Sun, 28 Jul 2024 15:57:24 +0900

로컬폰트를 웹폰트로 적용하는 방법 ⓒdbre

로컬 폰트를 웹폰트로 적용하는 방법

로컬에 설치된 폰트 파일을 웹사이트에서 사용하고 싶지만, 제공되는 웹폰트 링크가 없다면 다음과 같은 방법을 통해 웹폰트로 사용할 수 있습니다.

1. 웹폰트 적용 css 코드 작성

먼저, 아래의 CSS 코드를 작성하여 웹폰트를 설정합니다 :

@font-face {
font-family: 'NanumSquare';
font-weight: 400;
src: url(NanumSquareR.eot);
src: url(NanumSquareR.eot?#iefix) format('embedded-opentype'),
url(NanumSquareR.woff) format('woff'),
url(NanumSquareR.ttf) format('truetype');
}

이 코드를 'style.css' 또는 'fonts.css'와 같은 파일에 넣습니다. 해당 파일의 최상단에 위치시키는 것이 좋습니다.
이후, 원하는 HTML 아래와 같이 폰트를 적용합니다.

div {
    font-family: 'NanumSquare', Arial;
    font-weight: 500;
    font-size: 12px;
}

2. 폰트 파일 웹 업로드

폰트를 적용하기 위해서는 로컬 폰트 파일을 웹 서버에 업로드해야 합니다.
웹폰트로 사용하기 위해 필요한 파일 형식은 'eot', 'woff', 'ttf' 입니다.

보통 로컬에 설치된 폰트 파일은 'ttf', 또는 'otf' 형식입니다. 웹폰트로 변환하려면 아래의 사이트를 이용하여 파일 형식을 변환할 수 있습니다.

웹폰트 파일 형식 변환

Convert otf to ttf | Everything Fonts

Convert otf font files to ttf files online. Other font conversion options are also available

everythingfonts.com

Everything Fonts 에서는 otf 파일을 ttf 파일로 변환할 수 있습니다. 다른 파일 형식으로도 변환이 가능합니다.

3. 라이선스 확인

폰트 파일을 사용할 때는 반드시 해당 폰트의 라이선스를 확인하고 사용하는 것이 중요합니다. 상업적 사용이 가능한지, 배포가 허용되는지 등을 확인해야 법적 문제가 발생하지 않습니다.

추가로 도움이 되는 정보

Google Fonts : 다양한 무료 웹폰트를 제공하며, 사용법도 간단히 안내되어 있어 쉽게 적용할 수 있습니다.

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

Font Squirrel : 고품질의 무료 웹폰트를 제공하며, 웹폰트 변환기를 통해 다양한 형식으로 변환할 수 있습니다.

Free Fonts! Legit Free & Quality » Font Squirrel

Handpicked free fonts for graphic designers with commercial-use licenses.

www.fontsquirrel.com

Typekit by Adobe : 유료 서비스이지만 다양한 고품질의 폰트를 제공하며, 간단히 웹사이트에 적용할 수 있습니다.

Adobe Fonts

Adobe Fonts partners with the world’s leading type foundries to bring thousands of beautiful fonts to designers every day. No need to worry about licensing, and you can use fonts from Adobe Fonts on the web or in desktop applications.

fonts.adobe.com

이 정보를 참고하여 웹사이트에 로컬 폰트를 쉽게 적용해보세요.

내가 보고 있는 쇼핑몰 어떤 솔루션(카페24, 고도몰) 사용했는지 확인하는 방법

기획하는디자이너 — Mon, 19 Feb 2024 15:43:04 +0900

내가 보고 있는 쇼핑몰 어떤 솔루션(카페24, 고도몰) 사용했는지 확인하는 방법

쇼핑몰 운영 담당자분들이 가장 많이 궁금해하시는 부분은 바로
내가 운영중인 쇼핑몰 솔루션에서 어느 범위까지 수정이 가능한가 입니다.

퍼블리싱 의뢰 또는 문의를 받아서 진행하다보면 '내가 원하는 기능은 이런 건데, 우리 사이트에서 수정이 가능한가요?', 또는 '여기 레퍼런스 사이트에서는 이런 게 되는데, 우리도 똑같이 수정하고 싶어요.' 가 많은데요.

쇼핑몰 솔루션에 따라 수정할 수 있는 범위나, 가능 여부, 수정 방식 등이 모두 상이하다보니 내가 보고 있는 쇼핑몰이 어떤 솔루션을 사용했는지 파악할 수 있다면 가능 여부에 대한 파악이 조금 쉬울 수 있겠습니다.

왜냐하면 솔루션에 따라서 카테고리로 사용하는 상품 분류나 게시판 분류 등의 구조가 서로 다르고, 로그인화면이나 주문서 화면 같은 기본적인 유틸성 화면 중에서는 퍼블리싱만으로 쉽게 변경하기 어려운 부분이 많기 때문입니다.

기본 유틸성 화면들은 보통 쇼핑몰 솔루션 고유의 별도로 지정된 모듈이나 변수를 사용하고 있어서, 외부 개발자나 퍼블리셔들이 이 부분을 파악하는 데 어려움이 많아서 화면상의 디자인이 아닌 프로세스를 변경하는 데 한계가 있을 수 있습니다.

레퍼런스 쇼핑몰의 솔루션 확인하는 방법 = 서브도메인과 파라미터 구조 확인하기

1. NHN고도 고도몰 솔루션 사용 사이트

고도몰 솔루션의 대표 쇼핑몰인 마녀공장 공식몰 페이지

고도몰 콘텐츠 도메인 구조 : 도메인/경로/html.php?~

마녀공장 쇼핑몰의 공식몰 브랜드 소개 페이지 URL을 보면, 도메인/경로/html.php?~ 로 구성되어있는 것을 확인할 수 있습니다.

고도몰의 페이지 구조는 파일명 끝 부분이 php로 끝나고 뒷 부분에 페이지 ID로 구분된 변수에 따라 페이지를 불러오는 방식을 택하고 있습니다. 따라서 마녀공장 쇼핑몰은 고도몰로 제작되었습니다.

대표적인 예시로 상품 분류 카테고리의 도메인 구조에서도 솔루션을 확인해볼 수 있습니다.

마녀공장 상품분류 도메인 구조

고도몰 상품분류 도메인 구조 : https://도메인/goods/goods_list.php?cateCD=카테고리넘버링코드

고도몰 솔루션의 상품분류 URL 구조는 위와 같습니다.
고도몰은 상품을 goods로 표현합니다.

2. cafe24 쇼핑몰 솔루션 사용 사이트

스타일난다의 회사소개 페이지

cafe24 콘텐츠 도메인 구조 : 도메인/경로/파일명.html

반면 스타일난다 공식몰의 브랜드 소개 페이지 URL은 끝이 .html로 끝나는 것을 확인할 수 있습니다.

cafe24 쇼핑몰 솔루션의 URL 구조는 html로 끝나거나, 끝 부분 변수가 ID로 구분되는데요.
앞부분은 폴더별 경로를 의미하는데, 보통 콘텐츠성 페이지를 cafe24에서 생성하게 되면 .html 로 끝나는 서브 경로가 만들어집니다.

스타일난다 공식몰의 URL 구조

cafe24 상품분류 도메인 구조 : https://도메인/product/list.html?cate_no=카테고리넘버링코드

상품분류 리스트의 URL 구조는 위와 같습니다.
분류별 파라미터를 표기하는 방식이 고도몰과 다르고, cafe24는 상품을 product로 표기합니다.

가장 크게 구분되는 부분은 콘텐츠 페이지에 한해, 경로 중간에 php가 포함되어있는지, 또는 파라미터 ID 구분을 어떻게 하는지에 따라 다르다고 볼 수 있습니다. 상품분류 페이지에서는 경로 구성 자체에서 차이가 있으니 이 부분으로 cafe24 / 고도몰 솔루션 사용 여부를 판단할 수 있겠습니다.

[UI/UX] IT 기획 - 플로우차트 쉽게 그리는 무료 툴

기획하는디자이너 — Wed, 18 Jan 2023 16:17:21 +0900

웹, 앱, 서비스 기획 문서를 작성할 때는 주로 power point 를 사용하게 됩니다.
화면 레이아웃이나 유저 플로우 등 다양한 프로세스를 도형을 이용해서 표현이 가능해 가장 편리하고 버전에 관계 없이 호환되다보니 많은 곳에서 주로 사용하는 툴인데요.

그 중에서도 기획 문서 내 플로우차트를 작성 시에 흐름을 표현하는 화살표 등의 추가가 더 쉽고 플로우차트 전용 도형 등이 제공되는 무료 툴이 있어 소개해드리려고 합니다.

Diagrams.net

diagrams.net은 구글 계정과 연동하여 작성한 flowchart를 다양한 이미지 유형으로 추출할 수 있습니다.
또 완성본은 로컬 드라이브 뿐 아니라, 구글 드라이브나 깃허브에 저장도 가능한 온라인 기반의 툴입니다.

diagrams.net 사용 방법

1. 새로운 다이어그램 만들기

구글 계정은 연동하면 드라이브에 새로운 다이어그램이 생성됩니다.
이미 연동이 된 상태에서 이전에 만들어 놓은 다이어그램을 불러올 수 있습니다.
웹 기반이라 온라인 상태라면 어디에서든 작업하던 내용을 이어서 작업할 수 있습니다.

2. 다이어그램 템플릿 선택

신규 다이어그램을 생성하면 템플릿 중에서 선택하거나 빈 페이지를 만들 수 있습니다.
순서도, 조직도, ER다이어그램 등 필요한 기능에 따라 만들어진 구조에서 이어서 작성이 가능합니다.

3. 루트 폴더 사용 선택

루트폴더 사용 '예'를 선택 시 구글 드라이브 계정 연동이 진행됩니다.

4. 구글 계정 연동

구글 계정을 선택하거나 로그인하여 연동합니다.

5. 다이어그램 생성 완료

신규 다이어그램 파일 생성이 완료되었습니다.
빈페이지에서 우측 '일반' 탭의 도형을 클릭하면 아트보드에 도형이 생성됩니다.

6. 플로우차트 그리기

diagrams.net 툴이 편리한 점은 생성한 도형에서 텍스트를 입력하면 별도의 클릭 없이 바로 텍스트가 가운데 정렬로 입력되는 점과 다음 프로세스로의 이동 화살표를 자동으로 이어서 그려준다는 점입니다.

도형 생성 후 도형이 선택된 상태에서 사방의 화살표에 마우스 오버 시 다음 이어서 그릴 도형을 선택할 수 있는 팝업이 나타납니다.
팝업 내에서 새로 생성할 도형을 선택하면 자동으로 화살표로 이어진 플로우가 그려집니다.

도형 선택 상태에서 별도의 텍스트 툴 선택 없이 글자를 입력하면 ppt 텍스트박스와 같이 바로 텍스트가 입력됩니다.

플로우차트 생성 시 validation을 체크하는 마름모꼴의 도형도 바로 이어서 생성할 수 있어 편리합니다.
각 플로우 별로 박스의 컬러는 좌측 '스타일' 탭에서 수정 가능합니다.

Validation 플로우의 경우 yes 와 no 의 케이스를 구분하여 프로세스를 생서하는데, 좌측 툴박스 내 텍스트 기능을 활용하여 아트보드에 자유롭게 텍스트 입력 또한 가능합니다.

한개의 플로우가 완성이 되면 해당 플로우의 요소를 모두 선택하여 그룹화할 수 있습니다.

플로우차트의 도형을 이동 시 이동하는 위치에 따라 보드를 넘어갈 경우 동일한 아트보드 형태가 복제되어 자동 생성됩니다.
별도의 워크 화면 캔버스 조정을 하지 않고도 사이즈를 자유롭게 늘릴 수 있습니다.

웹 기반의 프로그램이므로 별도의 저장 없이도 연결된 구글 드라이브에 자동 저장이 되며, 완료된 플로우차트의 파일명을 변경하고자 할 때는 제목없는 다이어그램.drawio 부분에 마우스를 클릭하면 파일명을 변경할 수 있습니다.

.drawio 파일 유형은 구글 드라이브에서 언제든 불러와 수정이 가능한 형태의 유형이며, 이미지 형태로도 추출이 가능합니다.

완료된 플로우차트를 이미지로 저장하고자 할 경우, 파일 - 내보내기 - 유형 선택을 통해 가능합니다.
PNG, JPEG, SVG, PDF, HTML 등 다양한 파일 유형으로 추출이 가능합니다. 저는 주로 PPT 내에 이미지로 첨부하기에 JPG 파일 유형의 내보내기를 자주 사용합니다.

기본 플로우차트 원래 유형의 .drawio 파일은 최초 선택한 구글 드라이브에 저장되지만, 내보내기를 통해 추출한 파일의 저장 공간은 별도로 선택이 가능한데 보통은 사용자기기에 저장하여 작업중인 파일에 이미지 첨부로 진행합니다.

완료된 간단한 login 프로세스 입니다.
플로우차트가 세부적으로 진행되면 화면단위 보다는 주로 기능단위로 진행되는데, 두가지를 혼합하여 작업하는 경우에는 텍스트 박스 바깥 쪽이나 화살표 위아래, 또는 몇개의 플로우를 하나의 구역으로 다시 묶어서 점선으로 표시하는 등 다양한 방법을 사용할 수 있습니다.

JPG로 추출해 본 예시이며, 작업 시 아트보드의 모눈은 이미지 추출시 함께 출력되지 않으니 참고하시면 좋을 듯 합니다.

웹기획, 앱기획, 서비스기획, 개발 기획까지 다방면으로 사용이 가능한 온라인 기반의 무료툴 diagrams.net 이었습니다.

함께 보면 좋은 콘텐츠

사용하던 cafe24 호스팅 만료 후 2개월이 지나 연장이 불가하다면?

[UI/UX] 토스 페이먼츠 결제 UX 사례 스터디

이 글이 도움되셨다면 댓글과 공감으로 응원해주세요
궁금하신 점은 댓글 남겨주세요.

[Web] 사용하던 cafe24 호스팅 만료 후 2개월이 지나 연장이 불가하다면?

기획하는디자이너 — Wed, 4 Jan 2023 05:31:00 +0900

사용하던 cafe24 호스팅 만료 후 2개월이 지나 연장이 불가하다면?

사용하던 cafe24 호스팅이 있습니다.
소개용 개인 웹사이트 제작이라 대략 틀만 잡아놓고, 메인 화면 채우고 서브페이지 콘텐츠를 채워 나가다가 디자인을 리뉴얼해야 할 듯 하여 디자인을 다시 제작하던 중 다른 일 때문에 잠깐 손을 놓아두었던 프로젝트.

cafe24 호스팅 만료되었다는 메일은 받았지만 다른 일로 바빠 까맣게 잊고 지내다 5개월 정도가 지났을 즈음 생각이 들어 어느날 연장하러 cafe24에 접속하니 만료되어 더이상 연장이 불가하다는 안내 문구가 있습니다.

cafe24 호스팅 만료 후 2개월 경과

이럴수가...

연장이 불가한 것인가? 정말 방법은 없는것인가?

열심히 검색해보았지만 결론은,

cafe24 기간만료 2개월이 지나면 모든 자료가 삭제된다

만료 2개월 후에는 연장 불가.
서버 데이터 용량 문제로 만료된 데이터는 2개월간만 보관하고 모조리 삭제해버린다고 합니다.

Visual Studio Code 를 통해 작업했기에 수정했던 파일들은 아마도 로컬에 남아있지 않을까 하는데 따로 전체 백업해둔 적은 없으니 아마도 날아갔겠죠. 어차피 코드가 중간에 꼬이기 시작해서 틀을 다시 잡으려고 생각은 했으나, 처음부터 다시 하려니 사실 막막합니다

Ctrl+S 는 언제나 우리를 배신하지 않는다

사이트에 바로 적용해서 조금씩 1페이지씩 오픈하려고 미리 호스팅과 도메인 모두 연결해두고 페이지 작업을 하고 있었는데, 그냥 로컬에서 모두 작업해놓고 온라인에 업로드하는 것이 비용 측면이나 시간 측면에서 효율적인 듯 합니다.
프로젝트들이 다 이런 방식으로 하는 데에는 이유가 있더라구요.

다행히 figma에 디자인과 소스는 남아있지만, 퍼블리싱한 코드들이 아까울 따름입니다.
도메인은 아직 만료되지 않아 도메인으로 접속해보니 시크릿 모드로 확인해도 사이트의 페이지들은 남아있는데, 혹시 복구가 가능한지 cafe24에 별도 문의를 넣어볼 예정입니다.

그래서,
사용하던 cafe24 호스팅이 만료되었고, 2개월이 지났다는 안내 문구가 나온다면?
결론은 연장이 불가하다.

수정할 때 마다 반드시 로컬에 전체 백업해둘 것.

함께 보면 좋은 콘텐츠

트렌디한 웹디자인을 위한 Serif 무료 폰트 소개

쇼핑몰 상세페이지 내에 동영상 삽입하기

멋져보이는 웹사이트 포인트 - 마우스 커서 URl 이미지로 바꾸기

이 글이 도움되셨다면 댓글과 공감으로 응원해주세요
궁금하신 점은 댓글 남겨주세요.

[HTML & CSS] 가로로 흐르는 텍스트 만들기

기획하는디자이너 — Mon, 18 Apr 2022 20:05:02 +0900

쇼핑몰, 사이트 내 가로로 흐르는 전광판 텍스트 만들기

최근 트렌디한 웹사이트에서 볼 수 있는 가로로 흐르는
전광판의 역할을 하는 텍스트를 CSS 만으로 만들 수 있는 방법을 소개해드립니다.

<style>
/* 움직이는 텍스트 */
.animated-title {font-size:60px; font-family:'Raleway',Sans-serif; font-weight:300; position: relative; width: 100%;max-width:100%; height: auto; padding:100px 0; overflow-x: hidden; overflow-y: hidden; }
.animated-title .track {position: absolute; white-space: nowrap;will-change: transform;animation: marquee 60s linear infinite; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (hover: hover) and (min-width: 700px){
.animated-title .content {-webkit-transform: translateY(calc(100% - 8rem)); transform: translateY(calc(100% - 8rem));}
    }
</style>


<div class="animated-title">
  <div class="track">
    <div class="content">&nbsp;moho design template glad&nbsp;moho design template glad&nbsp;moho design template glad&nbsp;moho design template glad&nbsp;moho design template glad&nbsp;moho design template glad</div>
  </div>
</div>

아래에서 예제를 확인해보세요.

moho design template glad moho design template glad moho design template glad moho design template glad moho design template glad moho design template glad

텍스트가 삽입된 사이트의 예시입니다.

적용된 사이트 확인하기

이 글이 도움되셨다면 댓글과 공감으로 응원해주세요
궁금하신 점은 댓글 남겨주세요.

[디자인트렌드] 웹디자인 트렌드 참고할만한 사이트 5

기획하는디자이너 — Thu, 31 Mar 2022 17:40:18 +0900

웹디자인 트렌드 참고 사이트 5

IT업계, 웹 디자이너, UI/UX 분야에 종사하고 계신 분들이라면 웹디자인 트렌드에 항상 민감하게 반응하고 계실텐데요. 제가 참고하고 생각날 때 마다 검색해보는 웹디자인 트렌드 참고할만한 사이트 5가지를 소개해드립니다.

1. themeforest(envato market)

테마 포레스트, 씸포레스트, 엔바토마켓 등으로 불리우는 세계적으로 유명한 디자인 템플릿 소스 사이트입니다. 저는 워드프레스 사이트 제작을 위해 방문했다가 다양한 디자인 소스들에 매료되어 업데이트되는 최신 소스들을 검색하곤 합니다.

가끔 유튜브 추천 동영상으로 이 envato market에서 소개하는 최신 템플릿 소스 영상이 뜨기도 할 만큼 워낙 대형 플랫폼이고 사용자 규모가 크다 보니 실시간으로 업데이트되는 소스의 양도 많아 트렌드를 파악하기 좋습니다.

웹디자인 관련한 디자인 트렌드는 주로 상단 메뉴 중 wordpress 메뉴나 elementor, HTML 카테고리에서 확인이 가능합니다.

워드프레스 테마로 제공되는 디자인들은 해외 온라인 쇼핑몰 디자인 트렌드를 참고하기도 좋습니다. 또한 사이트의 종류(commerce / wedding / technology 등)가 산업군별로 정리되어 있어 해당 산업군에 속하는 기업들이 사용하는 디자인들을 확인해볼 수 있습니다.

e-commerce 카테고리에서 상단 필터의 Newest 를 선택하면 최신 업로드 디자인 확인이 가능합니다

실제 구매가 이루어지고 있는 활발한 마켓인만큼 시장성과 선호도가 보장되어있는 디자인들이니 필터를 설정하여 탐색해보면 트렌드를 파악하는 데 많은 도움이 됩니다.

themeforest 웹디자인 템플릿의 preview 보기 페이지는 해당 템플릿 안에 적용 가능한 다양한 디자인이 통일된 컨셉으로 제공되고 있기에 연관된 디자인 레이아웃을 공부하기 좋습니다.

각각의 페이지를 모두 눌러보면 속성과 기능마다 유사한 컨셉으로 서로 다른 용도의 페이지들의 예시를 볼 수 있습니다.

2. behance

거의 모든 디자인업계 분들이 다 알고있을 법한 비핸스 입니다.

포트폴리오 플랫폼이고 특히나 세계적으로 퀄리티 있는 최신 기술이 적용된 작품과 프로젝트들을 탐색할 수 있습니다. 얼마전 기획하는디자이너 디브레 블로그에서도 소개해드렸던 적이 있는 비핸스 사이트에서 전세계 국가별 최신 트렌드 탐색하는 팁을 통해 트렌드 참고가 가능합니다.

자세한 탐색 팁은 이전 콘텐츠를 참조하세요.

비핸스 웹디자인 트렌드 검색 키워드는 주로 webdesign, web, uiux, application, branding 등 입니다.

그래픽 디자인 기술적인 부분이나 표현방법에 대해서 궁금하다면 graphic 위주의 작업물을 확인하고, web ui 디자인에 대해 궁금하다면 web deisgn / web contentes / commerce 등의 키워드가 좋습니다.

ui/ux 의 키워드는 주로 어플리케이션 프로젝트에서 많이 사용하기에 app 등의 키워드로 전반적인 디자인 기획 내용들이 상세히 들어간 포트폴리도 확인해볼 수 있습니다.

출처 : 비핸스 Prometheus Group - Web Design

3. pinterest

핀터레스트가 최근에는 국가별 sorting을 많이 해주는 듯 합니다. 국내 유저들이 업로드한 이미지들이 간간히 보이는 것을 보면 국내 트렌드 파악도 가능하지만 아직까지 국내 유저들은 공유보다는 '눈팅'을 많이 하는 듯 합니다.

핀터레스트에서도 webdesign, web contents 등으로 많이 검색하여 활용하는 편이고, 저는 주로 인스타그램 콘텐츠 디자인이나 기획을 할 때 주로 참고하는 편입니다.

핀터레스트에는 위에서 언급한 다양한 사이트들의 콘텐츠를 한번 더 모아놓은 느낌이라, 앞으로 소개해드릴 dribble이나, behance는 물론 틱톡의 영상들까지도 한번에 탐색이 가능합니다.

또한 핀터레스트는 워낙 이미지의 양이 방대하다보니 하나의 키워드에서 시작한 이미지를 보다 보면 연관된 테마로 자동 추천된 이미지들에서 새로운 아이디어를 발견하게 된다는 장점이 있습니다.

핀터레스트의 more like this 추천 콘텐츠가 더 유용할 때가 많습니다

내가 찾아서만 나오는 것이 아닌 플랫폼이 추천해주는 알고리즘에 의한 콘텐츠에 늘 기대하게 되는 플랫폼이고 그만큼 사고와 시야를 확장할 기회가 많아 웹디자인 뿐만이 아닌 모든 분야의 트렌드를 탐색하기에 최적의 사이트라고 할 수 있습니다.

4. dribble

간단한 gif로 동영상처럼 재생되는 UX 콘텐츠를 한번쯤은 보셨을 텐데요, 이러한 형태의 작은 썸네일형 포트폴리오 콘텐츠는 아마도 dribble에서 시작된 듯 합니다.

제가 드리블 사이트를 알게 된 계기는 핀터레스트인데, 핀터레스트에 공유되는 드리블의 UI/UX 디자인 콘텐츠 형태가 거의 웹사이트나 앱이 구현되는 UX 인터랙션이 동영상으로 만들어진 형태입니다.

웹디자인에서 동적인 인터랙션 구현의 아이디어나 트렌드 조사가 필요하다면 적절한 사이트는 드리블이 아닐까 싶네요.

dribble 의 웹디자인 카테고리

드리블 사이트에 로그인한 후 inspiration 메뉴에서 상단 탭 중 webdesign을 누르면 웹디자인 트렌드 확인이 가능합니다.

위에서 언급한 UIUX 인터랙션 / 트랜지션에 대한 탐색은 Animation 탭에서 확인할 수 있습니다. animation 탭에서 썸네일 위에 마우스오버 시 영상콘텐츠의 경우 동영상이 재생됩니다.

5. awwward

마지막으로 어워드(w 세 개) 입니다.

제가 웹디자인 트렌드 콘텐츠 글을 작성할 때 가장 많이 참고하는 사이트입니다. 많이들 아시겠지만 국내 유명 디자인 에이전시들인 플러스엑스, studio jt, dfy 사이트가 이곳에서 노미네이트 및 수상(베스트 선정)을 하여 여전히 사이트 메인페이지 한 켠을 차지하고 있습니다.

매일매일 site of the day 라는 카테고리에서 멋진 사이트들을 소개하고 있는데, 저는 주로 이 분류에서 새로 업로드된 사이트들을 탐색하고 있습니다.

사이트들을 쭉 둘러보다 무언가 심상치않은 디자인적 공통점이 있거나 눈에 띄는 시각적/ 기술적인 부분이 발견된다면 모아서 콘텐츠로 엮어 소개해드립니다.

플랫한 그래픽 디자인을 넘어 어워드에 올라오는 사이트들은 웹개발적으로 완성도가 높아 인터랙션이 자연스럽고 액티브한 편입니다.

소개해드린 웹디자인 트렌드를 일주일 정도만 둘러 보아도 대략적인 최근 트렌드나 분야별 트렌드가 눈에 보이게 됩니다. 좋은 것을 많이 보면 자연스레 보는 눈이 좋아지고 나의 작업물에도 긍정적인 영향을 줍니다.

웹디자인이 새로운 분야라 트렌드 조사가 필요하신 분들께도 유용할 것 같습니다.

도움이 되셨다면 공감과 댓글로 응원해주세요

[디자인트렌드] 동영상 재생 느낌의 스크롤 패럴랙스 사이트

기획하는디자이너 — Mon, 14 Mar 2022 23:03:45 +0900

동영상이 재생되는 듯한 스크롤 이펙트 패럴랙스 사이트 5

애플의 신제품 홍보 페이지에서의 동영상과 같은 화려한 스크롤 인터랙션을 많이 경험해보셨을텐데요,

웹 프론트엔드 개발을 디자인과 결합하는 영역의 선구자라고도 할 수 있는 애플의 이러한 인터랙션 디자인은 최근 국내외 사이트에서 많은 적용 사례를 확인해볼 수 있습니다.

이제는 웹디자인 트렌드에서 빠질 수 없는 기술과 디자인의 결합이라고도 할 수 있습니다. 고도의 개발 기술을 요하는 인터랙션 디자인 예제를 가득 확인할 수 있는 멋진 사이트 5가지의 사례를 준비했습니다.

스크롤을 내릴수록 마치 한 편의 동영상이 재생되는 듯한 화려한 인터랙션을 확인할 수 있는 스크롤 이펙트 패럴랙스 디자인의 사이트를 소개합니다.

1. FLOEMA

floema.jewelry

floema 주얼리 브랜드 사이트는 배경에서 자동재생되는 콘텐츠들과 부드러운 인터랙션으로 스크롤을 하지 않아도 클릭 시 재생되는 효과들 만으로도 한편의 CF영상을 보는 듯한 디자인이 연출되고 있습니다.

2. vitaarchitecture

vitaarchitecture.com

vararchitecture 사이트에서 역시 자동 재생되는 백그라운드와 함께 좌우로 텍스트가 흐르는 효과를 시작으로 하단 스크롤 시 콘텐츠가 떠오르는 floating 효과와 다양한 인터랙션이 나타납니다.

마우스 오버 hover효과와 라인 드로잉 효과 등을 통해 사이트 탐색에 UX적인 즐거움을 줍니다.

3. Priestress

priestess.ca

전반적인 브랜딩도 멋지고 모든 페이지를 스크롤 이펙트를 활용한 디자인의 priestress 소개 사이트입니다.

스토리텔링 기반으로 콘텐츠가 구성되어 마치 연대기를 읽는 듯한 느낌도 드는 디자인과 인터랙션입니다. 모든 페이지와 전반적인 구성을 참고하면 좋은 사례입니다.

4. poltronaprau

takeyourtime.poltronafrau.com

poltronafrau 사이트의 주요 콘텐츠는 동영상이지만, 메뉴를 클릭하면 배경에서는 그대로 동영상이 재생되고 있는 중에 투명한 레이어 위로 펼쳐지는 메뉴의 레이아웃이 눈여겨볼만 합니다.

동영상을 중심으로 다른 메뉴로 이동할 때에도 단순히 fade in-out 되는 페이지 이동이 아닌, 위아래로 레이어가 등장하며 페이지가 변환되기 까지의 자동 인터랙션이 애니메이션으로 흘러갑니다.

각 클릭요소에 반응하는 hover 효과가 다양하면서도 매우 자연스러워 디테일이 좋은 디자인이라 할 수 있습니다.

5. COLORS COMBINATION

colors.combinations.obys.agency

한 디자인 에이전시에서 제작한 컬러 색조합 제안 디자인 사이트입니다.

추천 컬러별로 색조합과 다양한 컨텐츠에 활용된 사례 등을 전체 사이트 무드를 카메라 렌즈를 통해 들여다보는 듯한 UX로 구현하였습니다. 스크롤을 내리면 전체 컬러별 배색 조합과 포트폴리오 이미지를 한번에 볼 수 있으며, 스크롤의 끝에 다다르면 재미있는 아이디어를 확인할 수 있습니다.

스크롤 끝에 무엇이 숨어있는지 확인해보고 싶으시다면 사이트를 방문하여 탐색해보세요.

dbre 디자인 에이전시를 운영하며 youtube와 블로그 콘텐츠를 통해 디자인 트렌드와 방법론, 퍼블리싱 팁을 소개하고 있습니다.
dbre.agency@gmail.com

[디자인트렌드] 프로페셔널해 보이는 웹디자인을 위한 부가적 요소 4가지

기획하는디자이너 — Wed, 23 Feb 2022 18:00:06 +0900

프로페셔널해 보이는 웹디자인을 위한 부가적 요소 몇 가지

웹디자인에 간단한 인터랙션을 조금만 더하면 프로페셔널해 보이는 몇 가지 요소들이 있습니다.
작은 효과들로 내 사이트를 풍성한 UX web이 되도록 제작해보세요.

1. 블러 효과 filter:blur()

nike 웹사이트의 블러 효과

이전 콘텐츠에서도 한번 소개되었던 nike 사이트의 블러 효과입니다.

위와 같은 마우스오버 효과는 스크립트가 함께 추가되어야 하지만
단순한 hover 효과나 blur 효과 자체는 간단한 CSS만으로도 설정이 가능합니다.

MDN blur effect CSS

blur(0)        /* No effect */
blur(8px)      /* Blur with 8px radius */
blur(1.17rem)  /* Blur with 1.17rem radius */

블러 효과 적용을 원하는 이미지 소스의 class 에 filter:blur(블러의정도); 코드를 넣어주면 됩니다.

예를 들어 img 태그에 바로 적용 시에는 아래와 같이 작성합니다.

<style>
img {filter(blur(10px);}
</style>

<img src="/web/images/filename.jpg">

이미지에 class를 지정하여 사용하는 경우에는 아래와 같이 작성합니다.

<style>
.imgStyle {filter:blur(10px);}
</style>

<img src="/web/images/filename.jpg" class="imgStyle">

2. 컬러 텍스트 디자인 Colored text design

웹사이트 전체적으로 사용되는 모든 텍스트에 컬러를 입히는 형태의 디자인은
2022 웹디자인 트렌드 중 하나입니다.

브랜드의 메인 컬러와 보조컬러가 확실할 때 웹디자인에 적용하면 최상의 효과를 얻을 수 있습니다.

다만 주의할 점은 웹표준 가이드에서 색상 대비 기준에 미치지 못할 수 있으니 대비가 확실한 컬러를 사용해야 합니다.

MKTL 웹사이트

3. 마우스 커서 디자인 mouse cursor image

Fictional website

실시간으로 반응하는 마우스 커서 디자인은 사이트 전반의 경험에 생동감과 경쾌함을 더합니다.

사이트의 디자인 요소에 맞게 잘 디자인된 커서 디자인을 적용하여 웹디자인의 가치를 한층 올릴 수 있습니다.

4. 배경 픽스 패럴랙스 효과 (background-attachment:fixed;)

아주 간단한 css 를 통해 적용해볼 수 있는 배경 픽스 효과입니다.

사이트의 깊이감을 주어 입체적인 느낌이 들도록 하는 효과입니다.

MDN background-attachment css

다양한 attachment 효과를 MDN 문서에서 확인해보세요.

함께 보면 좋은 콘텐츠

트렌디한 웹디자인을 위한 Serif 무료 폰트 소개

쇼핑몰 상세페이지 내에 동영상 삽입하기

멋져보이는 웹사이트 포인트 - 마우스 커서 URl 이미지로 바꾸기

[cafe24] 쇼핑몰 모자이크 룩북 슬라이드 갤러리 페이지 만들기

기획하는디자이너 — Tue, 22 Feb 2022 23:31:24 +0900

cafe24 쇼핑몰 모자이크 룩북 슬라이드 갤러리 페이지 만들기

cafe24 브랜드 쇼핑몰을 오픈하려다 보면 이미지만 업로드해야하는 룩북 페이지가 고민인 분들이 많으실 것으로 생각됩니다. cafe24의 쇼핑몰 갤러리 게시판은 유료 템플릿에서도 크게 룩북 형태를 중심으로 고려되지 않은 디자인들이 많아 커스터마이징 요청사항으로 많이 들어오는 디자인 중 하나입니다.

또한 cafe24 쇼핑몰 솔루션에는 자체적으로 내부 스크립트가 내장되어있어 잘 되어있는 스크립트 라이브러리를 사용하더라도 적용이 어려운 부분이 많습니다.

cafe24 쇼핑몰 사이트에 게시판을 사용하지 않고 별도의 룩북 갤러리 페이지를 만드는 방법을 알려드립니다.

cafe24 쇼핑몰 룩북 페이지 디자인하기

우선 룩북페이지를 만들기 위해 룩북 이미지들의 정형화된 크롭 형태를 가지기 위해 figma를 이용하여 간단한 페이지 디자인을 했습니다. 포토샵으로도 이미지 크롭이 가능하지만, 반복되는 사이즈조정, 저장이 없이도 figma의 간단한 크롭 기능으로 정말 쉽게 이미지를 추출할 수 있습니다.

figma에서 추출한 동일한 사이즈의 이미지들을 cafe24 쇼핑몰 파일관리자로 접속하여 업로드합니다.
그동안 cafe24 ftp를 이용하기 위해서는 이제는 사용할 수 없는 익스플로러에서만 접근이 가능하였습니다. 또 filezila라는 별도의 ftp 서비스를 이용해야하기도 했습니다.

그렇다면 위 두 방법이 아니면 이미지 업로드가 불가능한가? 했지만 다행스럽게도 ftp 메뉴의 파일관리자에서 이미지파일 업로드를 브라우저에 관계 없이 손쉽게 진행할 수 있습니다.

cafe24 상단 메뉴 중 FTP > 좌측 메뉴 중 파일업로더 > web 폴더 내에 신규 폴더 생성 후 이미지 업로드

cafe24 웹 FTP 파일업로더 접속 방법

폴더 위쪽에 ADD 표기가 되어있는 셀렉트박스를 클릭하며 선택된 폴더의 하위 폴더를 생성할 수 있습니다.

cafe24 ftp 폴더 생성

파일업로더가 열리면 우측 파일 업로드하는 공간의 위쪽에 업로드할 이미지파일을 드래그하여 넣은 후, 상단의 Start Upload 버튼을 클릭하여 최종 파일 업로드를 완료합니다.

cafe24 ftp 파일업로더 사용 방법

이미지가 업로드된 경로는 /web/생성한하위폴더명/파일명.jpg 가 됩니다.

갤러리 스크립트 html 코드는 codepen의 nader(@Nood)라는 유저의 코드를 참고하였습니다.

See the Pen modal carousel gallery - popup images gallery by Nader (@Nood) on CodePen.

스크립트와 css 파일 모두 부트스트랩으로 가져오는 형태라 별도의 css 와 js 코드가 없습니다.

cafe24에 얹어보니 layout.html 틀 안에 넣어도 스크립트 충돌 없이 잘 작동이 되어 충돌되는 css 부분만 추가하여 적용했습니다.

전체 body 코드는 codepen 코드를 그대로 사용하시면 되고, 상단에 부트스트랩 충돌을 막아주는 css 코드만 상단 또는 연동된 css 파일 내에 추가하여 사용하시면 됩니다.

부트스트랩 충돌을 막아주는 추가 CSS 코드

<style>

#header {margin:0 auto; border:0;}
#container,
#contents {width:100%;}

  * {-webkit-box-sizing: content-box !important;}
 body {font: 0.75em "Roboto","Noto Sans KR",Verdana,Dotum,AppleGothic,sans-serif !important;
		color: #111 !important; padding:0 !important;}

 @media (min-width: 768px){
.modal-dialog {width:800px !important; margin:3% auto !important;}
     }

 .img-thumbnail {width:100% !important;margin: 0; padding:0 !important; border:0 !important; border-radius:0 !important;}
 .list-inline>li {width:25%; padding-right:0 !Important; padding-left:0 !important;}
 .list-inline>li:hover {opacity:0.7; transition:ease .3s;}
 .list-inline {margin-left:0 !important;}
 
 </style>

예시 페이지 보러가기

[cafe24] 쇼핑몰 카카오톡 1초 회원가입 팝업 만들기

기획하는디자이너 — Tue, 22 Feb 2022 01:03:44 +0900

cafe24 쇼핑몰 카카오톡 1초 회원가입 팝업 배너

cafe24 쇼핑몰에 기본으로 설치된 팝업 배너는 특정 조건에 의해 조정되지 않고 메인이나 특정 페이지에 항상 떠있도록 설정만 가능합니다. 팝업배너를 고객의 행동에 따라 맞춤형으로 띄우도록 하는 것이 쇼핑몰 UX를 고려할 때 중요하게 보아야 할 점이라고 할 수 있는데요.

예를 들어 회원가입 이전인 고객에게만 회원가입 관련 쿠폰을 띄우거나, 장바구니에 담은 제품이 있는 고객에게 장바구니 알림을 보내주는 등의 고객 맞춤형 팝업 입니다.

이런 세부 설정이 가능한 팝업을 띄울 수 있도록 하는 cafe24 쇼핑몰 인앱이 있습니다.

바로 '팝틴'입니다.

조건 설정 팝업 배너삽입 기능 팝틴

cafe24 앱스토어 팝틴 인앱 설치

cafe24 앱스토어에서 '팝틴'을 검색하여 설치 후 나의 앱스토어 관리자 마이앱에 보시면 설치한 앱 리스트에 설치된 것을 확인 할 수 있습니다.

관리하기 버튼을 클릭하여 접속하면 아래와 같이 별도의 관리 화면으로 접속됩니다.

cafe24 인앱 팝틴 관리자 화면

왼쪽 메뉴 중 POPUP 탭을 누르면 생성된 팝업 리스트가 뜨는데, 아직 생성이 되지 않았을 경우 관맂라 화면의 우측 상단 +NEW POPUP 버튼을 클릭하여 새로운 팝업을 생성할 수 있습니다.

팝틴으로 생성된 팝업 리스트

팝틴의 팝업 템플릿

새 팝업 만들기를 진행하면 제공되는 다양한 템플릿을 이용하거나 별도로 html 코드를 넣어 나만의 팝업 디자인을 만들 수 있습니다. poptin은 해외 서비스가 국내에 도입된 사례라 cafe24의 쇼핑 데이터 맞춤형이라기보다는, 접속자와 브라우저와의 관계성에서 조건 설정이 다양하게 가능하다고 볼 수 있습니다.

예를 들어 1번 접속한 사람이나, 5번 접속한 사람에게 팝업 띄우기
스크롤 50% 정도 내렸을 때 팝업 띄우기 등 화면상의 인터랙션에 의한 부분들을 조건으로 설정이 가능합니다.

cafe24 팝틴 기간 할인 관련 팝업 템플릿

위 팝업은 쿠폰의 사용기한을 알리는 팝업인데요, 이 팝업은 쇼핑몰의 기간별 쿠폰이나 타임세일 등의 마케팅 이용 시 활용해볼 수 있습니다.

최근 국내 쇼핑몰에서 가장 대표적으로 활용되는 팝업 사례는 '카카오톡 1초 회원가입' 팝업이 있습니다.

팝틴으로 제작한 cafe24 쇼핑몰 카카오톡 1초 회원가입 팝업 배너

팝틴에서 기본형 팝업 디자인을 선택 후 팝업 디자인의 내용과 버튼 컬러로 간단하게 팝업 디자인을 만들어볼 수 있습니다. 디자인 생성을 완료한 뒤 우측 상단의 NEXT 버튼을 클릭하여 'display rules'를 설정할 수 있는 메뉴로 접근이 가능한데요.

display rules 란 팝업을 띄울 조건을 설정하는 기능입니다.

팝틴의 display rules

몇 분 간격으로 팝업을 띄워줄 지, 페이지 스크롤은 얼마나 내리면 팝업을 띄워줄 지, 페이지 내 몇번의 클릭 뒤에 팝업을 띄울 지 등 고객의 행동과 관련하 타겟화된 팝업의 UX 설정이 가능합니다.

팝틴의 display rules 신규고객 / 재방문 고객

하단의 display frequency 메뉴를 통해 방문자 모두에게 보여줄지, 새로 들어온 사람만 보여줄지, 재방문 고객에게 띄워줄지 등을 설정도 가능합니다.

재방문 고객에게만 띄우도록 하는 팝업을 설정해두면 재방문 시 '또 오셨네요!'와 같은 맞춤형 카피문구도 적용하여 고객과 긴밀한 소통이 가능해집니다.

팝틴의 활용 가능한 모듈 리스트

이 외에도 구글 애드센스와도 연동 가능할 정도의 세부적인 조건 설정들이 가능한데, 일부 기능은 유료 기능으로 제공되고 있습니다.

팝틴은 무료로도 사용 가능한 툴이지만, 무료로 사용할 경우 하단에 poptin 워터마크의 삭제가 불가능하다는 점이 있습니다. 월별 결제시 월 25$ 상당으로 비교적 저렴한 가격에 많은 기능을 활용할 수 있기에 유료 서비스를 사용해보는 것도 고려할 만 합니다.

카카오 1초 회원가입 배너

cafe24 인앱 팝틴 팝업 배너의 무궁무진한 사용성을 활용하여 여러분의 cafe24 쇼핑몰 운영에 많은 도움이 되었으면 하는 바람입니다.

[cafe24] 자동메일 발송 레이아웃 디자인 변경하는 방법

기획하는디자이너 — Sat, 19 Feb 2022 02:51:36 +0900

cafe24의 자동발송메일 기본 디자인 예시

cafe24 쇼핑몰 솔루션 이용 시 시스템에서 자동 발송되는 메일을 자동/수동으로 설정할 수 있습니다.

또한 아래 방법을 사용하여 이 자동메일 발송에서 메일의 내용이나 디자인도 변경이 가능합니다.
디자인 변경은 html을 사용하여 수정합니다.

cafe24 쇼핑몰에서 자동 발송 메일 레이아웃 디자인 변경하기

1. 고객관리 > 자동메일발송설정 > 자동메일발송설정 메뉴로 접속합니다.

2. 자동메일 발송 리스트 중 수정하고자 하는 메일을 선택하여 우측의 '수정'버튼을 클릭합니다.

3. 수정 창이 뜨면 html 모드에서 디자인을 코드로 수정합니다.

에디터 상단 메뉴 우측의 <> 버튼으로 코드보기 후 코드 수정

자동 발송 이메일 디자인 활용 방법

803스튜디오 브랜드의 웹메일 발송 템플릿 예시

자동 발송용 이메일의 템플릿 디자인도 구독용 이메일 템플릿의 방식처럼 웹사이트의 카테고리 링크를 넣어 미니 웹사이트처럼 제작하면 고객을 대상으로 브랜드 가치를 높이는 데에 도움이 됩니다.

digital crea의 이벤트성 메일 발송 템플릿 예시

특정 기간 내에는 이벤트성 카드 배너 이미지와 함께 발송이 되도록 수정하는 것도 하나의 마케팅 수단으로서 활용해볼 수 있습니다. (실제 광고 텍스트가 들어간 이미지나 링크를 넣으면 '광고 표기 위반' 일 수 있습니다)

나이키의 자동 발송 메일 스타일

가장 심플하게 텍스트와 라인으로만 이루어진 디자인도 깔끔한 인상을 줄 수 있을 것 같습니다.

도움이 되셨다면 공감과 댓글로 응원해주세요!

모니터 색상과 가장 유사한 컬러로 인쇄하는 방법

기획하는디자이너 — Thu, 17 Feb 2022 23:17:35 +0900

인쇄용 그래픽 디자인은 주로 CMYK 컬러로 제작됩니다.

그런데 인쇄할 때 색상이 컴퓨터로 볼 떄의 색상과 많이 달랐던 경험이 있는 디자이너 분들이 많으실텐데요. CMYK 컬러를 팬톤 컬러 코드로 변경한 뒤 인쇄소에 팬톤값으로 전달하면 더 실제 색상과 유사한 색으로 인쇄가 가능합니다.

그래픽 프로그램에서 사용하는 CMYK 컬러 코드를 팬톤 컬러 값으로 변환하는 방법입니다.

1. CMYK 값을 팬톤 컬러 값으로 변환하여 인쇄하기

cmyk to pantone 구글링

구글에서 cmyk to pantone 이라는 키워드로 검색하면 가장 먼저 뜨는 사이트로 접속합니다.

사이트 상단에 보시면 CMYK 각각의 코드 값을 넣어주는 필드가 있는데요.

여기에 내가 작업한 그래픽 파일의 각 컬러 값을 넣어주면 실제 팬톤 컬러 값으로 변환된 유사한 컬러들이 필터링됩니다. 사진으로 된 이미지 류에는 적용이 어려우나, 메인 색상으로 사용하는 대표적인 컬러값들은 팬톤컬러를 맞춰주면 모니터와 가장 유사한 컬러로 인쇄된 인쇄물을 받아볼 수 있습니다.

일러스트레이터에서 CMYK 코드 확인

위와 같이 가장 간단한 예시로 명함을 인쇄한다고 했을 때, 옅은 노랑색이 브랜드의 메인 컬러라면 이 컬러는 실제 색상과 가장 유사한 컬러를 사용해야 브랜드 가이드에 맞기에 팬톤 컬러를 지정하여 인쇄하는 방향으로 작업하는 것이 좋습니다.

위 이미지에서 노랑색 컬러의 CMYK 값은 C 9% / M 0% / Y 64% / K 0% 입니다.

CMYK to pantone 변환 화면

다시 cmyk to pantone 사이트로 돌아와서 해당 CMYK 값을 각 필드에 넣어 검색합니다.

그러면 이렇게 유사한 팬톤 컬러 칩을 제안해주는데요, 이 때 보기에 가장 내가 표현하고자 하는 컬러에 가까운 팬톤 컬러코드를 선택하면 됩니다.

하지만 인쇄의 컬러는 종이 종류나 질감에도 큰 영향을 받는데요.

이럴 때는 실제 팬톤 컬러 칩으로 인쇄된 감리용 컬러차트 북 등을 활용하는 것이 좋습니다.
이러한 컬러차트 북은 다양한 곳에서 제작하고 있으며, 종이의 종류에 따라 또는 후가공(코팅) 등에 따라 달라지는 컬러의 모습도 확인할 수 있습니다.

2. 컬러 차트 북에서 최대한 유사한 컬러 찾기

만약 팬톤 컬러 차트 북이 없고 CMYK 컬러 차트 북만 있다면 팬톤코드로 변환하지 않고, 해당 차트 북에서 인쇄된 종이의 느낌상 컬러가 가장 유사한 cmyk 값으로 인쇄하는 것도 방법일 수 있습니다.

본래 브랜드 컬러를 지정할 경우에는 인쇄 시 사용하는 CMYK 값을 따로 가이드로 지정해두기도 합니다.

종이의 종류에 따라 CMYK 컬러 값으로 인쇄된 인쇄 가이드 북에서 유사한 CMYK 값을 찾아 해당 값으로 바꾸어 인쇄를 해도 무방합니다.

직관적으로 펼쳐보는 컬러 인쇄 가이드 북

위와 같이 컬러 북에서 cmyk 값과 상관 없이 가장 유사하게 인쇄된 컬러를 찾아 해당 값으로 바꾸어 인쇄를 주문합니다.

특히나 RGB 값과 CMYK 값은 많은 차이를 보이고 있기에, 인쇄물을 RGB 값을 이용한 파일로 제작하여 맡기는 경우 전량 폐기해야 하는 불상사가 발생할 수도 있으니 인쇄물 제작 전 꼭 확인해보시기 바랍니다.

도움이 되셨다면 공감과 댓글로 응원해주세요

[디자인트렌드] behance 국가별 최신 디자인 트렌드 확인하는 방법

기획하는디자이너 — Thu, 17 Feb 2022 03:57:25 +0900

behance 사이트에서 디자인 트렌드를 서치하시나요?

그렇다면 메인에 뜬 추천 디자인이나 검색을 통한 추천디자인만 보고 계시지는 않나요?

behance 메인페이지

비핸스 사이트에서 국가별 최신 디자인 트렌드를 확인할 수 있는 방법을 알려드립니다.

behance에서 국가별 최신 디자인 트렌드 확인하는 방법

비핸스(비한스) 메인 페이지에는 알고리즘을 통한 추천 포트폴리오가 굿디자인 위주로 리스팅 됩니다.
검색을 해도 키워드에 최적화된 포트폴리오가 최신순이 아닌 상태로 필터링 되는데요,

검색 하단의 필터 셀렉트 박스에서 Location > Country / Region 및 City 를 선택하면 해당 국가와 도시에 업로드된 포트폴리오를 확인할 수 있습니다.

특정 지역을 대상으로 하니 해당 지역 또는 국가의 트렌드를 확인해볼 수 있다는 장점이 있습니다.

하지만 특정 지역으로 필터링 해도 여전히 추천순으로 알고리즘을 통해 추천된 포트폴리오만 확인이 되는데요, 여기서 상단 우측의 sort 부분에서 Recommended로 되어있는 셀렉트 박스를 클릭하면 다양한 옵션으로 sorting이 가능합니다.

저는 최신순을 확인하기 위해 most recent를 선택합니다.

country / region 선택, most recent 선택으로 해당 국가의 최신 포트폴리오를 확인할 수 있습니다.

위 캡처 이미지는 독일의 최신 포트폴리오입니다.

위 캡처 이미지는 미국의 최신 포트폴리오입니다.

제가 캡처한 이미지만으로 단정짓기는 어려우나, 각 국가에서 실시간으로 최근에 업로드 된 디자이너들의 작품을 볼 수 있다는 것으로도 큰 의의가 있을 것 같습니다. 또한 전체적인 리스트 스크롤링을 하다 보면 대략적인 국가별 트렌드도 눈에 들어오지 않을까 합니다.

behance 사이트는 전세계 디자이너들의 포트폴리오로 눈을 높이면서 동시에 트렌드 확인이 가능하기에 필터 옵션을 조금만 추가하면 나에게 맞춤형으로 활용할 수 있는 고마운 사이트입니다.

도움이 되셨다면 공감과 댓글로 응원해주세요

[UI/UX] 토스 페이먼츠 결제 UX 사례 스터디

기획하는디자이너 — Tue, 15 Feb 2022 04:33:26 +0900

최근 토스 페이먼츠 결제를 처음 해봤습니다.

기존 PG사 결제와 다르게 역시 토스답게 가장 편리한 UX를 구현한 것 같아 공유합니다.

우선 온라인 쇼핑몰에서 토스페이먼츠로 결제하기를 누르면 위와 같은 팝업 창이 뜹니다.

로그인, 이름, 주민등록번호 앞자리, 휴대폰인증 등 다 생략하고 휴대폰번호와 생년월일 6자리만 입력하면 해당 정보로 가입한 계정이 토스앱에서 결제할 수 있도록 연동됩니다.

문자를 보내고 또 링크를 클릭하는 게 아니라 바로 앱에서 결제 알림을 보내주니 정말 편하더라구요.

'혹시, 알림이 안 왔나요?'와 같은 마이크로카피도 토스가 잘 하는 부분 중 하나죠.

대화형 마이크로카피로 고객에게 친숙한 서비스로 인식되고 있습니다.

토스페이먼츠로 결제 시 연계 제공되는 할인 혜택과 함께 놀라웠던 것은, 토스 포인트를 사용하여 할인받을 수 있다는 점이었는데요.

최근에 토스로 주식거래를 자주 하다보니 '혜택' 탭에서 매주 받는 포인트나 만보기를 통해 받는 포인트들 모으는 재미가 쏠쏠했거든요. 그런데 이 포인트를 토스페이먼츠로 결제할 때 사용할 수 있다니 놀라웠습니다...!

그간의 카드사나 제휴 포인트 제도가 각각 따로 노는 느낌이었다면 토스는 그간의 포인트 사용 방식을 획기적으로 1차선으로 만들어놓은 느낌입니다.

사용할 포인트 금액을 입력하고 확인을 클릭하면 다시 결제중이던 사이트에서 결제를 완료할 수 있습니다.

토스에는 도대체 어떤 분들이 근무하는걸까요...!
매번 토스 앱 사용하면서 업그레이드되는 서비스와 UX를 보며 서비스기획자로서 참 많이 배웁니다.

[cafe24] 상세페이지 내에 동영상 삽입하기

기획하는디자이너 — Fri, 11 Feb 2022 17:43:39 +0900

cafe24 쇼핑몰 상세페이지 내 동영상 삽입하기

cafe24 쇼핑몰의 상세페이지를 전체 통이미지가 아닌 html로 작성하여 동영상을 삽입할 수 있습니다.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

iframe은 뒤쳐진 기술인 듯 최근 활발히 사용되는 태그는 아닙니다만 여전히 동영상 삽입 코드로 iframe이 사용되고 있습니다.

1. 삽입할 동영상의 url을 준비합니다.

동영상을 업로드하거나, 업로드된 동영상 하단의 '공유'버튼을 클릭하여 url을 추출합니다.

2. 상세페이지 이미지를 cafe24 쇼핑몰 관리자의 ftp에 업로드합니다.

cafe24 쇼핑몰 관리자 접속 > ftp (상단 우측메뉴) > 파일 업로더 (좌측메뉴)

폴더는 별도로 생성하거나 사용하고 있는 이미지 폴더에 넣고 해당 경로를 포함한 이미지 URL을 추출합니다.
전체 상세페이지에서 동영상이 삽입될 위치 기준 위 아래로 이미지를 삽입할 수 있도록 이미지를 잘라준 뒤 업로드합니다.

ex) 폴더 경로 web > upload 인 경우
이미지 url : www.yourdomain.com/web/upload/image/01.jpg

cafe24 ftp 접속하여 이미지 파일 업로드

3. 삽입할 동영상의 url 중 변수처리된 키값을 아래 코드의 키값에 넣어줍니다.

유튜브 동영상 url 키값

아래 코드 중 ~/embed/키값 부분을 수정합니다. 반복 재생을 위해 키값은 두번 삽입되어있는 부분을 확인하여 수정하세요.

<div style="max-width: 860px; width: 100%; margin: 0 auto;">
<img src="http://dbre.co.kr/dbre/ref-01/001.jpg" style="max-width: 100%;"><br><div style="position: relative; max-width: 860px; width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden;">
<iframe src='https://www.youtube.com/embed/o6RQQbEn5mY?&amp;rel=0&amp;controls=0&amp;showinfo=0&amp;playlist=o6RQQbEn5mY&amp;loop=1&amp;autoplay=1&amp;mute=1;' frameborder='0' allowfullscreen style="position: absolute; left: 0; top: 0; width: 100%; height: 100%;">
</iframe>
</div>
<img src="http://dbre.co.kr/dbre/ref-01/002.jpg" style="max-width: 100%;"><div>

❗️cafe24 쇼핑몰의 상세페이지 html 에디터는 코드 작성 시 불필요한 띄어쓰기나 줄바꿈(enter)을 넣어 작성할 경우 브라우저에서 보여지는 페이지에 여백이 삽입될 수 있으므로, 코드 작성시에는 확인 후 코드를 붙여서 작성하시는 것이 좋습니다.

youtube iframe 소스를 활용한 내용이며, 상하단 프레임을 최소화 및 자동재생 변수가 처리되어 있습니다.

유튜브 공유하기 소스 옵션에서 더 다양한 변수를 활용할 수 있습니다.
공유하기 소스 옵션은 구글에 'YouTube 내장 플레이어 및 플레이어 매개변수'를 검색하여 다양한 변수 옵션을 수정해보세요.

유튜브 내장 플레이어 매개변수

4. 쇼핑몰 관리 > 상품관리 내 상세설명 모드는 '직접작성' 탭을 선택하고 우측 상단의 ... 버튼을 클릭하여 html 모드로 변경한 뒤 코드를 삽입합니다.

모바일 버전에도 동일한 소스를 넣으면 반응형으로 노출됩니다. (모바일 버전의 상세페이지 사용하지 않는 경우 무관)

결과 보기

See the Pen cafe24 product detail video by leejinam (@leejinam) on CodePen.

도움이 되셨다면 댓글로 응원해주세요.

cafe24 쇼핑몰 메인 하단에 인스타그램 연동 설치하는 방법

기획하는디자이너 — Thu, 10 Feb 2022 22:03:10 +0900

cafe24 쇼핑몰에 인스타그램 연동하기

쇼핑몰 디자인 트렌드로 메인페이지 내에 인스타그램 콘텐츠 연동을 많이 사용하고 있습니다.

cafe24 쇼핑몰 무료 템플릿에는 인스타그램이 연동되어있지 않아 별도로 연동 설치가 필요한데요, 무료로 인스타그램 위젯 설치하고 연동하는 방법입니다.

cafe24 쇼핑몰 인스타그램 연동하기

1. cafe24 쇼핑몰 관리자에 로그인합니다.

https://eclogin.cafe24.com/Shop/

2. 스마트모드로 접속된 경우 좌측 상단에서 프로모드로 변경하고, 상단 메뉴의 제일 오른쪽에 있는 '앱스토어' 메뉴를 클릭합니다.

cafe24 앱스토어란?
cafe24의 앱스토어는 cafe24에서 무료로 제공하는 다양한 api를 앱의 형태로 설치하여 관리할 수 있는 플랫폼입니다. 다양한 기능으로 개발된 앱들을 검색하여 무료 또는 유료로 사용할 수 있습니다.

3. 앱스토어 페이지 내의 우측 '스토어바로가기' 버튼을 클릭합니다.

4. 앱스토어에 접속하여 상단 검색 아이콘을 클릭합니다.

5. 검색어에 '인스타그램'을 입력하여 검색합니다.

6. 검색 내역 중 '인스타그램 위젯'을 선택하여 설치합니다.

cafe24 쇼핑몰 인스타그램 위젯 설치하기

7. 권한 동의 후 설치를 완료합니다.

8. 완료 팝업창에서 '확인'버튼을 누르면 인스타그램 위젯 메인화면으로 이동합니다.

❗ 설치가 완료된 경우 cafe24 쇼핑몰 관리자 화면에서 '앱스토어'로 이동 시 하단에 설치된 위젯 리스트에 보여지며, 해당 위젯의 '관리하기'버튼을 눌러 위젯 관리 화면으로 언제든 재접속이 가능합니다.

인스타그램 위젯 관리화면 바로가기

9. 좌측 패널의 페이스북 로그인 버튼을 눌러 페이스북 계정을 연결합니다.

10. 페이스북 계정과 연동된 인스타그램 계정 중 사이트에 노출할 계정을 선택 후 확인을 클릭합니다.

페이스북 계정이 정상적으로 로그인되면 해당 페이스북 계정과 연동된 인스타그램 계정이 뜨게 됩니다. 만약 인스타그램 계정이 보이지 않는다면, 로그인한 페이스북 계정과 연동할 인스타그램을 서로 연동되도록 인스타그램에서 설정해주면 됩니다.

11. 계정 연결이 완료되면 좌측 패널에서 '선택창 열기'를 클릭합니다.

cafe24의 무료 인스타그램 위젯은 인스타그램 계정에서 최신글을 최신순으로 불러오거나, 원하는 글만 선택하여 노출시킬 수 있습니다.

12. 계정 이미지를 최신글 순으로 불러오거나, 개별 선택하여 저장합니다.

인스타그램 이미지 불러오기 최근 업로드순 60개 선택

13. 불러온 이미지의 사이즈와 갤러리/슬라이드 방식 등 옵션을 선택 후 저장합니다.

표시방식 설정 : 그리드 / 썸네일 크기 S

표시방식 설정 : 그리드 / 썸네일 크기 S

표시방식 설정 : 그리드 / 썸네일 크기 M

표시방식 설정 : 그리드 / 썸네일 크기 M

표시방식 설정 : 그리드 / 썸네일 크기 : L

표시방식 설정 : 그리드 / 썸네일 크기 L

표시방식 설정 : 슬라이드 / 효과설정 : 기본

표시방식 설정 : 슬라이드 / 효과설정 : 기본

표시방식 설정 : 슬라이드 / 효과설정 : 페이드

표시방식 설정 : 슬라이드 / 효과설정 페이드

표시방식 설정 : 슬라이드 / 효과설정 : 3D

표시방식 설정 : 슬라이드 / 효과설정 3D

슬라이드 선택 시 슬라이드 재생 방식을 자동/수동으로 수정하거나, 단일 슬라이드 또는 3D레이어 형태의 슬라이드 등으로 디자인 변경이 가능합니다.

그리드 선택 시 기본적으로 제공되는 디자인은 이미지 사이즈에 맞추어 인스타그램 영역을 감싸고 있는 사이즈와 별개로 내부에서 스크롤 되는 형태가 고정입니다.

위젯의 테두리 없애기

위젯의 테두리를 없애려면 디자인 설정 탭에서 테두리 체크 박스를 해제합니다.

14. 하단의 저장버튼을 클릭하면 뜨는 팝업창에서 '클립보드에 복사하기'버튼을 눌러 소스를 복사합니다.

해당 코드를 디자인 관리자의 코드에 원하는 페이지와 위치에 넣으면 인스타그램 위젯이 설정한대로 연동됩니다. 디자인관리 접속 방법은 현재 팝업의 하단 'PC 스마트디자인 편집창' 버튼을 눌러 이동합니다.

또는 cafe24 쇼핑몰 관리자의 디자인관리(PC), 모바일디자인(mobile) 에서도 접속하여 소스를 붙여넣기 할 수 있습니다.

15. 메인 페이지인 index.html 파일에 소스를 붙여넣기 합니다.

cafe24의 무료 템플릿인 '하바나' 템플릿 디자인에는 이미 해당 소스가 장착되어있어 인스타그램 위젯 위치에 바로 연동됩니다.

16. 쇼핑몰 메인 하단에 인스타그램 위젯이 정상적으로 연동 완료된 모습

모바일도 동일한 방법으로 같은 소스를 스마트디자인 편집창에서 메인 페이지에 붙여넣기 하면 적용됩니다.

인스타그램의 api 사용이 무료였을 때는 해외에서 제공하는 다양한 위젯을 사용해도 되었지만, api 사용이 유료로 변경되면서 무료 위젯들이 서비스를 종료하게 되었습니다.

따라서 cafe24에서 직접 무료로 설치할 수 있는 위젯을 제공하고 있습니다만, 무료 위젯인 만큼 그리드 개수 수정이나 내용 출력 등 세부 디자인 옵션의 설정에 한계는 있습니다.

궁금하신 점이나 의견은 댓글 남겨주세요.

2022 웹디자인 트렌드 - 탑 명품 브랜드 5 웹사이트 뜯어보기

기획하는디자이너 — Tue, 8 Feb 2022 15:17:29 +0900

명품 브랜드의 웹사이트는 보통 어느 나라에서든 원활한 접근이 가능하도록 호환성을 높이고 누구나 편하게 볼 수 있도록 직관적인 UI를 사용하고 있기에 장식적 디자인 요소가 많은 편은 아닙니다. 폰트는 영문 위주이며 국가에 따라 기본이 되는 산세리프, 세리프 폰트를 사용하고 있습니다.

그럼에도 브랜드마다의 UI적 특성이 조금씩 다르고 또 보통의 브랜드 사이트들과 대표적 차이가 있는 부분들이 있어 몇 가지 명품 브랜드 웹사이트를 탐색해봤습니다.

1. 보테가 베네타

#기본레이아웃 #심플

보테가베네타의 글로벌 웹사이트 PC 버전과 모바일버전

보테가 베네타의 메인 이미지는 심플하게 대표 아이템의 아트워크 이미지 배너 1개로 구성 되어있습니다. 모바일 사이즈와 동일한 이미지를 PC에 사용하였고 PC버전 사이트 wrap 가로 사이즈는 1440px을 사용하고 있습니다.

보테가베네타 글로벌 웹사이트 메가메뉴

글로벌 웹사이트인 명품 브랜드들의 대표적인 특징은 mega menu를 사용하고 있다는 점입니다. 메가메뉴는 카테고리가 많고 어디서나 볼 수 있는 gnb에 그래픽 배너를 넣을 수 있는 장점이 있습니다. gnb 메뉴는 웹사이트의 구성 중 가장 중요하고 접근 가능성이 높은 곳이라고 할 수 있습니다.

보테가 베네타에서도 이러한 메가 메뉴를 사용하여 큰 분류인 여성/남성/선물로 구분한 뒤 각 카테고리의 전체 사이트맵과 같이 펼친 상태로 메뉴를 한번에 접근할 수 있도록 구현하고 있습니다.

보테가 베네타의 상품 리스트

보테가 베네타 글로벌 웹사이트의 스토어 페이지 내 상품리스트는 4열로 배치되어있고, 세로 길이가 그리 길지 않은 직사각형의 형태입니다. 썸네일은 심플한 그레이톤으로 구성되어 마우스 오버 시 제품의 옆모습, 의류 제품의 경우 뒷모습을 보여주는 형태로 구현되어 있습니다.

마우스 오버 시 해당 상품의 컬러 블록도 바로 확인 가능하여 쇼핑몰 이용에 편리함을 주고 있습니다.

상품 상세페이지는 모바일 버전에서 특징적인 부분이 있었는데 상품의 더보기 이미지를 양쪽 스와이프로 구현하면서도 양쪽에 더 이미지가 있다는 것을 직관적으로 확인할 수 있도록 양쪽 이미지의 일부를 보여주는 형태로 구현한 점입니다.

또한 검색 버튼은 우측에서 나타나는 레이어 팝업으로 추천 검색어가 보여지고, 배경은 dim 처리 되어 검색에 집중할 수 있도록 구현되어 있습니다.

전 세계를 대상으로 하는 글로벌 브랜드이기에 국가/지역 선택의 기능도 눈여겨 보았는데요,
대륙별로 언어가 지원되는 국가별 리스트가 나타는 탭 형태의 레이어 팝업으로 구현했습니다.

전반적으로 보테가베네타의 글로벌 웹사이트는 화이트 배경 + 블랙 텍스트로 제품 이미지와 메인 로고의 브랜드 컬러를 강조한 군더더기 없이 깔끔하고 기본적인 형태를 유지하고 있었습니다.

2. 샤넬

샤넬의 글로벌 사이트입니다.

상단에 샤넬 패키지에서 볼 수 있는 블랙라인을 넣어 브랜드 아이덴티티 요소로 사용하고 있습니다. 풀 와이드 사이즈를 지원하여 메인페이지 하단으로는 컬렉션 런웨이 영상, 캠페인 콘텐츠 등이 풀화면 슬라이드처럼 구성되어 있습니다.
풀화면 슬라이드 시 배경 이미지 영역에 패럴랙스 효과가 적용되어 시간차로 약간의 재미를 주고 있습니다.

다만 콘텐츠 영역만 풀화면으로 상단 gnb의 유틸메뉴 영역은 1342px을 유지하고 있습니다.

샤넬도 역시 메가메뉴를 사용하고 있었는데요, 상단 메뉴 영역은 스크롤 시 자동으로 사라지며, 위로 스크롤 할 때만 나타나고 아래로 스크롤 시에는 로고만 나타나도록 하여 콘텐츠를 탐색하는 동안 깔끔하게 로고만 보여지는 형태로 집중 영역에만 집중할 수 있도록 불필요한 요소를 줄인 것을 확인할 수 있었습니다.

전체 메가메뉴는 왼쪽에 해당 카테고리의 메인 역할을 하는 홈 화면으로 갈 수 있도록 이미지 배너를 사용하고 있습니다.

샤넬의 메가메뉴에서 사용된 홈 바로가기 이미지 배너는 모바일 버전에서도 이렇게 동일하게 구현되어 일관성을 유지하고 있습니다. 반응형에 최적화되어 가로로 나열된 디자인을 세로로 나열 형식만 변경한 것을 볼 수 있습니다.

샤넬의 글로벌 웹사이트의 가장 큰 특징은 상단의 블랙 라인이 샤넬의 아이덴티티를 대변한다는 점입니다. 가장 심플한 표현으로 가장 샤넬다운 디자인을 구현하고 있다는 것이 인상적입니다.

3. 구찌

구찌의 글로벌 웹사이트는 완전한 풀 와이드 사이즈로 구현되어 있습니다.

우측으로 자동 슬라이드 되는 메인 배너와 텍스트 + 버튼 조합의 일반적인 갤러리 슬라이드를 메인에 적용하고 있고, 스크롤 하여 대표 제품을 소개하고 각 룩북 이미지를 매거진 레이아웃으로 배치하여 재미를 주고 있습니다.

구찌 사이트에서 특징적인 부분은 상단 gnb 영역의 배경 컬러를 그라디언트로 표현하여 고급스러운 느낌을 만들어냈다는 점입니다. 그라디언트 상단 메뉴는 실제로 종종 사용되기는 하지만 그리 많은 사이트에서 본 디자인은 아니라 유니크한 느낌도 줍니다.

웹사이트 첫 접속 시 마주하는 가장 중요한 슬라이드 이미지에서 동영상 또는 이미지 콘텐츠에 주목할 수 있도록 레이아웃을 구분하지 않고 자연스럽게 표현하기 위해 이미지와 잘 어우러지는 그라디언트를 채택한 듯 합니다.

스크롤 시 상단 메뉴의 컬러는 블랙으로 채워져 메뉴로의 접근이 더욱 원활하도록 변경되는 인터랙션으로 구현되었습니다.

상품 리스트의 인터랙션도 재미 있었는데요, 상품 썸네일은 그레이톤 누끼 배경으로 제품에 집중할 수 있도록 하면서도 마우스 오버 시 백그라운드가 화이트 컬러로 변경되며 탐색하고 있는 제품에 하이라이트 효과를 주고 있습니다.

또한 제품의 상세 페이지에 접근하지 않아도 좌우로 스크롤하여 제품의 다른 이미지를 탐색할 수 있도록 하였습니다.

레이아웃 상에서 또 한가지 독특한 점은 제품의 이미지 영역과 텍스트 영역이 마우스 오버시 분리되어 표현된다는 점입니다. 위 캡처 이미지에서 흰색 라인 또는 여백으로 상품에 그리드가 생성이 되는데, 마우스 오버하여 나타나는 상품명과 금액 등 텍스트 영역이 이 그리드를 벗어나게 표현이 되고 있습니다.

지정된 그리드에서 벗어난 영역이지만 그 영역들끼리의 규칙이 있어 재미를 주는 인터랙션이 되고 있습니다.

구찌 역시 메가메뉴를 사용하고 있습니다.

구찌 사이트의 메가메뉴는 중간에 작은 이미지 슬라이드배너까지 사용함으로서, 분류 보기 자체에서도 접근성을 최대화한 것을 볼 수 있습니다.

4. 에르메스

에르메스의 글로벌 웹사이트는 고급스러운 베이지톤이 전반적으로 깔려 있어 차분한 느낌을 주고 있습니다.

gnb 영역에서 좌우 메뉴들과 로고의 배치 역시, 로고 그래픽이 주는 느낌 때문인지 여백이 많고 텍스트가 작고, 메뉴 영역을 풀사이즈가 아닌 모바일의 햄버거 메뉴 형태를 PC버전에서도 사용함으로써 심플한 느낌입니다.

전체 가로 사이즈는 1667px, 콘텐츠 영역은 1303px의 사이즈를 사용하고 있습니다.

햄버거 메뉴 클릭 시 우측에서 모바일 메뉴와 같은 가로 사이즈의 스크롤 가능한 팝업 메뉴가 나타납니다.
에르메스 사이트 역시 메뉴 팝업에서 이미지 배너를 함께 사용하고 있어 콘텐츠를 강조한 점을 확인할 수 있습니다.

에르메스 글로벌 사이트의 한국어 버전

에르메스 글로벌 사이트의 영문 버전

메인페이지는 콘텐츠 영역을 유지하며 다소 널찍한 여백을 활용하고 있습니다. 에르메스의 국내 버전 사이트에서는 상품 하단의 텍스트나 중간에 보이는 middle 사이즈의 텍스트들이 사이즈가 약간 어색한 것을 볼 수 있는데요, 에르메스의 사이트 전반에서 사용하는 대표 폰트 디자인의 특성상 차이로 보입니다.

에르메스 글로벌 웹사이트의 상품 상세보기 페이지

에르메스 사이트의 상품 상세보기 페이지 내 이미지 확대보기 레이어에서 보여주는 최대 이미지의 화질이 정말 좋아 조금 놀랐는데요, 웹용 webp 이미지를 사용하지 않았을까 확인해보았으나, 1700px 짜리 jpg 파일을 사용하고 있었습니다.

브랜드의 명품 가치를 웹상에서도 고급스러운 이미지를 통해 표현하고 있는 듯 합니다.

5. 지방시

지방시의 글로벌 웹사이트에서도 브랜드의 아이덴티티를 표현하고자 한 특징적인 부분이 있었습니다.

gnb 영역에서 로고와 좌우 메뉴가 middle 정렬이 기본이라면, 지방시 웹사이트에서는 로고를 정가운데 배치하면서도 상하 여백을 좌우의 메뉴의 여백과 차이를 두어 정중앙에 위치한 로고에 위엄있는 중압감을 주는 듯한 느낌입니다.

이 로고는 메인페이지에서 스크롤 시에도 동일한 위치에 고정되어 콘텐츠와 로고의 고급스러운 조합을 계속 탐색할 수 있도록 합니다.

또한 콘텐츠의 분위기를 만들어내는 메인 컬러를 잡아 세로로 스크롤되는 풀 스크린 슬라이드에 따라 배경 과 로고색을 변경해줌에 따라 한 페이지에 구성된 콘텐츠임에도, 스크롤 시마다 각 콘텐츠에 독립적으로 집중할 수 있는 환경을 제공하고 있습니다.

배경, 메뉴 등 텍스트, 로고 의 컬러를 슬라이드에 따라 변경되는 컬러로 동일하게 변경해주고 있어 하나의 사이트에서 다양한 UX를 제공하고 있습니다. 컬러의 조합들이 고급스럽고, 로고가 가운데에 위엄있게 배치됨에 따라 브랜드의 이미지를 경험적으로 느낄 수 있어 디자인적으로 즐거운 경험이라 생각됩니다.

상품 리스트는 제품 이미지를 정면/측면/착용컷 등으로 제품 특성을 잘 살려내는 썸네일 이미지를 다양하게 사용하고 있습니다.

지방시 사이트의 상품 상세페이지는 제품의 큰 이미지를 좌우 50%로 배치하여 이미지 위주로 제품을 탐색하기에 최적화되어있다고 볼 수 있을 것 같습니다. 이외 상품에 대한 세부 정보는 모두 클릭하여 레이어 팝업으로 추가 확인이 가능하도록 우측 정보 영역의 요소는 최소화한 것을 확인할 수 있습니다.

지방시 사이트의 모바일버전에서도 역시 중심에 로고가 배치되어 gnb영역에 국한된 것이 아닌 콘텐츠와 어우러지는 디자인을 연출하고 있습니다.

위 5가지 브랜드 사례에서 확인한 글로벌 브랜드 사이트의 공통적 특징을 정리해보았습니다.

1. 영어 외의 언어는 각 언어의 대표적인 serif / san-serif를 사용

2. 메가 메뉴 + 이미지 배너 사용

3. 완전한 반응형

4. 컬렉션 / 캠페인 이미지를 강조하는 디자인

5. 쇼핑 친화적 & 콘텐츠 탐색 친화적 2가지 성격으로 나뉨

명품 소비 시장은 여전히 오프라인이 강세이긴 하지만, 온라인으로도 점차 확대 됨에 따라 브랜드 공식 웹사이트에서도 온라인 스토어를 오픈하고 직접 구매가 가능하도록 기능을 추가하고 있는 추세입니다.

이에 따라 편리한 UI/UX를 구현하면서도 뻔하지 않고 고급스러운 이미지와 명품으로서의 가치를 드러낼 수 있는 요소들을 브랜드의 특성별로 서로 다른 부분들에서 구현하고 있는 것을 확인하였습니다.
(고화질 제품 이미지, 다양한 콘텐츠의 제공, 동영상 활용 등)

정통 브랜드들의 IT 화에도 유심히 관심을 가지고 지켜보며 업계 종사자분들의 트렌드를 읽는 시야가 더 넓어지기를 바랍니다.

웹디자인 포트폴리오 제작에 유용한 웹화면 녹화 gif 만들기 - 윈도우 화면 녹화

기획하는디자이너 — Fri, 28 Jan 2022 00:23:38 +0900

behance에서 해외 디자이너들의 유려한 웹디자인 포트폴리오를 보면 화려한 인터랙션이 마치 모션그래픽처럼 멋지게 첨부되어있는 것을 볼 수 있습니다.

App UI/UX 포트폴리오의 경우 프로토타입 툴을 이용해 동영상을 제작하기도 하지만, 웹디자인 포트폴리오는 퍼블리싱된 사이트에서 화면 녹화만으로도 깔끔하게 gif를 제작할 수 있습니다.

웹 포트폴리오 제작에 유용한 웹 화면 녹화를 통해 gif 만드는 방법 두 가지와 gif 저용량으로 변환하는 방법을 소개합니다.

1. 윈도우 화면 녹화 기능 사용하여 녹화하기 window key + G

윈도우 화면 녹화 캡처 xbox game center 화면

윈도우 운영체제에서 Xbox Game center를 통해 자체 화면 녹화 기능을 제공하고 있습니다.
window key + G 단축키를 통해 컴퓨터 화면을 녹화할 수 있습니다.
다만 윈도우 기본 화면인 폴더나 바탕화면을 연 상태에서는 화면 녹화가 진행되지 않는다는 오류 팝업이 뜰 수 있으니, 브라우저창을 열어놓은 상태에서 녹화 버튼을 누르시기 바랍니다.

윈도우 자체 화면 녹화 기능 단축키를 통해 실행시키는 경우 위 이미지처럼 화면이 어둡게 변하며 여러개의 팝업 창이 뜨는데요, 왼쪽 상단의 캡처 창에서 녹화버튼 아이콘인 동그라미 버튼을 클릭하면 화면이 녹화됩니다.

컴퓨터 소리(동영상, 음악 재생, 효과음 등)도 함께 녹화되니, 혹시 동영상으로 사용하실 경우 주의하세요.

윈도우 화면 캡처 녹화중

화면 녹화가 시작되면 우측 상단에 화면 녹화 시간이 함께 표기가 되고, 녹화를 중단하는 사각형 버튼을 클릭하는 경우 아래 이미지와 같은 알림창이 뜨게 됩니다.

화면 녹화가 완료 알림 팝업

다시 window key + G 단축키를 눌러 캡처 화면을 불러오면 가운데 뜨는 팝업 창에 녹화된 파일 리스트가 나타납니다.

윈도우 화면 녹화 완료된 파일 리스트

화면 녹화가 완료되면, 파일은 mp4 동영상 파일로 저장되는데요,
위 화면에서 리스트들 상단의 폴더 모양 아이콘을 클릭하면 저장된 동영상들을 폴더에서 확인할 수 있습니다.

기본 저장 경로는 내 PC > 로컬디스크(C:) > 사용자 > 사용자명 > 동영상 > 캡처 입니다.
C:\Users\사용자명\Videos\Captures

2. 동영상을 gif파일로 변환하기 mp4 to gif

자, 화면을 녹화한 동영상이 파일로 준비되었으니, 이제 gif로 만들 차례인데요.
behance나 블로그 또는 자체 사이트에 업로드하실 경우 동영상파일을 그대로 업로드하여 사용해도 되지만, 자동 재생되고 별도의 클릭이나 행동 없이 쉽게 접근할 수 있는 gif가 간단한 웹 페이지에서는 많이 사용되기에 저는 포트폴리오 제작 시 gif를 많이 활용합니다.

동영상의 gif 파일 제작은 어도비 포토샵 최신 버전에서 가능합니다.

Adobe photoshop 2022

어도비 포토샵에서 원래 gif를 만드는 방법은 animation 기능을 사용해야 했는데 이 기능이 timeline으로 명칭이 변경되면서 기능도 업그레이드되어 아주 간단한 동영상 편집 정도는 가능하게 되었습니다.

(timeline 창은 기본 워크스페이스에서는 보이지 않습니다. 동영상 파일을 열면 timeline 창도 함께 호출되고, 동영상 파일 없이 창을 열고자 한다면 window - timeline 으로 타임라인 창을 불러올 수 있습니다.)

따라서 포토샵에서도 동영상 파일을 오픈할 수 있고, 간편하게 gif로 저장하는 것이 가능합니다.

2.-1 포토샵에서 동영상 불러오기

포토샵을 켜고 화면 녹화가 완료된 동영상 파일을 끌어다 포토샵에 위에 올려놓으면 이렇게 동영상 파일이 열리면서 하단에 타임라인 툴 탭이 나타납니다.

2.-2. 동영상 크롭 및 이미지 사이즈 조절하기

동영상 화면을 이미지 편집할 때와 동일한 방법으로 불필요한 부분을 잘라줍니다.

Ctrl + Alt + i 단축키를 사용하여 이미지 사이즈를 조정합니다.

최초 캡처가 완료된 동영상은 모니터의 해상도를 따르므로, 1920 이내로 매우 큰 사이즈로 저장되어있는 상태입니다.
웹에 gif를 업로드할 때에는 gif가 재생되는 만큼 데이터 사용하므로, 파일 용량이 클수록 로딩하는 시간이 길어지고 사이트가 무거워지기 때문에 적당한 사이즈로 줄여주는 작업이 필요합니다.

gif 가로사이즈 최대 800px 정도, 재생이 5초 이내라면 1000px 정도도 괜찮습니다.

800px 정도로 작업한 gif 이미지는 포트폴리오 업로드 시 가로사이즈를 100%로 맞추어 늘려 업로드하더라도 큰 거부감이 없는데 그 이유는 gif화 한 동영상은 그래픽이 깨지는 것은 불가피하기에 어느 정도 허용 가능한(주관적으로) 화면 깨짐의 사이즈라고 볼 수 있습니다.

이미지 사이즈 수정 시 팝업이 뜨는데 convert 클릭 후 넘어가도 문제 없습니다.

2.-3 포토샵에서 동영상 편집하기

포토샵에서 동영상 편집하기

포토샵에서 동영상을 열면 아래에 타임라인 툴 탭이 함께 나타나는데요, 보라색 타임라인 부분에 마우스 커서를 가져가면 마우스 모양이 바뀌는데 양쪽 옆에서 길이 조절이 가능합니다.

컷을 잘라내고 싶으면 Ctrl + C / Ctrl + V로 동영상 타임라인을 복사하여 각각 잘라주며 편집합니다.

총 재생시간은 5초를 넘지 않도록 하는 것이 좋습니다.

재생 시간이 길어지는 만큼 프레임이 생성되기에, gif 이미지 내에 컬러가 많고 복잡한 이미지일수록 gif화 할 때 컬러나 깨짐이 많이 발생하게 됩니다. 따라서 캡처할 웹 사이트의 인터랙션이 많다면 부분별로 인터랙션을 잘라서 컷 별로 업로드하는 편이 좋습니다.

2.-4 편집한 동영상을 gif로 저장하기

동영상 편집이 모두 완료되었다면, Ctrl + Shift + Alt + S 단축키를 눌러 Save for web 화면을 불러옵니다.

여기에서 우측 상단의 Preset과 각종 설정을 통해 저장될 이미지의 컬러 깨짐을 최소화합니다.

gif 128 위쪽으로 갈수록 고화질로 저장되고 색상도 많이 사용하여 데이터를 저장하므로 용량이 점점 커지지만 3초 -5초 정도의 길이로 작업했다면 최고 화질 설정으로 저장해도 10MB 미만의 파일이 저장됩니다. (파일마다 다를 수 있습니다.)

테스트 결과 이미지 깨짐이 가장 적었던 설정

제가 저장한 파일은 모든 설정 테스트한 결과 위 캡처와 같은 설정이 가장 이미지 깨짐이 적었습니다.

GIF 128 Dithered / Percepture / color : 256 / No Dither

gif 저장화면 하단의 파일 정보

그리고 위 설정에 따라 하단의 파일 정보에서 저장될 파일의 용량을 실시간으로 확인할 수 있습니다.
좌측 5.117M라고 적혀있는 부분이 파일 용량 표시입니다. 우측 재생 버튼을 통해 gif 재생되면서 이미지가 많이 깨지지는 않는지 색상은 잘 표현되는지도 잘 확인합니다.

용량이 10MB 이상이라면 gif를 불러올 때 로딩 시간이 길어지거나 모바일에서는 데이터를 많이 사용하는 무거운 페이지가 될 수 있으므로 재생 시간을 줄이거나, 이미지 사이즈를 줄이거나 하는 방법으로 조정하는 것이 좋습니다.

3. 완료

완성된 웹 사이트 디자인 포트폴리오용 gif 캡처 이미지

gif 설정을 마치고 저장을 완료하면 이렇게 동영상이 gif 화 된 파일을 확인할 수 있습니다.

위와 같이 gif를 사용하여 포트폴리오 페이지를 완성한 예시 링크는 아래에서 확인하실 수 있습니다.

https://dbre.co.kr/dbre/work/branding/803studio_r.html

여기까지 윈도우 자체 기능을 활용하여 화면 캡처를 통해 웹사이트 디자인 포트폴리오 제작용 gif 녹화 이미지를 만드는 방법이었습니다. 여기까지 따라오시느라 수고하셨네요!

더 궁금하신 점이나 이해가 잘 되지 않는 부분 문의 댓글 남겨주세요.

피그마 웹 브라우저 버전에서 로컬폰트 사용하는 방법

기획하는디자이너 — Thu, 27 Jan 2022 00:48:14 +0900

피그마는 웹 브라우저에서 실시간으로 사용할 수 있는 반면, 데스크탑 어플리케이션으로 프로그램으로 사용도 가능한 두가지 방식으로 툴을 제공하고 있습니다.
저는 어디서나 이용이 가능한 웹 브라우저를 즐겨 사용하는데요.

피그마 웹 브라우저 버전 사용이 조금 불편하다면 불편한 점 한가지는 브라우저를 열고있는 데스크탑 컴퓨터의 로컬 폰트를 불러올 수 없어 컴퓨터를 바꿔가며 사용할 때 호환성이 떨어진다는 것입니다.

하지만 피그마 웹 브라우저에서도 로컬폰트를 동기화하여 사용할 수 있는 방법은 있습니다.

피그마를 로그인하자마자 실시간으로 연동되지는 않지만 플러그인 하나만 설치하면 바로 컴퓨터에 있는 폰트를 피그마 웹에서도 바로 사용할 수 있습니다.

피그마 브라우저 버전에서 폰트가 없는 경우

피그마에서 불러올 수 없는 폰트를 사용한 경우 사용한 폰트 그대로 볼 수는 있으나 텍스트 수정은 불가한 상태가 됩니다. 마우스 블록설정이 되지 않아 텍스트 복사도 불가한 것처럼 보이지만, 텍스트가 선택 활성화 된 상태에서 Ctrl + C 하여 붙여넣기 하면 텍스트 복사는 가능합니다.

기존 폰트 중 선택하여 변환하면 텍스트를 수정할 수 있지만, 변환하기 전에는 텍스트 수정이 되지 않습니다.

피그마 브라우저 버전에서 데스크탑 로컬 폰트 사용하는 방법

1. 피그마 사이트 다운로드 페이지에 접속
https://www.figma.com/downloads/

2. 나의 데스크탑 os에 맞는 font installers 설치

3. 피그마 브라우저 닫기 후 새로 열기

피그마 웹 브라우저에서 로컬 폰트가 잘 작동되는 모습

font installer 설치 후 피그마를 열고있는 브라우저를 닫고 다시 접속하면 위 이미지와 같이 블록설정이 가능하고 텍스트 수정도 가능한 폰트 활성화 상태가 됩니다.

궁금한 점은 댓글 남겨주세요!

[CSS] 멋져보이는 웹디자인 포인트 - 마우스커서 URL 이미지로 바꾸기

기획하는디자이너 — Fri, 21 Jan 2022 03:43:54 +0900

멋진 웹사이트는 인터랙션이 화려한 것이 특징이라면 특징입니다.
사용자의 행동에 따라 적절한 반응을 실시간으로 해준다면 웹서핑에 재미를 붙여 체류 시간을 더 높여줄 수 있죠.

그 중 멋져보이는 웹사이트의 특징이 되는 포인트 중 하나인 마우스커서 이미지 바꾸는 방법입니다.

이미지 hover 시 변경되는 마우스 커버 인터랙션 803studio.com

웹 기본 커서 지정 속성

웹 기본으로 이미지 추가 없이 제공되는 커서 속성은 다음과 같습니다.

cursor : help;
cursor : wait;
cursor : crosshair;
cursor : not-allowed;
cursor : zoom-in;
cursor : grab;

하지만 제공되는 아이콘을 사용할 게 아니라, 별도의 디자인된 아이콘이나 사진 이미지로 적용하고 싶다면 url 설정이 필요한데요.

준비물은 png 또는 svg 이미지 이며, 이미지의 최대 사이즈는 108px 입니다. 테스트 결과 108px 이상의 사이즈로 이미지를 만들면 오류가 발생하여 커서가 제대로 보여지지 않았습니다. 투명 배경으로 적당한 굵기의 라인으로 만들어야 깨지지 않고 잘 보여지며, 사진으로도 만들 수 있습니다.

아래 커서 이미지를 다운받아서 사용하셔도 됩니다.

다운받아 사용하세요

cursor 이미지 넣기 기본 코드 구성

커서 이미지를 웹에 업로드 후, 이미지 url을 아래 코드 중 one.svg 부분에 넣어주면 됩니다.

cursor: url(one.svg), url(two.svg) 5 5, progress;

위 기본 코드 구성에서 각 속성은 다음과 같습니다.

one.svg : 첫 번째 이미지를 우선 커서로 사용함
two.svg : 첫 번째 이미지 불러오기를 실패했을 경우 두번째 이미지를 커서로 사용함
5 5 : 이미지에서 가로 5px, 세로 5px 위치에 마우스 포인터 작동(실제 클릭되는 좌표 위치)
progress : 이미지 불러오기를 모두 실패했거나 지정한 이미지가 처음부터 없는 경우 키워드 속성 'progress' 사용함

복잡해보이는 듯 하지만, 첫번째 이미지만 정상적으로 등록한다면 사실, 두번째 이미지나 키워드속성은 넣을 필요가 없지요. 하지만 웹 최적화를 위해서는 다 적어주는 게 좋긴 합니다.

:hover에 cursor 스타일 적용

cursor 스타일은 a:hover 또는 img:hover, div:hover 등 hover 적용 시에 모두 적용됩니다.

<style>
 .contents img:hover {cursor: url(/cursorimageurl.png) 54 54,auto; }
</style>

<div class="contents">
 <img src="/imageurl.jpg">
</div>

위 예시에서는 cursorimageurl.png 이미지의 사이즈가 108px 사이즈인 경우에 가운데에 실제 포인터가 작동되는(클릭되는 좌표 지점) 지점을 상하좌우 중간 지점으로 가로 세로 반값인 54px로 지정해주었습니다.

클래스명 또는 이미지 url등이 다를 수 있으니 본인 작업의 클래스명이나 이미지 url 등을 정확하게 확인하고 작업하시고 설명이 모호하거나 궁금한 점은 댓글 남겨주세요!

[CSS] 나이키사이트처럼 배경 블러 효과 넣기

기획하는디자이너 — Thu, 14 Oct 2021 01:00:52 +0900

최근 마우스오버나 딤처리 배경에서 블러효과가 들어간 디자인을 많이 보실 수 있는데요,
나이키 공식 웹사이트에서는 gnb에서 메가메뉴를 펼쳤을 때 나머지 웹페이지의 배경을 어둡게 dim처리 하면서 블러효과를 주어 포커싱되는 인터랙션을 사용하고 있습니다.

이 배경 블러 효과를 사용하는 소스는 css 스타일 소스로 backdrop-filter 입니다.
backdrop filter로 검색하시면 MDN 문서에서 다양한 적용 값을 확인해보실 수 있어요.

출처 : MDN web docs

나이키 공식 웹사이트에서의 적용 사례입니다.

gnb가 스크롤 시 상단 고정될 때 gnb 메뉴 자체의 배경에 blur 효과를 주어 배경이 100% 일 때보다 답답한 느낌을 줄이고 투명도로 인한 개방감을 준 사례입니다.

div의 배경컬러를 지정할 때 함께 사용하는 속성이므로 배경 컬러와 함께 사용 및 배경 컬러 적용 시 opacity를 주어야 함께 적용되는 것을 확인하실 수 있습니다.

div {background:rgba(0,0,0,0.8); backdrop-filter: blur(5px);}

div 부분에 지정한 클래스를 입력하고 background-color 로 opacity가 적용된 rgba값을 적용하거나, 앞서 제가 포스팅한 글 중 hex코드 4개를 사용하는 opacity가 이미 적용된 8자리 컬러코드를 사용하셔도 됩니다.

이 backdrop filter 효과를 사용하여 해외 개발자나 퍼블리셔들은 김서린 거울이나 창문의 이미지를 표현한 레퍼런스들을 작업하기도 했습니다. 트렌디한 투명카드 디자인도 가능하므로 활용성이 무궁한 소스가 될 듯 합니다.

[CSS] css 컬러 hex 코드가 6자리가 아닌 8자리일 때

기획하는디자이너 — Wed, 29 Sep 2021 10:27:31 +0900

최근 퍼블리싱 코딩 마크업 작업을 하던 중 기존에 작업했던 dbre 사이트의 디자인 중 일부에서 신기한 부분을 발견했습니다. 컬러 헥사코드에 opacity를 준 rgba 코드를 사용해서 배경 컬러를 작업했는데, 크롬 개발자도구에서 보니 헥사코드가 6자리가 아닌 8자리로 표기되는 것이었지요.

위 이미지에서 background 를 보시면 #0047FFCC 라고 8자리로 되어있는 것을 보실 수 있는데요, 보통 우리가 알고있는 컬러 지정 css 코드는 hex 코드 6자리와 rgba(255,255,255,0.8) 과 같은 rgb 형태입니다.

rgb 형태는 (r값,g값,b값,1을 100%로 하는 opacity 소수점자릿수) 로 지정을 하게 되는데, 끝자리의 소수점자릿수가 투명도조절 값이 됩니다.

본래 해당 코드는 opacity 포함된 rgb 코드로 작성하였는데, 크롬 개발자도구에서 hex코드 8자리로 표기가 되는데 끝자리 2자리가 opacity 퍼센티지가 코드화된 알파 hex 코드라고 하네요.

.contetns {

  /* rgb코드 3자리*/
  background: rgb(0, 255, 0);

  /* hex코드 6자리 */
  background: #00ff00;

  /* opacity 50% rgb코드*/
  background: rgba(0, 255, 0, 0.5);

  /* alpha hex 코드 8자리 */
  background: #00ff0080;

}

alpha hex digits 변환값

100% FF 99% — FC 98% — FA 97% — F7 96% — F5 95% — F2 94% — F0 93% — ED 92% — EB 91% — E8	90% — E6 89% — E3 88% — E0 87% — DE 86% — DB 85% — D9 84% — D6 83% — D4 82% — D1 81% — CF	80% — CC 79% — C9 78% — C7 77% — C4 76% — C2 75% — BF 74% — BD 73% — BA 72% — B8 71% — B5	70% — B3 69% — B0 68% — AD 67% — AB 66% — A8 65% — A6 64% — A3 63% — A1 62% — 9E 61% — 9C	60% — 99 59% — 96 58% — 94 57% — 91 56% — 8F 55% — 8C 54% — 8A 53% — 87 52% — 85 51% — 82
50% — 80 49% — 7D 48% — 7A 47% — 78 46% — 75 45% — 73 44% — 70 43% — 6E 42% — 6B 41% — 69	40% — 66 39% — 63 38% — 61 37% — 5E 36% — 5C 35% — 59 34% — 57 33% — 54 32% — 52 31% — 4F	30% — 4D 29% — 4A 28% — 47 27% — 45 26% — 42 25% — 40 24% — 3D 23% — 3B 22% — 38 21% — 36	20% — 33 19% — 30 18% — 2E 17% — 2B 16% — 29 15% — 26 14% — 24 13% — 21 12% — 1F 11% — 1C	10% — 1A 9% — 17 8% — 14 7% — 12 6% — 0F 5% — 0D 4% — 0A 3% — 08 2% — 05 1% — 03 0% — 00

참고하시면 도움이 될 듯 합니다.

[UI/UX] 깃허브의 신박한 회원가입 플로우 UX분석

기획하는디자이너 — Fri, 24 Sep 2021 17:26:21 +0900

지금까지는 깃허브를 사용하지 않다가 우연히 오늘 깃허브를 가입하게 되었습니다.

내부에 개발자가 있는 팀에서 근무를 할 때 웹개발자분은 깃허브를 유료로 개인사용하고 있었는데, 배워야지 하면서도 늘 미뤄두었던 것 중 하나였지요.

문득 자바스크립트 라이브러리를 검색하러 codepen에 들어갔다가 여러 템플릿을 확인하려면 로그인하라고 뜨기에 회원가입하려는데 '깃허브로 로그인하기'가 눈에 띄었습니다.

깃허브의 계정 정보로 두가지 다 이용할 수 있다고 하기에 깃허브에 가입을 하러 들어갔어요.

gifhub character via google

깃허브는 그 특유의 고양이 캐릭터가 귀엽다고 생각했는데 개발 관련 서비스 답게 개발자들의 소스코드 작성 창과 우주 그래픽을 활용하여 독특한 그래픽 UI를 연출하고 있었습니다.

회원가입 절차를 밟으려는데 회원가입 플로우의 UX가 독특합니다.

우주 배경의 딥 블루 컬러에 윈도우에서 cmd를 눌러 접근하는 도스화면과 같은 폰트와 구성으로 되어있습니다.
여기부터 남다른 UI 디자인이 돋보입니다.

깃허브 UI/UX 회원가입 플로우의 특징

1. 비밀번호 중복 확인 없이 1회만 입력

최근 UIUX 관련한 어떤 글에서 '비밀번호를 중복 입력하게 하지 말라'는 이야기가 있었고, 최근 토스와 같은 트렌디한 서비스에서 이부분을 수용하고 있는 것을 확인했어요.
깃허브에서도 비밀번호 중복 입력 내용이 없이 1회만 입력하여 체크하도록 해두었네요.
비밀번호 우측에 입력한 비밀번호 보기 토글 버튼(눈모양)을 넣어 내가 입력한 비밀번호가 맞는지만 확인할 수 있도록 하면 오입력을 줄일 수 있을 듯 합니다.

익숙하여 그대로 답습했던 것들이 변화하고 있는 포인트가 아닐까 싶습니다.

2. 안내문구의 출력을 하단 공통 영역으로

필드 + 안내문구 등의 복잡한 구성을 떠나 입력필드만으로 되어있는 상단 패널의 하단에 안내문구 공통 출력 영역으로 잡아 안내문구는 모두 하단에서만 노출되었다가 사라집니다.

상단의 입력 필드가 있는 패널에서 필드가 추가되어도 안내문구는 그대로 패널의 하단에 계속 붙어있습니다.

보고있는 한 화면에서 한가지의 일관된 행동만을 하게 하고(입력), 변화되는 메시지는 변화되는 영역에서 계속 보여지게끔 하여 복잡도를 줄인 듯 합니다.

3. 체크 박스 대신 y, n 입력

매력에 사로잡힌 가장 큰 부분은 맨 마지막의 이메일 수신 동의 부분입니다.
보통의 회원가입 플로우에서는 체크박스 또는 라디오버튼으로 표현하지만 DOS화면에서의 명령어를 입력할 때와 동일하게 yes 면 y를 입력하고, no 이면 n 를 입력하라고 합니다.

정말 신박한 UX라는 생각이 들었습니다.
서비스의 아이덴디티를 살리면서 주 타겟 유저에게 피식 하고 한 번 웃을만한 재치있는 포인트를 주는 듯 합니다.

불필요하다고 생각되는 요소는 모조리 없애버린 듯 깔끔하고 센스있고 유머감각까지 겸비한 UIUX 입니다.

아직까지 많은 솔루션과 플랫폼들에서는 회원가입 시 비밀번호 입력을 중복확인하는 필드를 유지하고 있고, 이메일이나 SMS 동의 필드 역시 체크박스로 통일하여 제공하고 있습니다만 네이티브 앱에서 새로운 UIUX를 시도하면서 기능과 트렌드가 변화되고 있어 UIUX 기획자, 디자이너 분들이라면 이러한 움직임을 눈여겨볼 필요가 있을 것 같습니다.

[디자인트렌드] 트렌디한 세리프 무료폰트

기획하는디자이너 — Thu, 23 Sep 2021 23:51:59 +0900

그래픽 디자인에서 세리프 폰트가 트렌드라는 것은 이미 의심할 필요 없는 사실이죠.

기존의 정형화된 세리프 폰트에서 다양한 곡선으로 변화된 디자인은 각각의 특성을 가지고 서로 다른 감성을 표현합니다. 각각의 개성이 뚜렷하지만 본질적인 세리프 폰트의 '신뢰', '권위', '전통적인'과 같은 의미는 그대로 유지하고 있습니다.

트렌디한 브랜딩에 도움이 될만한 세리프 폰트 9개의 리스트를 공유합니다.
약간의 변형과 추가 도형을 얹어 로고디자인을 바로 해도 손색이 없겠네요.

9개 폰트 중 일부는 100% 무료이지만, 일부는 Personal use only 입니다.
각 폰트 제작자의 라이센스를 참고 바랍니다.

Derivia

100% free font
download

Coconat

free for personal use
download

catellos

free for personal use
download

NOMARK

free for personal use
download

Rosevelt

free for personal use
download

Newyork

100% free
download

[CSS] 웹사이트 사파리 브라우저에서 명조체로 보일 때 해결방법

기획하는디자이너 — Sat, 18 Sep 2021 18:00:24 +0900

사파리 브라우저에서 웹사이트 기본 폰트가 명조체로 보일 때

웹사이트를 사파리 브라우저에서 볼 때 가끔 고딕체나 특정 폰트로 지정한 부분이 기본 명조체로 보여질 때가 있습니다.
사파리의 고유 기본 폰트명을 고딕체로 설정해주지 않아서 생기는 이슈인데요.

크롬 브라우저에서는 'Noto Sans'로만 지정되어있어도 텍스트가 고딕 폰트로 정상적으로 노출되지만,

사파리 브라우저에서는 이렇게 기본 명조체로 나타나게 됩니다.

해당 부분의 css 소스에서 'Apple SD Gothic Neo'를 추가하면 해결됩니다.

.text {font-family:'Noto Sans KR','Apple SD Gothic Neo',Sans-serif; }

위처럼 설정 시 '' 안에 들어간 폰트 순서대로 해당 폰트가 없는 경우 다음 폰트 순으로 보여집니다.

추가 후 정상적으로 고딕 폰트가 출력되는 것을 확인할 수 있습니다.

이 글이 도움이 되셨거나, 궁금하신 점은 댓글로 남겨주세요!

[UI/UX] 피그마 오토레이아웃으로 간격조정 자유롭게

기획하는디자이너 — Thu, 16 Sep 2021 15:30:42 +0900

Figma autolayout

피그마의 오토레이아웃이라는 기능 아시나요?

피그마는 웹디자인이나 UI/UX 디자인을 더욱 쉽게 만들어주는 온라인 툴인데요.
무료로 사용할 수 있고, 협업 시 동시작업이 가능한 환경을 만들어 주어 국내 사용자가 늘어나는 추세입니다.

Gnb 메뉴를 만들 때나 메뉴 리스트 등을 만들 때 정렬이 필요한 오브젝트를 생성할 때 모두 오토레이아웃을 사용하여 디자인 수정이 더욱 원활하게 만들어줄 수 있습니다.

각각 텍스트 레이어로 만들어 어느정도 정렬을 해 두었으나, 메뉴를 추가 할 때 동일한 간격으로 자동 정렬되도록 하고싶습니다.
이 때 전체 메뉴를 선택한 상태에서 Shift + A 단축키를 이용하여 Auto layout으로 만들어줍니다.

오토레이아웃이 잘 생성되면 화면 하단의 중간에 알림 문구가 뜹니다.

그리고 우측 툴박스에는 Auto layout 패널이 생성되는데요,
정렬된 텍스트 레이어의 정렬 방향을 가로/세로 쉽게 변경이 가능합니다.

방향을 가로로 변경할 경우 자동으로 이렇게 가로 형태의 메뉴 리스트로 정렬이 됩니다.

그리고 간격 아이콘이 표시되어있는 옆의 숫자를 변경하면 pixel 단위로 간격을 조정할 수 있어요.
퍼블리싱 코딩 시에 padding 이나 margin 값에 해당합니다.

자동으로 늘였다 줄였다 할 수 있고 방향도 조정할 수 있는 편리한 기능인 피그마의 오토레이아웃 기능을 활용하면 더욱 원활한 UI/UX 작업을 진행할 수 있어요.

이 글이 도움이 되셨거나 궁금하신 점은 댓글로 남겨주세요!

[무료템플릿] 디자이너가 만든것 같은 전자책 표지 무료로 만들기

기획하는디자이너 — Tue, 14 Sep 2021 14:04:13 +0900

요새 수익 자동화로 PDF 전자책 제작하시는 분이 많으신 듯 해요.
나만이 가진 노하우나 내 스토리를 목차를 구성하여 간단하게 책으로 만들면 누구나 작가가 될 수 있는 PDF 전자책.
크몽 플랫폼에서는 이 PDF 전자책 전용 카테고리가 생길 정도입니다.

많은 분들께서 도전하고 계시는 이 PDF 전자책 제작하는 데에 도움이 되실만한 전자책 커버 디자인 소스와 목업 파일을 준비했어요.

무료 목업파일과 무료 북커버 디자인 파일로 그럴듯한 전자책 썸네일을 만드는 방법을 소개해드립니다.

1. PDF 전자책 북커버 디자인 무료로 받기

freepik에 접속합니다.

전자책을 무료로 배포하시는 분들은 freepik의 목업이나 디자인 파일을 그대로 사용하셔도 되나, 혹시 상품으로 판매하실 예정이시라면 freepik의 월 1만원 상당(저렴해요) 라이센스를 구매하여 사용하시는 것을 추천드려요!

freepik에 로그인하신 뒤 book 또는 book cover로 검색합니다.

나오는 이미지들 중 북커버 목업 디자인 이미지를 선택합니다.

저는 Vectorium이라는 작가분의 북커버 목업 파일을 선택했어요.

무료 다운로드가 가능하지만, 개인 사용에 한하며, 상업적인 사용을 위해서는 라이센스를 구매하셔야 한다는 것 꼭 잊지 마세요!

아래 freedownload 버튼 상단으 Attribution required 의 i버튼을 클릭하여 무료사용 라이센스를 확인하실 수 있습니다.

2. 책 표지 디자인 포토샵으로 수정하기

다운로드 받은 파일은 이렇게 psd와 jpg 형태로 확인하실 수 있는데요,
이 중 psd 파일을 선택하여 포토샵으로 열어줍니다.

파일을 열어 보시면에 각 레이어가 분리되어있는 것을 확인할 수 있습니다.
레이어 중 front / back 은 각각 앞면의 커버 디자인과 뒷면의 커버 컬러를 지정할 수 있도록 되어있는데요.
이런 형테의 레이어는 '스마트레이어'라고 하여 더블클릭 시 개별 디자인을 평면형태로 제작할 수가 있습니다.

FRONT 레이어의 이미지 부분을 더블클릭합니다.
(텍스트 부분을 클릭하시면 레이어 명칭 수정이므로, 이미지 부분을 더블클릭 해야합니다)

이렇게 목업 파일에서는 기울어진 3D형태의 입체 북 디자인으로 되어있던 커버의 전면 디자인이 평면으로 펼쳐진 것이 확인되실거에요.
여기에서 텍스트와 도형 등을 추가하여 디자인을 진행해도 되고, 동일한 사이즈로 별도의 파일을 만들어 따로 커버 디자인을 진행한 뒤 해당 레이어에 붙여넣기 해도 됩니다.

우선 이 평면 디자인 파일의 좌측 하단에 보시면 파일의 사이즈를 확인할 수 있습니다.

동일한 사이즈로 새 파일을 만든 뒤, 북커버 디자인을 자유롭게 진행합니다.

사용된 북커버 디자인의 원본 psd파일은 글의 최하단에 추가해두었으니, 아래 링크에서 무료로 다운로드받아서 사용하세요!

북커버 디자인을 모두 완료한 뒤 jpg로 저장한다음,
freepik에서 다운로드받은 psd원본의 FRONT 스마트레이어를 더블클릭하여 열어둔 곳에 파일을 끌어다 놓으면 이렇게 이미지를 얹을 수 있습니다.

이미지를 올린 뒤 기존 목업파일의 이미지레이어를 삭제하고, Ctrl + S 를 눌러 스마트레이어 파일을 저장해줍니다.
스마트레이어를 열어놓은 상태에서 새로 디자인된 파일을 얹은 뒤 저장하지 않으면 다시 목업파일로 돌아갔을 때 새로 얹은 파일이 보이지 않으니 꼭 저장해주세요.

이렇게 목업 파일에 새로 디자인한 북커버 디자인이 잘 안착되었습니다.
그런데, 뒷커버 컬러가 잘 맞지 않네요.

3. 배경 컬러 수정하기

동일한 방법을 BACK 레이어의 이미지 부분을 더블클릭하면 평면화된 스마트 레이어로 이동합니다.

요 레이어에는 디자인이 필요 없어 컬러 선택 레이어만 들어있네요.
전면 커버 디자인을 한 배경색과 동일한 컬러로 지정한 뒤 스마트레이어를 저장하고 레이어를 닫아줍니다.

그리고 다른 레이어들도 살펴보시면 BACKGROUND 그룹의 하단에 배경 컬러를 지정할 수 있는 레이어들도 있으니
어울리는 배경 컬러를 지정하여 수정해보세요.

4. 저장하고 완료하기

PDF 전자책 북커버 디자인이 모두 완료된 모습입니다.

사용된 목업(Mock-up)파일은 freepik에서 다운로드한 템플릿을 사용하였으며, freepik의 템플릿은 개인용 무료(공유링크 추가하여 업로드) 및 상업적 사용 유료 입니다.

사용된 북커버 디자인 파일은 직접 디자인하였으며, psd 원본파일을 무료로 배포합니다.

북커버 디자인 원본파일 DOWNLOAD

사용해보시고 궁금하신 점이나 개선되었으면 하는 점이 있다면 댓글 남겨주세요!
도움이 되셨다면 어디에 사용하셨는지 잘 사용하셨는지도 댓글로 남겨주시면 콘텐츠 제작에 큰 힘이 됩니다 :)

[cafe24 팁] 카페24 상단 띠배너 추가 설치 수정하기

기획하는디자이너 — Tue, 10 Aug 2021 12:28:39 +0900

아래로 스크롤 시 사라지고 닫기버튼으로 끌 수 있는
상단 띠배너 설치 방법입니다.

모든페이지 또는 특정페이지에 노출되도록
설정이 가능하고 즉각적인 POP로 활용하기 좋아
쇼핑몰 디자인에 자주 활용됩니다.

1. cafe24 쇼핑몰 관리자 > 프로모드 > 디자인관리 > 쇼핑몰 디자인 수정

접속하여 HTML 편집창을 열어줍니다.

2. 띠배너를 넣고자 하는 페이지를 열어 해당 코드를 추가합니다.

코드의 위치는 페이지 내 어디에 넣으셔도 상관 없습니다.

<!-- 띠 배너 -->
<div class="promotionBanner">
    <a href="#none" class="bannerLink">	
        <img src="http://sdsupport.cafe24.com/img/guide/tip/img_banner.gif" alt="배너 내용을 적어주세요." /><!-- 원하는 배너 이미지로 변경 -->
    </a>
    <a href="#none" class="btnClose"><img src="http://sdsupport.cafe24.com/img/guide/tip/btn_close.png" alt="배너 닫기" /></a>
</div>
<!--// 띠 배너 -->

3. common.css 에 해당 코드를 추가합니다.

layout / basic / css / common.css

/ * 띠 배너 css * /
.promotionBanner { position:relative; overflow:hidden; text-align:center; background:pink; }
.promotionBanner .bannerLink { display:block; }
.promotionBanner .btnClose { position:absolute; top:5px; left:50%; margin-left:590px; }

4. basic.js 에 해당 코드를 추가합니다.

layout / basic / js / basic.js

/ * 띠 배너 js * /
var bannerFunc = function(){
    $('.promotionBanner .btnClose').bind("click", function(){
        $('.promotionBanner').animate({height: 0}, 500);
    });
};
$(function($){
    bannerFunc();
});

5. 기본 이미지를 지우고 배경컬러와 텍스트 링크 등을 추가하여 꾸며줍니다.

결과물입니다.
닫기버튼 아이콘 변경, 배경컬러 변경, 텍스트 변경 또는
기본 배너 이미지처럼 긴 이미지를 통째로 넣어 이미지 배너로도 활용할 수 있습니다.

동일한 방법으로 모바일에 추가 시
모바일에서도 사용할 수 있습니다.

cafe24 스마트디자인 서포트 매뉴얼에서도 확인하실 수 있습니다.

스마트디자인 서포트

상단 띠배너 추가하기 프로모션이나 기획전 등, 눈에 띄는 곳에 배너를 걸어두고 싶을때 띠배너로 홍보하는 경우가 많습니다. 띠배너를 추가하는 방법에 대해 안내해드리겠습니다. 1. 스마트디

sdsupport.cafe24.com

[디자인트렌드] 2021 웹/그래픽 디자인 트렌드 키워드 - 레트로, 로파이, 세리프, 아치

기획하는디자이너 — Thu, 5 Aug 2021 23:07:26 +0900

최근 어디에서나 보셨을 법한 웹/그래픽 디자인 트렌드는 #레트로, #로파이, #세리프, #아치 총 4가지 키워드로 이야기 될 수 있을 것 같습니다.

키워드에 따라 구분하여 웹디자인과 그래픽 디자인의 트렌드에 대하여 알아보겠습니다.

전반적으로는 아르데코와 캘리그라피를 합쳐놓은 듯한 우아하고 유려한 곡선을 가진 세리프 폰트가 많이 사용되고 있습니다.
이런 형태의 폰트 디자인도 새로이 많이 제작되는 듯 합니다.
어딘지 모르게 명화 속 비너스가 떠오르는 폰트 디자인은 주로 두세가지 컬러의 그라디언트 배경에 많이 사용되며,
이미지와 그라디언트 배경 모두에는 노이즈가 가미되어 있습니다.

또한 아치 형태의 이미지 크롭이 많이 등장하고, 빛을 형상화하는 기하학 도형이나 원형, 선들이 그래픽 요소로 적용됩니다.

웹디자인도 CSS 버전이 업그레이드 되고, 다양한 자바스크립트 기술이 등장하면서 도형과 애니메이션을 적용하는 것이 비교적 수월해져 이러한 유선형의 디자인이 웹에도 많이 쓰이고 있습니다.

1. 레트로 Retro

레트로(retro)는 회상, 회고, 추억 등을 뜻하는 레트로스펙트(retrospect)의 약어이다. 다시 예전으로 돌아간다는 복고(revivalism)와도 유사하게 사용되며 과거로 돌아가거나 그리워하면서 그것을 재현하려는 경향을 말한다(이성훈, 2012).

복고 / 빈티지 와 그 뜻을 유사하게 갖고 있는 레트로 스타일은 이미 국내 디자인에서 한바탕 휩쓸고 간 전력이 있습니다.

구글 '레트로' 검색 결과

현재까지도 활발하게 이어지고 있는 국내 레트로 디자인은 오비라거 맥주의 패키지 디자인에서도 느낄 수 있고, 제가 좋아하는 곰표 맥주의 곰표 밀가루 패키지를 사용한 것을 사례로 볼 수 있습니다. 곰표맥주의 경우 그래픽 디자인 자체가 레트로풍이라기 보다는 의미적으로 레트로가 적용되어있다고 볼 수 있겠네요.

또 레트로는 뒤에 이야기할 로파이 lo-fi 와도 닮은 부분이 있는데요,
페이퍼 신문에 그래픽이 인쇄될 때의 망점이 보이는 느낌을 예전에는 디지털 그래픽처럼 표현했다면 최근에는 그라디언트와 노이즈/그레인 으로 표현하는 등으로 변경되었습니다.

레트로스타일 캐릭터 디자인은 초창기 디즈니 캐릭터의 살짝 끊기는 듯 느릿한 컷컷 애니메이션의 감성이 느껴지기도 합니다.

https://www.pinterest.co.kr/pin/767230486524276155/, https://www.pinterest.co.kr/pin/386957792979601883/

2. 로파이 lo-fi

Lo-Fi는 일반적으로 녹음이나 공연의 불완전성으로 간주되는 요소가 때로는 의도적인 미학적인 선택으로 음악 또는 음악 품질이다. 음질과 음악 제작의 기준은 수십 년 동안 진화해 왔으며, 이는 Lo-Fi의 일부 오래된 예가 원래 그렇게 인식되지 않았을 수도 있다는 것을 의미한다.

본래 lo-fi는 음악의 품질에 대한 단어라고 합니다.
최근의 음악들에서도 간혹 라디오에서 들리는 저음질을 중간에 삽입하기도 하고 공간감이 있는 듯 저 멀리서 들리는 듯한 음악을 사용하여 레트로 감성을 표현하기도 하는 것 같습니다.

이 단어가 그래픽에서 적용된다면 위에서 이야기한 그래픽의 품질로 이어질 수 있겠지요.
고품질 고화질이 최고의 가치로 여겨질 때에는 사진의 노이즈를 삭제하고 최대한 고화질로 표현될 수 있도록 갖은 보정 방법을 동원하곤 했는데, 최근에는 노이즈를 일부러 더하여 그래픽에 감성적인 부분을 더하고 있습니다.

lo-fi에 대한 사전적 의미처럼 불완전성으로 간주되는 요소가 때로는 의도적인 미학적 선택이 될 수 있기에, 최근 그래픽에서 노이즈를 더하여 완성도를 높이는 것이 이에 해당한다고 볼 수 있습니다.

이미지에 전반적으로 노이즈가 더해진 디자인의 웹사이트 https://miramacho.com/

노이즈가 적용된 이미지를 사용한 그래픽 디자인 https://www.pinterest.co.kr/pin/2392606042864127/, https://www.pinterest.co.kr/pin/291467407151021863/

3. 세리프 serif

그 어느때보다 세리프 폰트 디자인의 향연이 아닐까 생각됩니다.
큼직하고 길쭉하고 섬세한 세리프의 곡선들이 우아한 무드를 만들어내고, 이 세리프 폰트의 텍스트 요소들과 노이즈 이미지가 만나면 레트로 감성의 디자인이 더없이 잘 표현됩니다.

https://www.behance.net/gallery/119633011/Unique-Classy-fonts-bundle

섬세한 라인과 곡선의 세리프 폰트는 고급스러운 느낌을 주기에 충분한 것 같습니다.

https://www.pinterest.co.kr/pin/88101736450531245/, https://www.pinterest.co.kr/pin/127086020724017457/

4. 아치 Arch

정방형이나 정원형태가 아닌 아치형 또는 타원형의 도형이 그래픽 요소로 많이 사용되고 있습니다.
서양 건축술의 백미라고 불리는 아치형태가 주는 구조적 아름다움이 딱딱한 직사각형이나 정사각형에서 벗어난 이미지 형태를 구성하며 색다른 그래픽을 구현합니다.

또한 Abbotsford Convent 사이트에서는 아치형태의 이미지와 더불어 앞서 이야기한 노이즈 텍스처를 웹사이트의 백그라운드 그래픽으로 설정하여 마치 오래된 브라운관 TV에서 재생되고 있는 이미지처럼 약간의 움직임으로 레트로 감성과 함께 재미를 더하고 있습니다.

아치 등 다양한 도형으로 크롭된 이미지의 웹디자인 https://abbotsfordconvent.com.au/

[Tip] 스몰비즈니스를 계획하고 있다면 쇼핑몰 무료 제작 가능한 식스샵 PG가입비 지원 이벤트!

기획하는디자이너 — Tue, 27 Jul 2021 21:04:31 +0900

8/1까지 가입자(대략 9월 중순까지 PG계약이 완료)에 한하여 토스 페이먼츠 PG가입비를 지원하는 이벤트가 열렸습니다!

쇼핑몰 솔루션 여기저기 알아보던 스몰비즈니스 사장님들께 희소식!!!!!!
당장 공유하고자 내용 가져왔어요. ~~(홍보비 안받음)~~

요새 토스페이먼츠 결제가 여러 서비스에서 많이 보이던데 공격적인 마케팅을 진행중인가 봅니다.

저는 주로 쇼핑몰 제작 시 cafe24를 사용하지만 커스터마이징이 다양하게 가능한 대신 전문가가 아니신 분들께는 쇼핑몰 수정이 다소 어려울 수 있죠. 식스샵의 심플한 템플릿 제작 방식으로 쉽게 쇼핑몰을 만들고 운영이 가능한데 1개월동안은 PG가입비(대략 22만원 선)를 무상으로 지원한다고 하니 이렇게 반가울 수가 없습니다.

PG 가입비 지원받고 쇼핑몰 오픈하는 방법

1. 식스샵 접속

아래 링크로 식스샵 홈페이지에 접속합니다.

www.sixshop.com

sixshop | 6분 만에 만드는 멋진 쇼핑몰, 식스샵

전문가가 아니어도 멋진 쇼핑몰과 홈페이지를 만들 수 있습니다. 지금 무료로 시작하세요.

www.sixshop.com

2. 웹사이트 상단의 PG가입비 무료 이벤트 배너를 클릭합니다.

망설임은 시작을 늦출 뿐...

3. 식스샵에 가입합니다.

아이디와 이메일주소와 비밀번호만 있으면 되네요! 참으로 간편한 것

식스샵 회원가입

4. 쇼핑몰 디자인 템플릿을 선택합니다.

준비중인 스몰비즈니스의 브랜드 성격에 맞는 레이아웃을 골라 자세히보기 버튼을 클릭합니다.
언제든 바꿀 수 있다고 하니 우선 빠른 선택으로 제작해놓고 추후 리뉴얼해도 괜찮겠어요.

5. 사이트의 언어와 화폐, 사이트명을 입력하고 시작하기를 클릭합니다.

식스샵 템플릿은 모바일 완전 반응형을 지원하고, 관리자에서 수정 시 모바일도 자동으로 변경되어 관리가 더욱 편리하더라구요.

* 여기서부터가 진짜!
6. PG가입비를 지원받으려면 관리자 첫화면에서 상단의 업그레이드하기 버튼을 클릭합니다.**

7. 쇼핑몰 무료로 시작하기 버튼 클릭

8. PG사 계약 신청 등록하기

PG사(토스페이먼츠)에 계약 신청서를 등록하는 내용입니다.
연락받을 담당자(사장님 본인)의 정보를 입력하면 PG사 계약 담당자분께 연락이 옵니다.

우선 신청을 하고나면 계약 담당자 연락이 오기 전에 아래 사항을 미리 설정해놓으면 더 빠른 진행이 가능해요.

1) 사이트에 상품 3개정도를 실제 판매할 내용으로 등록
2) 결제 및 배송 관련 안내 등록
3) 하단의 사업자 관련 필수 노출 정보, 이용약관과 개인정보처리방침을 정상적으로 등록
4) 상품이 등록된 카테고리 외 상품이 없는 카테고리는 비노출

위 세 가지를 정상적으로 노출되도록 설정해 놓으면 문제없이 계약이 진행되는데요, 계약 담당자분이 더 자세한 내용 알려주실테니 연락을 받은 후 그대로 설정해놓고 다시 연락하여 카드심사를 받으시면 됩니다.

8/1 이벤트 기한 내에 쇼핑몰을 생성해도 PG사 계약 신청 및 가입 과정을 9/3 까지 진행하지 않으면 지원이 되지 않는다고하니 꼭 참고하시고 원활한 진행 하시길 바라요!

※ 2021년 9월 17일까지 PG 가입을 완료하지 못하는 경우, 무료 이벤트 대상에서 제외됩니다.
해당 기간 내 PG 가입을 완료하려면 종료 일자의 약 2주 전인 9월 3일에는 PG 가입 과정을 시작해야 합니다.

참, PG사를 가입하고 쇼핑몰을 오픈해야하기 때문에 사업자등록증과 통신판매업은 필수입니다!
아직 사업자등록 전이거나 통신판매업 등록 전이시라면, 모든 서류가 완비된 후 진행하시기를 추천드려요.

스몰 비즈니스 시작하시는 분들께 초기 투자비용 조금이라도 절감하실 수 있는 정말 좋은 기회가 될 것 같아 부랴부랴 저도 하나 생성하고 나서 바로 공유드려요!

모두들 적게 일하고 많이 버시기를 :)

** 추천인 등록을 통해 알림톡 10만원을 지급해준다고 합니다! 혹시 이 글을 보시고 식스샵에 가입해서 PG사까지 등록하셨다면, PG사 등록까지 마치고 아이디를 꼭 댓글로 남겨주세요!!

[CSS] 배경 이미지가 크롭된 텍스트 스타일 만들기 CSS

기획하는디자이너 — Wed, 9 Jun 2021 11:50:52 +0900

배경이미지가 크롭된 텍스트스타일 css

배경이미지가 텍스트 컬러로 적용되는 크롭 스타일의 텍스트 디자인 적용 예제입니다.

텍스트를 많이 입력하여 스크롤이 생기면 백그라운드 이미지를 고정시켜{background-attachment:fixed;} 텍스트만 스크롤되는 패럴랙스 스타일로도 적용해볼 수 있습니다.

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">

<style>
    * {
        background:#818473;
    	width:100%;
        text-align:center;
        margin:0 auto;
    }
    .qoutes_contents {
        width:700px;
        margin: 1em auto;
        text-align:center;        
        background:url(../tutorial/001textback/text-background.jpg); 
        background-size:cover; 
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        color: transparent;
        font-size: 6rem;        
        font-family: 'Anton', sans-serif;
        text-transform: uppercase;
        text-align: center;
        letter-spacing:-0.01em;
        line-height: 110%;        
    }
</style>

<div class="qoutes_contents">
    People will throw stones at you.<br>
    Don't throw them back.<br>
    Collect them all and build an empire.
</div>

VIEW DEMO

[디자인트렌드] VOGUE ITALIA의 색다른 UX 가상 VR 갤러리 웹사이트 Life in VOGUE

기획하는디자이너 — Tue, 25 May 2021 17:29:55 +0900

via Life in VOGUE

Life in VOGUE 프로젝트는 2018년부터 오프라인 공간에서 디자인과 패션을 접목하여 진행된 복합 프로젝트 입니다.

올해는 비대면 전시를 위해 온라인상에 VR로 가상의 빌딩을 제작하여 아티스트의 공간 디자인 프로젝트를 소개하는 사이트를 오픈했는데, 차분하면서도 고급스러운 기조로 전개되는 UI와 함께 아티스트의 작품들을 층별로 전시하여 통상적인 가상 공간 전개 방식인 360도 영상이나 커다란 갤러리 공간에 전시된 작품을 감상하는 방식이 아닌 색다른 방법으로 풀어낸 부분이 인상적입니다.

via Life in VOGUE

가상의 빌딩을 인지시켜주는 예쁜 일러스트로 제작된 페이퍼북으로부터 시작하여 페이지를 넘기면 엘리베이터 문 팝업 페이지가 등장하여 층을 이동하는 버튼을 누를 수 있도록 화면이 연결됩니다.

전체 메뉴 UI를 엘리베이터의 버튼 디자인으로 풀어내고, 층을 이동하는 듯 버튼의 불이 on/off 되며 페이지가 전환되는 멋진 인터랙션을 연출하였습니다.
엘리베이터 버튼의 상하 이동을 상단에 표시한 화살표 디테일도 매우 인상적입니다.

어떤 갤러리의 일부분인지 사이트에서 확인해보세요

각 층으로 이동하면 아티스트의 작품을 더욱 잘 표현할 수 있는 공간 구성과 음악, 인터뷰 등의 멀티미디어를 활용하여 콘텐츠를 다양하게 접근할 수 있게 하며, 이 모든 경험들은 아티스트의 작품에 대한 경험을 더욱 극대화 시켜주는 장치가 되고 있습니다.

어떤 갤러리의 일부분인지 사이트에서 확인해보세요

각 페이지의 레이아웃에서는 내용에 따라 시그니처 로고인 'Life in VOGUE' 의 필기체를 활용하여 사이트의 통일감을 주고 각각의 프로젝트가 하나의 시리즈인 듯 연출됩니다.

층별 아티스트들의 작품들을 다양하게 표현한 Life in VOGUE 프로젝트의 색다른 UX를 바로 경험해보세요.

Life In Vogue

Welcome to the fantastic worlds created by the imaginations of Vincent Darré, Luke Edward Hall, Anna Karlin, Marion Mailaender, Nendo and Studiopepe

lifeinvogue.vogue.it

[DESIGN] 유튜브 채널아트 쉽게 만드는 법 사이즈 가이드 (psd 파일 공유)

기획하는디자이너 — Mon, 14 Sep 2020 04:57:09 +0900

youtube channel art size guide

유튜브 채널아트를 디자인할 때 만들어야 할 여러가지 사이즈가 있죠?
다양한 브라우저 및 모바일 기기에서 잘 보여지도록 유튜브에서 가이드를 제공하고 있습니다.

이미지 크기 및 파일 가이드라인

업로드 최소 크기: 16:9 가로세로 비율의 2048x1152픽셀
텍스트 및 로고가 잘리지 않는 최소 크기: 1235x338픽셀 여기에서 벗어나는 부분은 특정 보기 설정 또는 기기에서 잘릴 수 있습니다.
파일 크기: 6MB 이하

더 쉽게 만들 수 있도록 가이드가 담긴 psd를 만들어 공유합니다.

유튜브 사이즈 가이드 psd 다운로드

가이드에 따라 제작하여 적용해보았습니다.

유튜브 사이즈 가이드 psd 파일 다운로드

이 글이 도움이 되었다면, 공감과 댓글 남겨주세요!

position:absolute 가운데 정렬하는 방법 - div 가운데정렬 안될 때

기획하는디자이너 — Wed, 2 Sep 2020 11:06:05 +0900

position:absolute 일 때 가운데 정렬하는 방법

left:50%;
transform:translateX(-50%;)

<style>

div {
	position:absolute; 
	left:0%; 
	transform:translateX(-50%);
    }

</style>

*크로스 브라우징 사용 주의

via caniuse.com

[CSS] 이미지 흑백처리

기획하는디자이너 — Fri, 28 Aug 2020 14:07:23 +0900

이미지 흑백처리 CSS

이미지 작업 없이 CSS 코드만으로 흑백 처리하는 방법
마우스 hover 효과 적용시 유용하다.

<style>

img {
filter: grayscale(100%);
}

</style>

[디자인트렌드] 명조체 Serif 스타일 웹사이트 11 - 웹디자인 트렌드 2020

기획하는디자이너 — Thu, 27 Aug 2020 02:36:17 +0900

멋진 명조체로 디자인된 웹사이트 11 을 소개합니다.

via Craig Reynolds

Craig Reynolds

뉴욕 출신 Craig Reynolds 라는 디자이너의 포트폴리오 사이트로 마우스 오버 시 타이포 디자인 위로 이미지가 커서에 따라 움직이며 나타나는 효과가 인상적 입니다. 명조체와 이미지 페이드 효과가 분위기 있는 웹 디자인을 보여주고 있고, 타이틀 hover 시 해당하는 콘텐츠를 이미지로 보여주어 더욱 직관적입니다.

via Marvin Schwaibold

Marvin Schwaibold

디자이너의 포트폴리오 사이트입니다. 포트폴리오의 썸네일, 상징적인 이미지와 함께 잘 보여주고 있습니다. 정형화된 레이아웃이 아닌 스크롤 인터랙션으로 이미지가 등장하는 방식이 자유로움을 느끼게 해줍니다. 특정 아이콘을 로고화하여 표현한 점이 눈여겨볼만 합니다.

reiter-friseur.at

정지 상태에서도 살랑살랑 이미지와 요소들이 움직이는 효과로 동적인 느낌을 주는 사이트입니다. 이미지 위에 얹힌 명조 폰트가 피사체와 겹쳐지는 부분의 효과와 컬러 배색이 인상적입니다.

via Free Face

Free Face

명조 폰트로 일부 글자에 포인트 컬러를 주어 디자인 요소로 활용한 귀여운 느낌의 웹사이트입니다. 다양한 폰트를 안내하는 사이트로 하단의 폰트 스타일에 따른 카테고리를 직관적인 버튼으로 구현하였습니

via Altermind

Altermind

브랜드를 소개하는 타이틀별로 풀페이지를 구성하여 비디오 / 스크롤 다운 페이지 등을 구현한 심플한 페이지입니다. 식물의 질감과 유사한 단일 패턴의 배경 이미지 위 선명한 명조체의 타이틀이 더욱 집중도를 높여주는 디자인의 사이트입니다. 각 메뉴 별로 스크롤 다운 시 다음 메뉴로 자연스럽게 넘어갈 수 있도록 하여 사이트의 전체적인 내용을 탐색할 수 있도록 설계되었습니다.

mcube

다크 톤의 컬러 패턴 배경 이미지에 포인트 명조 타이포가 눈길을 끄는 사이트입니다. 에이전시의 웹사이트로 새의 깃털을 모티브로 한 감각적인 디자인과 모션이 눈에 띄네요. 명조 폰트가 고급스러우면서도 묵직하고 무드있는 느낌을 주는 듯 합니다.

unreality check

웹 디자인 트렌드 중 하나로 전체 페이지를 라인으로 구분하여 마치 종이 노트같은 느낌을 주는 레이아웃의 웹사이트입니다. 노트의 라인과 명조폰트가 만나 클래식한 느낌을 줍니다.

ENID

가판대에 진열된 신문을 닮은 레이아웃의 ENID 사이트입니다. 각 콘텐츠의 타이틀만 보여지는 레이아웃으로 클릭 시 페이지 이동 모션까지 마치 잡지를 꺼내 보는 듯한 경험을 줍니다.

via IVANTOMA

IVANTOMA

이태리의 핸드메이드 럭셔리 가구 브랜드 IVANTOMA 사이트는 고풍스러운 이태리가구와 가장 잘 어울리는 명조체를 전반에 사용하여 타이포와 이미지를 레이어드 배치하여 하나의 잡지를 넘겨보는 듯한 분위기를 자아냅니다.

CIEL

대관 비즈니스의 CIEL은 웹사이트에서 크롭된 명조 폰트를 활용하여 감각있는 디자인을 완성했습니다.

byMel

디자이너의 포트폴리오 사이트로 라인과 이미지, 명조체를 적절히 활용하여 무드를 표현했습니다.

이 글이 도움이 되었다면 공감과 댓글로 응원해주세요.

[풀스택디자이너] SVG 변환이 필요없는 아이콘 무료 사이트 feather (feat. Adobe XD에서 적용하기)

기획하는디자이너 — Wed, 1 Jul 2020 12:54:38 +0900

웹에 최적화된 이미지 파일 유형인 .svg 아이콘을 무료로 다운로드 할 수 있는 사이트를 소개합니다.

feather

feather icon

https://feathericons.com/

지속적으로 새로운 아이콘을 업데이트하는 듯 합니다.

png로 크게 키우고 이미지를 작게 조절해도 깨지기 일쑤인 아이콘 이미지 파일을 SVG 유형으로 사용할 수 있고, 깔끔한 디자인이 포인트인 고마운 무료 사이트입니다.

제작자 Colebemis

원하는 아이콘을 클릭하면 바로 파일이 다운로드 됩니다.

Size와 Stoke width를 조절하여 원하는 느낌의 아이콘 디자인으로 변경하여 다운로드도 가능합니다.

Color 코드를 입력하여 컬러 변경도 가능합니다.

상단의 Reset 버튼을 클릭 시 모든 설정이 초기화됩니다.

Adobe XD

feather에서 다운로드한 svg 아이콘 파일을 다운로드하여 어도비 XD에서 사용해보았습니다.

불러온 svg파일의 컬러와 굵기 모두 XD에서도 수정이 가능하여 자유로이 활용이 가능합니다.

훌륭한 무료 SVG 아이콘 다운로드 서비스인 feather 정보가 유용했거나, 기타 의견이 있으시다면 아래 댓글로 남겨주세요! 다음에 더 유익한 정보로 찾아뵙겠습니다.

[디자인트렌드] 웹디자인에 유용한 컬러팔레트 - Summer 여름 테마

기획하는디자이너 — Mon, 29 Jun 2020 00:53:19 +0900

웹디자인에 유용한 여름테마 컬러 팔레트를 제작하였습니다.

이미지 수정 금지 및 출처를 밝히고 자유로운 배포 가능합니다.

@dbre.co.kr

summer flower color palette @dbre.co.kr

Summer flower color palette

flower and bee color palette @dbre.co.kr

Flower and bees color palette

Fruits color palette @dbre.co.kr

Fruits color palette

Summer Icecream color palette

Summer icecream color palette

Summer Beach color palette @dbre.co.kr

Summer beach color palette

[디자인트렌드] 멋진 원페이지 웹사이트 디자인 21

기획하는디자이너 — Sun, 29 Mar 2020 21:51:12 +0900

여러개의 페이지로 생성할만한 충분한 양의 콘텐츠가 없을 때 소량의 콘텐츠와 텍스트만으로도 멋진 웹사이트를 구현할 수 있는 원페이지형 웹사이트 21가지를 소개합니다. 원페이지 웹사이트란 접속한 전면페이지에서 스크롤 다운으로 전체 메뉴가 구성되어 별도의 페이지 이동이 없이 전체 스크롤 페이지 내에서 위치를 이동할 수 있도록 구현된 웹 페이지입니다.

원페이지 웹사이트는 콘텐츠의 양이 적어 웹사이트 내에서 머물 수 있는 요소가 적을 수 있지만, 대신 스크롤을 내리고 슬라이드를 탐험할 수 있도록 다양한 인터랙션을 적용하면 콘텐츠의 양이 많은 웹사이트보다 콘셉을 전달하고 감각을 표현하는 데에 더욱 효과적일 수 있습니다.

요즘 많은 브랜드와 기업들이 단기적인 캠페인을 홍보하거나 마이크로사이트 등으로 활용하고 있습ㄴ다.

1. VICTOR WORK FOLIO

via victor work

Explore victorwork

멋진 원페이지 스크롤형 포트폴리오 사이트입니다. 컬러풀한 배색을 스크롤 챕터별로 사용하였고, 하단에서는 컬러 배색도 원하는대로 바꿔볼 수 있는 옵션을 제공하고 있습니다.

2. APPLE AirPods Pro

via apple

Explore AirpodsPro

전세계 웹사이트의 디자인과 Parallax에서도 역시 앞장서고 모두의 귀감이 되고 있는 애플사이트의 에어팟 프로 소개 페이지입니다. 스크롤을 내릴수록 3D와 영상이 재생되는 것처럼 구현한 웹사이트는 보면 볼수록 빠져들며 온라인에서의 새로운 경험을 선사합니다.

3. Emotive Feels

via emotive feels

Explore emotivefeels

다양한 감정을 도형과 모션으로 표현하여 브랜딩에 있어 감성적인 면이 중요하다는 내용을 스토리텔링으로 소개하고있습니다. 소개하고자 하는 내용의 디자인적 요소 뿐 아니라, 웹 페이지의 구성, 스크롤에 의한 인터랙션 등의 표현력이 좋은 디자인 웹 사이트입니다.

4. Ten Tribes Partnership

via tentribespartnership

Explore tentribespartnership

도입 화면에서 지형의 도면을 나타내는 애니메이션으로 시작하며, 스크롤에 따라 전면 페이지 내에서 콘텐츠의 레이아웃을 잡지의 한 페이지와 같이 적절하게 배치한 웹 사이트입니다.

5. PLAYFUL

Explore helloplayful

배경 요소와 텍스트가 등장하는 방식을 다양하게 연출하여 마치 스크롤을 내릴 수록 한 편의 영상이 재생되는 듯한 효과를 연출한 부분이 돋보입니다.

6. IAD Lab

Explore IADLab

하나의 포스터를 스크롤을 내려가며 위에서부터 아래로 훑어내려가는 듯한 원페이지 웹사이트입니다. 구불한 길처럼 이미지 콘텐츠를 나열하고, 길을 따라 스크롤을 내릴수록 이미지가 나타나는 효과가 재미있고, 제작자가 보여주고자 하는 순서대로 콘텐츠를 확인할 수 있도록 직관적인 정보 전달을 하고 있습니다.

7. WICKRET

Explore Wickret

Application을 소개하는 소개형 웹페이지입니다. 2020 웹디자인 트렌드에서 소개한 내용과 같이 서비스를 소개하는 컨셉 일러스트와 함께 웹사이트가 구성되어있고, 중간에 서비스에 대한 코멘트를 재미있는 gif를 활용하여 안내함으로써 위트를 더했습니다.

8. Andrew Leguai

Explore AndrewLeguai

스크롤을 내리면 나타나는 전면페이지 구성이 보통의 트랜지션이 아닌 텍스트와 요소들이 무작위로 섞여있다가 정렬되는 듯한 재미를 준 웹사이트입니다.

9. Regis Hotel

Explore regis

첫 도입 시 로고애니메이션과 함께 등장하는 콘텐츠들이 브랜드의 성격에 잘 맞도록 고급스럽게 표현되어있으며, 감각적인 레이아웃으로 컨셉을 잘 나타내고 있습니다. 첫 도입 페이지에서 스크롤을 내리면 오른쪽 상단의 메뉴 바가 나타나는 형식이 인상적입니다.

10. EPICURRENCE

https://www.epicurrence.com/

빈티지 아웃도어 무드에 잘 어울리는 이미지 프레임과 자유분방한 콘텐츠의 레이아웃이 돋보이는 원페이지 웹사이트입니다.

11. Vincent Saisset

Explore vincentsaisset

키네틱 타이포 모션그래픽을 웹사이트에서 스크롤로 구현한 듯한 감각적인 포트폴리오 웹사이트입니다.

12. Pest Stop Boys

Explore peststopboys

컬러풀한 디자인과 일러스트로 디자인 에이전시의 웹사이트인 듯 하지만, 해충 방지 서비스를 제공하는 브랜드의 웹사이트입니다. 웹사이트 탐색 중 여기저기서 등장하는 벌레가 인상적입니다.

13. LEGALISE WEED

Explore legaliseweed

뉴질랜드의 대마초 합법화에 대한 웹페이지입니다. 다양한 근거와 논리, 사례 등의 질문과 콘텐츠들을 스크롤 다운을 통해 웹사이트 Reader들과 대화하는 듯한 형식으로 구성하였습니다.

14. WEAR WITH CARE

Explore Where With Care

디자인 에이전시에서 티셔츠 디자인을 공모하여 그 수익을 자선단체에 기부하는 캠페인을 안내하는 웹페이지입니다. 디자인 에이전시답게 캠페인의 감각적인 컨셉을 잘 전달하고 스크롤 다운 시 다양한 gif와 텍스트의 흐름이 동적인 요소로 재미있는 사이트입니다.

15. Fabio Carretti

Explore Fabio Carretti

Fabio Carretti 의 분위기있는 포트폴리오 사이트입니다. 전면 페이지 도입부에서 스크롤 시 선형으로 표현된 아이코닉한 디자인의 변형되는 모션이 인상적입니다.

16. Slumber

Explore Slumber

수면 앱인 slumber의 소개 사이트입니다. 다크 컬러와 light한 폰트가 조용한 명상에 빠지는 듯한 느낌을 주며 도입부의 앱 메인 화면 배경으로 움직이는 원형들이 전체적인 서비스의 컨셉을 잘 표현하고있습니다. 리뷰 섹션에서 메시지와 콘텐츠를 순차적으로 스크롤로 보여주는 효과가 이상적입니다.

17. Minimal Swim

Explore Minimalswim

스크롤 다운할수록 배경색이 채워지며 텍스트가 강력하게 전달될 수 있도록 사이즈가 커지는 등 메시지를 강조하고 있습니다. 처음부터 끝까지 재생하면 하나의 영상처럼 구현되고 있습니다.

18. NIcolas Munt

Explore NicholasMunt

마우스오버 하지 않아도 스크롤에 따라 보여지는 콘텐츠를 강조하며 배경과 함께 컬러 텍스트로 표현하고있는 점이 인상적입니다.

19. Hotel Particuler

Explore Hotel Particuler

마우스 오버 시 텍스트에 해당하는 아티스트의 이미지가 등장하며 자체로 레이아웃을 만들어내고 있습니다. 또 이러한 인터랙션은 웹사이트를 탐색하는 사람들에게 정보에 대한 즉각적인 응답을 해주어 동적이며 대화하는 듯한 경험을 줍니다.

20. Strange Light

Explore Strange Light

네온 그린 한 가지 컬러만을 포인트로 활용하여 스크롤 다운 하는 페이지에 다양한 레이아웃을 적용하였으며, 도입부에서 전체 프로젝트에 관한 메인 이미지와 텍스트로 디자인하며 순차적으로 항목을 보여주고 하단에 세부 정보를 배치하여 필요한 정보를 원페이지에 잘 담은 스토리라인을 보여줍니다.

21. Azai Studios

Explore Azai Studios

스크롤 다운 인터랙션은 없지만 이미지 콘텐츠 부분에 동영상을 적절히 활용하여 단순한 페이지 레이아웃에 활기를 주고 있습니다.

단순한 서비스와 프로젝트에 대한 정보를 간략하면서도 트렌디하게 담을 수 있는 원페이지 웹사이트 디자인을 알아보았습니다. 더 흥미로운 디자인 컨텐츠로 돌아올게요!

컨텐츠가 도움이 되셨다면 댓글로 응원해주세요.

맥 초보 탈출 - 맥에 폰트 설치하기

기획하는디자이너 — Sat, 21 Mar 2020 17:41:51 +0900

기존에는 맥에 otf 유형의 폰트 파일만 사용이 가능했는데, 요즘에는 ttf 파일도 가능하다고 하네요.

맥에 폰트 설치하는 방법입니다.

저는 무료 영문폰트는 dafont 라는 곳에서 주로 다운로드합니다.

via dafont

고딕, 명조, 핸드라이팅 등 폰트의 성격 별로 잘 나위어져있고, 영문폰트라 구매가 저렴하며, 일부는 개인 사용 무료 또는 100% 무료인 경우가 많아 잘 사용하고 있어요. 가장 큰 편리한 점은 내가 적용하고자 하는 텍스트를 해당 폰트로 미리보기하여 검색할 수 있다는 점입니다.

dafont의 폰트 미리보기 기능

dafont는 일반 작가들이 폰트를 업로드할 수 있는 사이트로, 저도 hapole 폰트를 만들어 배포하기도 했습니다.

dafont hapole font download

Hapole font Download

여기서 폰트를 다운받았는데, 맥에는 어떻게 적용할까요?

맥에 폰트 설치하기

1. 설치한 폰트 파일을 열기합니다.

다운로드한 폰트파일을 더블클릭하여 열기

2. 열린 폰트파일의 하단에 '서체 설치' 버튼을 클릭하여 설치합니다.

하단의 서체 설치 버튼으로 설치

설치된 서체 확인

설치가 완료되면 맥의 사용자 내 서체 목록에서 설치된 서체를 확인할 수 있습니다.

참 간단한 맥에 폰트 설치하기였습니다.

[디자인트렌드] 아크릴 소재 디자인 트렌드 11

기획하는디자이너 — Wed, 18 Mar 2020 20:30:39 +0900

dbre company 멋진 아크릴소재 디자인 11

아크릴을 소재로 한 멋진 디자인들을 소개합니다.

via instagram@kisdio

kisdio

via pinterest

THE CURTIS CASA

via instagram @paperartists

paperartists

via moodyboard

moodyboard

via pinterest Marijke

Marijke

via sabine_marcelis

sabine_marcelis

via CalligraphyKE

via biasol

biasol

via thebrandidentity

thebrandidentity

via imprimeriedumarais

imprimeriedumarais.

via oflux

oflux

다음에 더 유익한 콘텐츠로 찾아올게요!

[풀스택디자이너] 아톰 에디터 ftp 연결하기

기획하는디자이너 — Wed, 18 Mar 2020 19:52:52 +0900

[Full stack Designer - Publishing]

풀스택 디자이너가 되기 위한 첫 걸음, 퍼블리싱 공부를 저는 cafe24 에디터로 이것저것 수정하면서 자연스레 익히게 됐어요.

하지만 cafe24 에디터는 cafe24에서만 사용하는 코드들이 있고, 공개되어있지 않은 소스들도 많아서 자유로운 수정에는 한계가 있습니다. 무료 호스팅이기 때문에 수정의 범위가 제한되어있는 것은 당연하겠죠. 그래도 무료 호스팅에서 이만큼의 기능을을 모두 무료로 사용할 수 있다는 것은 큰 장점입니다.

많이들 아시겠지만 cafe24는 쇼핑몰에 특화된 무료 이미지호스팅으로 관리자와 ftp까지 제공하는 혜자로운 서비스입니다. 최근에는 스마트모드와 에디봇이라는 더 쉽고 편리하게 UI가 개선된 형태의 서비스를 제공하고 있어 진입 장벽이 더 낮아졌습니다.

via cafe24 쇼핑몰관리자 체험

cafe24 쇼핑몰 관리자 체험 바로가기

어쨌든, 더 다양한 웹사이트를 다양한 솔루션을 이용하여, 또는 개발형 사이트까지도 다룰 수 있는 실력을 키우기 위해서는 cafe24의 에디터처럼 코딩을 할 수 있는 에디터를 사용할 줄 알아야 하는데, 저는 그 중 아톰에디터를 사용하게 되었습니다.

via atom.io

download Atom editor

아톰에디터는 윈도우와 맥을 모두 지원합니다.

아톰에디터 FTP 연결하는 방법

1. 아톰에디터를 실행합니다.

아톰에디터 실행화면

2. Ctrl + Shift + P 를 눌러 뜨는 창에 Install Package 를 입력합니다.

아톰에디터 ctrl + shift + P > install package 입력

3. 오른쪽에 뜨는 package 검색 창에 remote ftp 를 검색합니다.

아톰에디터 remote ftp

4. remote edit 패키지를 install 합니다.

아톰에디터 remote ftp package - icetee

제가 사용중인 패키지는 icetee 제작자의 패키지 입니다.

5. Packages > Remote FTP > Toggle

아톰에디터 Packages - Remote FTP - Toggle

패키지 인스톨이 완료되면 상단 메뉴에서 Packages 메뉴 안에 Remote FTP라는 메뉴가 확인됩니다. Remote FTP의 서브메뉴 중 Toggle 을 클릭합니다.

6. File > Add project folder

아톰에디터 File - Add Project Folder...

새로운 프로젝트 폴더를 만들어 추가합니다. 프로젝트 폴더는 제작하고자하는 사이트와 관련된 폴더를 모아놓는 최상위 폴더입니다.

7. Package - Remote FTP - Create FTP Config file

아톰에디터 ftp config 파일 생성하기

ftp를 연결하기 위해서 .ftpconfig라는 파일을 만들어야 하는데, 이 파일 내에 호스트(URL 또는 IP)와 계정을 입력해서 연결해야 서버에 접속이 가능합니다. config 파일의 기본 양식이 생성되는 기능입니다.

아톰에디터 .ftpconfig

위 코드 중 아래 빨간색으로 표기한 부분만 변경 후 File - Save 를 클릭하여 파일을 저장합니다.

{
    "protocol": "ftp",
    "host": "example.com",
    "port": 21,
    "user": "user",
    "pass": "pass",
    "promptForPass": false,
    "remote": "/",
    "local": "",
    "secure": false,
    "secureOptions": null,
    "connTimeout": 10000,
    "pasvTimeout": 10000,
    "keepalive": 10000,
    "watch": [],
    "watchTimeout": 500
}

아톰에디터 .ftpconfig

그러면 이렇게 우측의 Project 탭에서 로컬 폴더의 내용이 확인됩니다.

8. Remote 탭에서 Connect 로 서버와 연결합니다.

아톰에디터 .ftpconfig Connect

Remote 탭에서 Connect 버튼 클릭 시 해당 서버의 정보로 접속이 되며, 정상 접속이 되었다면 초록색 팝업이 뜹니다.

또한 정상 접속 시 Remote 탭에서는 서버 내의 폴더 내용을, Project 탭에서는 로컬 폴더의 내용을 확인할 수 있습니다. 저는 오픈 전 최초 작업하는 사이트의 경우 서버 폴더를 로컬 폴더로 복사해와서 실시간으로 동기화하며 작업합니다. 이렇게 하면 cafe24의 이미지호스팅 에디터처럼 실시간으로 업로드된 모습을 확인하며 작업할 수 있습니다.

하지만 정석은 로컬에서 작업하여 확인 후 완료 시 서버에 업로드하는 방식으로 진행됩니다.

이상 아톰에디터 ftp 연결하기 였습니다.

질문은 댓글로 달아주세요.

[MAC초보탈출] 맥 기본 브라우저 선택하기

기획하는디자이너 — Sat, 14 Mar 2020 22:02:32 +0900

[맥/맥북 초보탈출]

카카오톡이나 기타 링크를 바로 클릭했을 때 맥에서 바로 safari로 연결되어 불편하셨던 경험 있으신가요?

익스플로러가 지원을 중단하면서 많은 유저들이 크롬으로 이동했는데, 크롬의 북마크 링크와 구글 서비스들을 모두 연동해서 사용하다보면 safari가 여간 불편하지 않을 수 없습니다.

물론 아이폰에서는 safari가 익숙해서 아이폰은 무조건 safari를 이용하고 있지만요.

크롬의 북마크바

크롬에서는 북마크바에 넣기만 하면 구글아이디로 로그인 시 모든 북마크를 연동할 수 있어 컴퓨터를 바꿔 사용해도 북마크에 즐겨찾기된 링크들을 모두 똑같이 연동해서 사용할 수 있다는 것이 큰 장점이에요.

맥 기본 브라우저 설정 변경하기

google 검색 결과

맥에서 기본 브라우저가 safari로 되어있는 것을 변경하려고 하니 검색 결과는 기본 브라우저를 safari로 설정하라고 하네요.

그렇다면 기본 브라우저를 크롬으로 변경하기 위해 같은 방법으로 반대로 해보기로 합니다.

1. 상단 애플로고 > 시스템 환경설정...

상단 애플로고 > 시스템 환경설정

2. 시스템환경설정 > 일반

시스템 환경설정 > 일반

3. 일반 > 기본 웹 브라우저 선택 > chrome

일반 > 기본 웹 브라우저 > Safari 선택하여 Chrome 으로 변경

맥에서 기본 브라우저가 변경되었습니다.

메신저에서 받은 링크를 클릭하면 chrome으로 바로 이동하여 편리하게 사용할 수 있겠네요!

기획하는 디자이너

처음 비즈니스를 시작했다면 이메일 서명부터 준비해야 하는 이유

이메일 하단의 작은 서명이 생각보다 중요한 이유

이메일 서명은 작은 디지털 명함입니다

처음 사업을 시작한 사람에게 이메일 서명이 필요한 이유

HTML 이메일 서명이 좋은 이유

이메일 서명을 만들 때 넣으면 좋은 정보

Gmail과 Outlook, 네이버에서도 사용할 수 있을까

1인 사업자와 프리랜서에게 특히 유용합니다

이메일 서명은 첫 비즈니스 정리의 시작

처음 보내는 비즈니스 메일부터 조금 더 단정하게

마무리하며

AI가 인간을 뛰어넘는 세상 – Sam Altman이 말한 미래

AI가 인간을 뛰어넘는 세상 – Sam Altman이 말한 미래

1️⃣ AGI란 무엇일까?

2️⃣ AI가 바꾸는 창작의 세상

3️⃣ 오픈소스와 AI의 성장

4️⃣ 에이전트 AI의 등장

5️⃣ AI가 바꿀 우리의 미래

정리하자면

SEO의 끝? 이제는 GEO AEO의 시대

검색의 주도권이 바뀌고 있다

GEO, AEO란 무엇인가?

1. GEO

2. AEO

지금 GEO가 필요한 이유

1. 검색 결과의 형태가 바뀌었다.

2. AI는 '단어'를 넘어 '의미'를 이해한다

3. AI는 '신뢰'와 '일관성'을 본다

GEO 전략으로 콘텐츠를 설계하는 방법

SEO vs. GEO 무엇이 달라졌나?

GEO가 가져올 검색의 미래

UIUX 디자인할 때 꼭 알아야 할 사이트

UIUX 디자이너를 위한 놀이터, ‘디자이너스(Designus)’

UIUX 레퍼런스 모음집

커뮤니티 중심의 구조

화면 AB 테스트 의견 들어보기

이렇게 활용해보세요

사용자 경험을 향상시키는 skeleton UI 스켈레톤

Skeleton UI란?

왜 Skeleton UI가 필요할까요?

Skeleton UI vs 로딩 스피너, 뭐가 더 좋을까?

Skeleton UI, 이렇게 활용해요

마무리하며

노션으로 인스타그램 피드 캘린더 작성하기 노션양식 다운로드

노션으로 인스타그램 피드 플래너 제작하기

콘텐츠 정보 입력하기

캡션과 해시태그 입력

갤러리뷰 설정

텍스트 줄바꿈 설정

카드 크기 조정 및 편집

콘텐츠 복사 및 관리

무료 피드 플래너 다운로드 방법

피그마로 웹 기획하기 장점과 단점 figma 기획서 템플릿 다운로드

피그마로 웹 기획 시 장점

피그마로 웹 기획 시 단점

피그마로 웹 기획 하기 위해 필요한 몇 가지

1. 페이지 나누기

2. 다이나믹 컴포넌트 활용하기

3. 플러그인 활용하기

피그마 화면설계서 템플릿 무료 다운로드

로컬 폰트를 웹폰트로 적용하는 방법

로컬 폰트를 웹폰트로 적용하는 방법

1. 웹폰트 적용 css 코드 작성

2. 폰트 파일 웹 업로드

웹폰트 파일 형식 변환

3. 라이선스 확인

추가로 도움이 되는 정보

내가 보고 있는 쇼핑몰 어떤 솔루션(카페24, 고도몰) 사용했는지 확인하는 방법

내가 보고 있는 쇼핑몰 어떤 솔루션(카페24, 고도몰) 사용했는지 확인하는 방법

쇼핑몰 운영 담당자분들이 가장 많이 궁금해하시는 부분은 바로내가 운영중인 쇼핑몰 솔루션에서 어느 범위까지 수정이 가능한가 입니다.

레퍼런스 쇼핑몰의 솔루션 확인하는 방법 = 서브도메인과 파라미터 구조 확인하기

1. NHN고도 고도몰 솔루션 사용 사이트

2. cafe24 쇼핑몰 솔루션 사용 사이트

[UI/UX] IT 기획 - 플로우차트 쉽게 그리는 무료 툴

Diagrams.net

diagrams.net 사용 방법

[Web] 사용하던 cafe24 호스팅 만료 후 2개월이 지나 연장이 불가하다면?

사용하던 cafe24 호스팅 만료 후 2개월이 지나 연장이 불가하다면?

수정할 때 마다 반드시 로컬에 전체 백업해둘 것.

쇼핑몰 운영 담당자분들이 가장 많이 궁금해하시는 부분은 바로
내가 운영중인 쇼핑몰 솔루션에서 어느 범위까지 수정이 가능한가 입니다.