AI가 인간을 뛰어넘는 세상 – Sam Altman이 말한 미래세계적인 AI 기업 OpenAI의 CEO 샘 알트먼(Sam Altman)은 TED 2025에서 ChatGPT, AI 에이전트, 그리고 슈퍼인텔리전스에 대해 이야기했습니다. 그의 말 속에는 우리가 맞이할 ‘AI 시대의 미래’에 대한 힌트가 담겨 있었어요. 1️⃣ AGI란 무엇일까?알트먼은 AGI(범용 인공지능)에 대해 이렇게 말했어요. “AI가 인간처럼 생각하고, 스스로 배우며, 모든 지식 분야에서 일할 수 있을 때” 그걸 AGI라고 부른다고요.하지만 지금의 AI는 아직 그 단계에 이르지 못했대요. 스스로 계속 배우거나, 완전히 인간처럼 사고하진 못하니까요. 그래서 중요한 건 “언제 AGI가 완성되느냐”가 아니라 “그 과정에서 얼마나 안전하게 ..

검색의 시대는 끝나고, 생성형 검색엔진이 주도하는 GEO의 시대가 시작되었습니다.AI가 인용하고 싶은 콘텐츠를 만드는 전략, 지금부터 준비해야 합니다.검색의 주도권이 바뀌고 있다 불과 몇 년 전까지만 해도 검색 최적화는 키워드의 싸움이었고, 이는 곧 검색 상위에 노출되기 위한 단순한 전략이었습니다.제목에 핵심 키워드를 넣고, 본문에 적절히 반복시키면 검색 상위 노출은 어느 정도 예측 가능했죠.하지만 최근 AI가 전세계적인 화두로 떠오르고 거의 모든 분야에 AI 활용 방안을 연구하는 시대에 이제 사용자는 검색창에 단어를 입력하지 않고, 대신 AI에게 질문을 합니다.OOO 잘하는 국내 업체 추천해줘.OO제품 브랜드별로 비교해줘.검색의 중심이 키워드 → 문장 → 맥락으로 옮겨고 있으며 이것이 바로 AI SEO..

UIUX 디자이너를 위한 놀이터, ‘디자이너스(Designus)’UIUX 디자인을 공부하거나 업으로 삼고 있다면, 한 번쯤은 이런 생각을 해보셨을 거예요.다른 사람들은 어떻게 디자인하지?지금 내 작업, 괜찮은건가?이럴 때 도움이 되는 사이트가 바로 디자이너스(Designus)입니다.주로 App UIUX를 다루는 공간인데, 초기에는 카카오톡 오픈채팅으로 시작해서 매일 1개씩 AB테스트와 같은 토픽을 업로드해서 투표하거나 의견을 자유롭게 나누는 것에서부터 시작되었습니다. UIUX 레퍼런스 모음집디자이너스에서는 기존에 출시된 앱, 웹의 다양한 세부 화면 디자인 사례를 한눈에 볼 수 있고,디자인 챌린지나 토론 주제에 참여하면서 실전 감각도 키울 수 있습니다. 각 화면은 산업군 별, UI 컴포넌트 별로 필터링이 ..

기다리는 순간마저 덜 지루하게 만들어주는 사용자 경험의 디테일Skeleton UI란? 웹사이트나 앱을 사용할 때, 콘텐츠가 완전히 로딩되기 전 회색 박스나 흐릿한 틀부터 먼저 보인 적 있으신가요?바로 그게 Skeleton UI입니다.말 그대로 Skeleton UI는 ‘뼈대 UI’를 의미합니다.즉, 콘텐츠가 준비되기 전에 실제 내용이 들어갈 자리를 미리 시각적으로 보여주는 틀이죠.👀 실제로 네이버, 쿠팡, 인스타그램, 유튜브 등 인기 있는 앱들을 보면Skeleton UI가 기본으로 적용되어 있는 경우가 많습니다. 왜 Skeleton UI가 필요할까요?요즘 사용자들은 빠르고 즉각적인 반응에 익숙해져 있습니다.그런데 화면이 텅 비어 있거나, 단순히 로딩 스피너만 돌아가고 있다면 어떤 생각이 들까요?🙄 ..

인스타그램 피드에 꾸준히 게시물을 올리기가 쉽지 않죠. 그래서 저는 30일짜리 캘린더를 만들어, 콘텐츠 기획을 미리 설정하고, 필요한 이미지, 캡션, 해시태그까지 모두 준비해 매일 손쉽게 발행할 수 있는 콘텐츠 기획 양식을 만들었습니다.이 양식은 한 달 동안 사용할 수 있는 30일치 플랜입니다.다음 달 기획을 추가할 때는 페이지를 새로 만들어 레퍼런스 이미지, 제목, 캡션, 해시태그 등 미리 세팅해두면, 디자인 콘텐츠 작업이 빠르면 30분, 길어도 1시간 안에 끝낼 수 있어요.인스타그램 콘텐츠 발행 시간을 단축하고 사전 기획으로 마케팅 플랜을 구성할 수 있는 콘텐츠 캘린더 제작 방법을 공유합니다. 직접 만드는 게 번거로우시다면, 제가 제공하는 양식을 사용해보세요. 무료 다운로드 링크를 포스팅 하단에 첨부..

요즘 피그마로 웹 기획을 진행하는 프로젝트들이 많아졌습니다.국내 대표 에이전시인 P 사에서도 피그마로 기획하는 클래스 상품을 오픈한 걸 보면 대세는 피그마인 것 같습니다. 피그마로 웹 기획 시 장점웹기획을 피그마로 하게 되면 다양한 장점이 있는데요.전통적인 방식인 파워포인트를 벗어나 유연한 UI 가이드의 변경 적용이 쉽습니다. 버튼 하나만 수정 되어도 매 페이지의 버튼을 바꿔주어야 하는 ppt와는 달리 다이나믹 컴포넌트라는 기능을 활용하면 피그마에서는 컴포넌트 하나만 바꿔주어도 모든 페이지에 연결된 컴포넌트가 변경됩니다.페이지 이동이 쉬워 작업시간을 획기적으로 줄여줍니다. 하나의 페이지에 많은 내용을 담게 되는 기획문서는 100페이지가 넘는 것은 일도 아니지요. 이럴 때 프로세스를 설명하기 위해 페이지 ..

로컬 폰트를 웹폰트로 적용하는 방법로컬에 설치된 폰트 파일을 웹사이트에서 사용하고 싶지만, 제공되는 웹폰트 링크가 없다면 다음과 같은 방법을 통해 웹폰트로 사용할 수 있습니다. 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' 또는 '..

내가 보고 있는 쇼핑몰 어떤 솔루션(카페24, 고도몰) 사용했는지 확인하는 방법 쇼핑몰 운영 담당자분들이 가장 많이 궁금해하시는 부분은 바로 내가 운영중인 쇼핑몰 솔루션에서 어느 범위까지 수정이 가능한가 입니다. 퍼블리싱 의뢰 또는 문의를 받아서 진행하다보면 '내가 원하는 기능은 이런 건데, 우리 사이트에서 수정이 가능한가요?', 또는 '여기 레퍼런스 사이트에서는 이런 게 되는데, 우리도 똑같이 수정하고 싶어요.' 가 많은데요. 쇼핑몰 솔루션에 따라 수정할 수 있는 범위나, 가능 여부, 수정 방식 등이 모두 상이하다보니 내가 보고 있는 쇼핑몰이 어떤 솔루션을 사용했는지 파악할 수 있다면 가능 여부에 대한 파악이 조금 쉬울 수 있겠습니다. 왜냐하면 솔루션에 따라서 카테고리로 사용하는 상품 분류나 게시판 분..

웹, 앱, 서비스 기획 문서를 작성할 때는 주로 power point 를 사용하게 됩니다. 화면 레이아웃이나 유저 플로우 등 다양한 프로세스를 도형을 이용해서 표현이 가능해 가장 편리하고 버전에 관계 없이 호환되다보니 많은 곳에서 주로 사용하는 툴인데요. 그 중에서도 기획 문서 내 플로우차트를 작성 시에 흐름을 표현하는 화살표 등의 추가가 더 쉽고 플로우차트 전용 도형 등이 제공되는 무료 툴이 있어 소개해드리려고 합니다. Diagrams.net diagrams.net은 구글 계정과 연동하여 작성한 flowchart를 다양한 이미지 유형으로 추출할 수 있습니다. 또 완성본은 로컬 드라이브 뿐 아니라, 구글 드라이브나 깃허브에 저장도 가능한 온라인 기반의 툴입니다. diagrams.net 사용 방법 1. 새..

사용하던 cafe24 호스팅 만료 후 2개월이 지나 연장이 불가하다면? 사용하던 cafe24 호스팅이 있습니다. 소개용 개인 웹사이트 제작이라 대략 틀만 잡아놓고, 메인 화면 채우고 서브페이지 콘텐츠를 채워 나가다가 디자인을 리뉴얼해야 할 듯 하여 디자인을 다시 제작하던 중 다른 일 때문에 잠깐 손을 놓아두었던 프로젝트. cafe24 호스팅 만료되었다는 메일은 받았지만 다른 일로 바빠 까맣게 잊고 지내다 5개월 정도가 지났을 즈음 생각이 들어 어느날 연장하러 cafe24에 접속하니 만료되어 더이상 연장이 불가하다는 안내 문구가 있습니다. 이럴수가... 연장이 불가한 것인가? 정말 방법은 없는것인가? 열심히 검색해보았지만 결론은, 만료 2개월 후에는 연장 불가. 서버 데이터 용량 문제로 만료된 데이터는 2..

쇼핑몰, 사이트 내 가로로 흐르는 전광판 텍스트 만들기 최근 트렌디한 웹사이트에서 볼 수 있는 가로로 흐르는 전광판의 역할을 하는 텍스트를 CSS 만으로 만들 수 있는 방법을 소개해드립니다. moho design template glad moho design template glad moho design template glad moho design template glad moho design template glad moho design template glad 아래에서 예제를 확인해보세요. HTML 삽입 미리보기할 수 없는 소스 텍스트가 삽입된 사이트의 예시입니다. 적용된 사이트 확인하기 이 글이 도움되셨다면 댓글과 공감으로 응원해주세요 🥳 궁금하신 점은 댓글 남겨주세요.

웹디자인 트렌드 참고 사이트 5 IT업계, 웹 디자이너, UI/UX 분야에 종사하고 계신 분들이라면 웹디자인 트렌드에 항상 민감하게 반응하고 계실텐데요. 제가 참고하고 생각날 때 마다 검색해보는 웹디자인 트렌드 참고할만한 사이트 5가지를 소개해드립니다. 1. themeforest(envato market) 테마 포레스트, 씸포레스트, 엔바토마켓 등으로 불리우는 세계적으로 유명한 디자인 템플릿 소스 사이트입니다. 저는 워드프레스 사이트 제작을 위해 방문했다가 다양한 디자인 소스들에 매료되어 업데이트되는 최신 소스들을 검색하곤 합니다. 가끔 유튜브 추천 동영상으로 이 envato market에서 소개하는 최신 템플릿 소스 영상이 뜨기도 할 만큼 워낙 대형 플랫폼이고 사용자 규모가 크다 보니 실시간으로 업데이..

동영상이 재생되는 듯한 스크롤 이펙트 패럴랙스 사이트 5 애플의 신제품 홍보 페이지에서의 동영상과 같은 화려한 스크롤 인터랙션을 많이 경험해보셨을텐데요, 웹 프론트엔드 개발을 디자인과 결합하는 영역의 선구자라고도 할 수 있는 애플의 이러한 인터랙션 디자인은 최근 국내외 사이트에서 많은 적용 사례를 확인해볼 수 있습니다. 이제는 웹디자인 트렌드에서 빠질 수 없는 기술과 디자인의 결합이라고도 할 수 있습니다. 고도의 개발 기술을 요하는 인터랙션 디자인 예제를 가득 확인할 수 있는 멋진 사이트 5가지의 사례를 준비했습니다. 스크롤을 내릴수록 마치 한 편의 동영상이 재생되는 듯한 화려한 인터랙션을 확인할 수 있는 스크롤 이펙트 패럴랙스 디자인의 사이트를 소개합니다. 1. FLOEMA floema 주얼리 브랜드 ..

프로페셔널해 보이는 웹디자인을 위한 부가적 요소 몇 가지 웹디자인에 간단한 인터랙션을 조금만 더하면 프로페셔널해 보이는 몇 가지 요소들이 있습니다. 작은 효과들로 내 사이트를 풍성한 UX web이 되도록 제작해보세요. 1. 블러 효과 filter:blur() 이전 콘텐츠에서도 한번 소개되었던 nike 사이트의 블러 효과입니다. 위와 같은 마우스오버 효과는 스크립트가 함께 추가되어야 하지만 단순한 hover 효과나 blur 효과 자체는 간단한 CSS만으로도 설정이 가능합니다. blur(0) /* No effect */ blur(8px) /* Blur with 8px radius */ blur(1.17rem) /* Blur with 1.17rem radius */ 블러 효과 적용을 원하는 이미지 소스의 cl..

cafe24 쇼핑몰 모자이크 룩북 슬라이드 갤러리 페이지 만들기 cafe24 브랜드 쇼핑몰을 오픈하려다 보면 이미지만 업로드해야하는 룩북 페이지가 고민인 분들이 많으실 것으로 생각됩니다. cafe24의 쇼핑몰 갤러리 게시판은 유료 템플릿에서도 크게 룩북 형태를 중심으로 고려되지 않은 디자인들이 많아 커스터마이징 요청사항으로 많이 들어오는 디자인 중 하나입니다. 또한 cafe24 쇼핑몰 솔루션에는 자체적으로 내부 스크립트가 내장되어있어 잘 되어있는 스크립트 라이브러리를 사용하더라도 적용이 어려운 부분이 많습니다. cafe24 쇼핑몰 사이트에 게시판을 사용하지 않고 별도의 룩북 갤러리 페이지를 만드는 방법을 알려드립니다. cafe24 쇼핑몰 룩북 페이지 디자인하기 우선 룩북페이지를 만들기 위해 룩북 이미지들..

cafe24 쇼핑몰에 기본으로 설치된 팝업 배너는 특정 조건에 의해 조정되지 않고 메인이나 특정 페이지에 항상 떠있도록 설정만 가능합니다. 팝업배너를 고객의 행동에 따라 맞춤형으로 띄우도록 하는 것이 쇼핑몰 UX를 고려할 때 중요하게 보아야 할 점이라고 할 수 있는데요. 예를 들어 회원가입 이전인 고객에게만 회원가입 관련 쿠폰을 띄우거나, 장바구니에 담은 제품이 있는 고객에게 장바구니 알림을 보내주는 등의 고객 맞춤형 팝업 입니다. 이런 세부 설정이 가능한 팝업을 띄울 수 있도록 하는 cafe24 쇼핑몰 인앱이 있습니다. 바로 '팝틴'입니다. 조건 설정 팝업 배너삽입 기능 팝틴 cafe24 앱스토어에서 '팝틴'을 검색하여 설치 후 나의 앱스토어 관리자 마이앱에 보시면 설치한 앱 리스트에 설치된 것을 확인..

cafe24 쇼핑몰 솔루션 이용 시 시스템에서 자동 발송되는 메일을 자동/수동으로 설정할 수 있습니다. 또한 아래 방법을 사용하여 이 자동메일 발송에서 메일의 내용이나 디자인도 변경이 가능합니다. 디자인 변경은 html을 사용하여 수정합니다. cafe24 쇼핑몰에서 자동 발송 메일 레이아웃 디자인 변경하기 1. 고객관리 > 자동메일발송설정 > 자동메일발송설정 메뉴로 접속합니다. 2. 자동메일 발송 리스트 중 수정하고자 하는 메일을 선택하여 우측의 '수정'버튼을 클릭합니다. 3. 수정 창이 뜨면 html 모드에서 디자인을 코드로 수정합니다. 자동 발송 이메일 디자인 활용 방법 자동 발송용 이메일의 템플릿 디자인도 구독용 이메일 템플릿의 방식처럼 웹사이트의 카테고리 링크를 넣어 미니 웹사이트처럼 제작하면 고..

인쇄용 그래픽 디자인은 주로 CMYK 컬러로 제작됩니다. 그런데 인쇄할 때 색상이 컴퓨터로 볼 떄의 색상과 많이 달랐던 경험이 있는 디자이너 분들이 많으실텐데요. CMYK 컬러를 팬톤 컬러 코드로 변경한 뒤 인쇄소에 팬톤값으로 전달하면 더 실제 색상과 유사한 색으로 인쇄가 가능합니다. 그래픽 프로그램에서 사용하는 CMYK 컬러 코드를 팬톤 컬러 값으로 변환하는 방법입니다. 1. CMYK 값을 팬톤 컬러 값으로 변환하여 인쇄하기 구글에서 cmyk to pantone 이라는 키워드로 검색하면 가장 먼저 뜨는 사이트로 접속합니다. 사이트 상단에 보시면 CMYK 각각의 코드 값을 넣어주는 필드가 있는데요. 여기에 내가 작업한 그래픽 파일의 각 컬러 값을 넣어주면 실제 팬톤 컬러 값으로 변환된 유사한 컬러들이 필..

behance 사이트에서 디자인 트렌드를 서치하시나요? 그렇다면 메인에 뜬 추천 디자인이나 검색을 통한 추천디자인만 보고 계시지는 않나요? 비핸스 사이트에서 국가별 최신 디자인 트렌드를 확인할 수 있는 방법을 알려드립니다. behance에서 국가별 최신 디자인 트렌드 확인하는 방법 비핸스(비한스) 메인 페이지에는 알고리즘을 통한 추천 포트폴리오가 굿디자인 위주로 리스팅 됩니다. 검색을 해도 키워드에 최적화된 포트폴리오가 최신순이 아닌 상태로 필터링 되는데요, 검색 하단의 필터 셀렉트 박스에서 Location > Country / Region 및 City 를 선택하면 해당 국가와 도시에 업로드된 포트폴리오를 확인할 수 있습니다. 특정 지역을 대상으로 하니 해당 지역 또는 국가의 트렌드를 확인해볼 수 있다는..

최근 토스 페이먼츠 결제를 처음 해봤습니다. 기존 PG사 결제와 다르게 역시 토스답게 가장 편리한 UX를 구현한 것 같아 공유합니다. 우선 온라인 쇼핑몰에서 토스페이먼츠로 결제하기를 누르면 위와 같은 팝업 창이 뜹니다. 로그인, 이름, 주민등록번호 앞자리, 휴대폰인증 등 다 생략하고 휴대폰번호와 생년월일 6자리만 입력하면 해당 정보로 가입한 계정이 토스앱에서 결제할 수 있도록 연동됩니다. 문자를 보내고 또 링크를 클릭하는 게 아니라 바로 앱에서 결제 알림을 보내주니 정말 편하더라구요. '혹시, 알림이 안 왔나요?'와 같은 마이크로카피도 토스가 잘 하는 부분 중 하나죠. 대화형 마이크로카피로 고객에게 친숙한 서비스로 인식되고 있습니다. 토스페이먼츠로 결제 시 연계 제공되는 할인 혜택과 함께 놀라웠던 것은,..

cafe24 쇼핑몰 상세페이지 내 동영상 삽입하기 cafe24 쇼핑몰의 상세페이지를 전체 통이미지가 아닌 html로 작성하여 동영상을 삽입할 수 있습니다. iframe은 뒤쳐진 기술인 듯 최근 활발히 사용되는 태그는 아닙니다만 여전히 동영상 삽입 코드로 iframe이 사용되고 있습니다. 1. 삽입할 동영상의 url을 준비합니다. 동영상을 업로드하거나, 업로드된 동영상 하단의 '공유'버튼을 클릭하여 url을 추출합니다. 2. 상세페이지 이미지를 cafe24 쇼핑몰 관리자의 ftp에 업로드합니다. cafe24 쇼핑몰 관리자 접속 > ftp (상단 우측메뉴) > 파일 업로더 (좌측메뉴) 폴더는 별도로 생성하거나 사용하고 있는 이미지 폴더에 넣고 해당 경로를 포함한 이미지 URL을 추출합니다. 전체 상세페이지에..

쇼핑몰 디자인 트렌드로 메인페이지 내에 인스타그램 콘텐츠 연동을 많이 사용하고 있습니다. cafe24 쇼핑몰 무료 템플릿에는 인스타그램이 연동되어있지 않아 별도로 연동 설치가 필요한데요, 무료로 인스타그램 위젯 설치하고 연동하는 방법입니다. cafe24 쇼핑몰 인스타그램 연동하기 1. cafe24 쇼핑몰 관리자에 로그인합니다. 2. 스마트모드로 접속된 경우 좌측 상단에서 프로모드로 변경하고, 상단 메뉴의 제일 오른쪽에 있는 '앱스토어' 메뉴를 클릭합니다. cafe24 앱스토어란? cafe24의 앱스토어는 cafe24에서 무료로 제공하는 다양한 api를 앱의 형태로 설치하여 관리할 수 있는 플랫폼입니다. 다양한 기능으로 개발된 앱들을 검색하여 무료 또는 유료로 사용할 수 있습니다. 3. 앱스토어 페이지 내..

명품 브랜드의 웹사이트는 보통 어느 나라에서든 원활한 접근이 가능하도록 호환성을 높이고 누구나 편하게 볼 수 있도록 직관적인 UI를 사용하고 있기에 장식적 디자인 요소가 많은 편은 아닙니다. 폰트는 영문 위주이며 국가에 따라 기본이 되는 산세리프, 세리프 폰트를 사용하고 있습니다. 그럼에도 브랜드마다의 UI적 특성이 조금씩 다르고 또 보통의 브랜드 사이트들과 대표적 차이가 있는 부분들이 있어 몇 가지 명품 브랜드 웹사이트를 탐색해봤습니다. 1. 보테가 베네타 #기본레이아웃 #심플 보테가 베네타의 메인 이미지는 심플하게 대표 아이템의 아트워크 이미지 배너 1개로 구성 되어있습니다. 모바일 사이즈와 동일한 이미지를 PC에 사용하였고 PC버전 사이트 wrap 가로 사이즈는 1440px을 사용하고 있습니다. 글..

behance에서 해외 디자이너들의 유려한 웹디자인 포트폴리오를 보면 화려한 인터랙션이 마치 모션그래픽처럼 멋지게 첨부되어있는 것을 볼 수 있습니다. App UI/UX 포트폴리오의 경우 프로토타입 툴을 이용해 동영상을 제작하기도 하지만, 웹디자인 포트폴리오는 퍼블리싱된 사이트에서 화면 녹화만으로도 깔끔하게 gif를 제작할 수 있습니다. 웹 포트폴리오 제작에 유용한 웹 화면 녹화를 통해 gif 만드는 방법 두 가지와 gif 저용량으로 변환하는 방법을 소개합니다. 1. 윈도우 화면 녹화 기능 사용하여 녹화하기 window key + G 윈도우 운영체제에서 Xbox Game center를 통해 자체 화면 녹화 기능을 제공하고 있습니다. window key + G 단축키를 통해 컴퓨터 화면을 녹화할 수 있습니다..

피그마는 웹 브라우저에서 실시간으로 사용할 수 있는 반면, 데스크탑 어플리케이션으로 프로그램으로 사용도 가능한 두가지 방식으로 툴을 제공하고 있습니다. 저는 어디서나 이용이 가능한 웹 브라우저를 즐겨 사용하는데요. 피그마 웹 브라우저 버전 사용이 조금 불편하다면 불편한 점 한가지는 브라우저를 열고있는 데스크탑 컴퓨터의 로컬 폰트를 불러올 수 없어 컴퓨터를 바꿔가며 사용할 때 호환성이 떨어진다는 것입니다. 하지만 피그마 웹 브라우저에서도 로컬폰트를 동기화하여 사용할 수 있는 방법은 있습니다. 피그마를 로그인하자마자 실시간으로 연동되지는 않지만 플러그인 하나만 설치하면 바로 컴퓨터에 있는 폰트를 피그마 웹에서도 바로 사용할 수 있습니다. 피그마에서 불러올 수 없는 폰트를 사용한 경우 사용한 폰트 그대로 볼 ..