I_ji_you

디자인 시스템 스터디

지지군 — Sun, 5 Jul 2026 03:14:05 +0900

https://tossmini-docs.toss.im/tds-mobile/

TDS Mobile 문서

Toss Design System Mobile (TDS) - 프론트엔드 개발자를 위한 공식 문서 및 컴포넌트 가이드

tossmini-docs.toss.im

대 디자인 시스템 시대를 연 토스의 TDS

https://momentum.design/en/

Welcome to Momentum Design Docs! Momentum

This is the main page.

momentum.design

https://m3.material.io/

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

m3.material.io

https://developer.apple.com/kr/design/human-interface-guidelines/

휴먼 인터페이스 가이드라인(HIG) | Apple Developer Documentation

HIG는 모든 Apple 플랫폼에서 탁월한 경험을 제공할 수 있도록 도움을 주는 지침과 모범 사례를 포함합니다.

developer.apple.com

https://designbase.co.kr/grid-calculator/

반응형 웹 그리드 시스템 계산기 | 디자인베이스

반응형 웹디자인 시에 최적화된 그리드를 찾아보세요. Desktop, Tablet, Mobile 등의 컬럼수, 거터, 마진 등의 값을 통해 정수로 떨어지는 값을 찾는 것도 가능합니다. 미리보기를 통해 여러분이 작성

designbase.co.kr

https://seed-design.io/docs

Overview

Overview SEED 디자인 시스템은 당근 제품을 위한 통합된 디자인 언어입니다. LLMs.txt다른 도구로 열기 SEED 디자인 시스템은 여러 플랫폼에 걸쳐 제공됩니다. 이 사이트는 모든 플랫폼의 뿌리로, 당근

seed-design.io

UX writing 스터디 - 유저가 반응하는 광고 소재의 특징 (토스 애즈 참고)

지지군 — Wed, 24 Jun 2026 17:16:09 +0900

출처 : '토스 UX 라이터가 알려주는, 유저가 반응하는 광고 소재의 특징'

1. 핵심 메시지만 남기기. 빠르게 지나치는 0.3 초안에 핵심을 남기기 위해서 단일 메시지만 담고, 이중 메시지는 담지 않도록 한다. 하나만 머리에 박히는게 좋고, 이중 메시지는 오히려 마음에 확 들어오는 것이 없고 분산된다

2. 최대 혜택 강조보다 확실성 강조 : 얻을 수 있는 최대혜택을 보여주는 것보다 보장된 확실한 혜택을 강조하는 것이 더 유익하다. 왜냐하면 사람들은 이미 최대혜택에 속아 이만큼 받지 못할 것이 대부분이라는 사실을 인지하고 있기 때문이다

3. 가입하기보다 준비하기 : 실행 부담이 크게 느껴지는 동사보다 쉽게 시작할 수 있는 동사를 사용해서 무의식적으로 부담을 낮추면 더 쉽게 진입할 수 있다.

4. 숫자 구체화 : 구체적인 숫자가 있을 때 더 신뢰하는 것은 당연하고 강조도 더 잘 되며 숫자만 봐도 금방 이해할 수 있다

5. 쉬운 단어 : 이해하기 쉬운 단어를 써야 빠르게 쉽게 머릿속에 들어온다

지면 특성에 맞춰 배너 문구도 달라야한다

배너는 보드 배너, 리스트 배너, 페이지 배너 등 다양하다. 모든 배너가 각각 가지는 유저의 집중 시간과 노출 맥락이 다르기 때문에 같은 문구를 모든 지면에 적용하기보다, 지면 특성에 맞춰 강조 원칙을 선택할 때 성과가 극대화 된다.

- 고려해야할 점 : 지면 노출 위치와 행동 맥락

효율이 낮은 소재를 살리는 개선프로세스

- 복잡한 문구를 의미 단위로 쪼개어 핵심 단어 2~3개로 재조합

- 막연한 표현을 '유저가 실제로 하는 행동'에 집중해 구체화

바이브 코딩에 필요한 기초 핵심 개념 스터디

지지군 — Wed, 24 Jun 2026 14:52:46 +0900

참조 영상 링크 [바이브코딩 막힘 없이 뻥 뚫어 드립니다 | 바이브 코딩을 시작하는 분들 끝까지 보고 하세요.]

추가 참조 : https://mindmap.technote.wiki/

LLM(Large language model) : 우리가 많이 쓰는 언어 학습 기반 AI 모델들. chatGPT, Gemini etc.
CLI : Command Line interface 클릭해서 직접 명령어(코드)를 입력해서 명령하는 방식
터미널(terminal) : 명령어를 입력하는 인풋 창(프로그램). 검은창 같은 화면
IDE : integrated development envirionmet 통합개발환경 안에서 터미널이 작동하면 CLI로 명령 (ex:VScode같은 코드에디터에 많은 기능이 추가되면서 개발부터 실행, 디버깅까지 가능해짐. + Xcode 등등)
쉘(shell) : IDE 내장 터미널에 CLI로 사용자가 명령하면 해석해서 OS를 대신 작동시키는 프로그램. 컴퓨터 핵심(운영체제 커널)을 직접 건드리는 대신, 겉에서 대신 OS를 건드리는 명령을 해주는 중간 단계
운영체제(OS, operating system) : 컴퓨터 하드웨어(CPU, 메모리, 저장공간)를 관리하고, 프로그램들이 돌아가게 해주는 가장 기본적인 소프트웨어 (macOS → 맥 / Windows → 윈도우 / Linux → 서버 많이 씀 / Android → 안드로이드 / iOS → 아이폰)
CLAUDE code : VScode에 플러그인으로 설치해서 프롬프트입력으로 IDE를 활용할 수 있게 하는 클로드의 새모델
prompt - context - harness : 기초 프롬프트 엔지니어링에서 맥락 이해 시키는 markdown 파일을 활용해 토큰을 절약하던 방식에서 에이전트 운용을 위한 harness까지의 AI 활용 변천사
mcp(model context protocol) : 인공지능(LLM)이 외부 데이터베이스, 파일 시스템, 애플리케이션 및 도구와 안전하게 상호작용할 수 있도록 지원하는 오픈소스 표준 통신 규약 (c타입 포트 같은 느낌)
API(application programming interface) : 소프트웨어 간의 기능 및 데이터를 교환하기 위한 통신 규칙과 규격. API를 활용하면 페이지 전체 새로고침 없이 필요한 부분만 실시간 업데이트 가능해서 조립형 모듈처럼 사용 가능(동적 UI 구현 및 상호작용 비용 절약/프론트엔드 관점), 앱과 서버 전체를 노출하지 않고 필요한 데이터만 주고받을 수 있음(백엔드/보안/시스템 구조 관점) - 접근 권한을 제한하거나 일부 소거해서 보여줄 바에 실수 가능성을 줄이고 노출할 것만 선별하는 API를 활용할 수 있음
API key : API를 연결할 때 필요한 연결 요청하는 서비스 식별용 key. 이 key로 인증을 받을 수 있고, 식별된 서비스에 따라 인가가 달라짐
Ouath : 본인확인 대행시키는 인증 방식
access token : Ouath 완료되면 받는 인증 완료 증명서
인증방식 : 아이디비번, 소셜로그인, ouath, 생체정보인증, API key 등
쿠키(cookie) : 사용자 로컬 브라우저가 저장하는 작은 데이터 조각
세션(session) : 쿠키와 다르게 서버에 저장되는 정보. 일정 시간 이상 활동 없으면 만료됨. “이 사용자는 로그인된 상태다”를 서버가 기억하는 것. 로그인 상태 매핑. 출입 명부 문지기같은 역할
로그(log) : 시스템의 사용 기록이나 네트워크 접속 정보 등
JWT(JSON Web Token) : Header(암호화 방식을 말하는 json) + Payload(내용물=사용자 정보 데이터 json) + Signature(도용 방지를 위해 위조불가한 서명) 개별 사용자 신분증같은 인증용 토큰. 금방 만료됨.
Refresh token : JWT 재발급용 토큰. 비교적 오래 지속.
Json : 프로그래밍 언어가 아니라, 데이터를 저장하는 (문자열 방식으로 표기하는) 컴퓨터의 규칙
API 서버 : 백엔드 서버를 프론트 엔드로부터 분리하고 다양한 클라이언트를 대응하기 위한 서버 구현 방식
호스트(host) : 네트워크(인터넷)에 연결되어 IP 주소를 가지고 있는 모든 장치 -> 서버가 될 수도 있고, 클라이언트가 될 수도 있음
서버(server) : 요청을 받고 응답해주는 컴퓨터/프로그램 (요청에 응답해주는 쪽)
클라이언트(client) : 요청하는 쪽 (사용자)
HTML(Hypertext markup language) : 웹 프론트엔드의 뼈대 언어
HTTP(HyperText transfer protocol) : 웹 브라우저(클라이언트)와 웹 서버가 데이터를 주고받기 위해 사용하는 통신 규약(프로토콜)
CSS : 웹 프론트엔드 디자인 언어
Javascript : 웹 동작(인터랙션,데이터호출 등) 언어
netlify : 정적 웹사이트를 온라인에 올릴 수 있는 클라우드 플랫폼. git 없이도 html 파일만 있어도 업로드 가능
React/Flutter : react는 웹용 프레임워크(컴포넌트 개념), flutter는 한 번 만들어서 여러 플랫 폼에 배포 가능(웹앱 무한정)
React Native : react로 모바일 앱 만들때 사용
Android/iOS : 네이티브 앱 모바일OS
markup : 문서에 의미나 구조를 표시(mark up)하는 것 <h1>같은 것 : html 식
markdown : 마크업을 더 쉽게 쓰게 만든 간단한 문법 # 안녕하세요 -> 제목 크기의 안녕하세요로 보임 : 노션 식
Git : 로컬(내 컴퓨터)에서 버전 관리하는 프로그램. 소스 관리 버전 관리
개발(코딩) : 코드 작성
소스(컴파일) : 작성한 코드 파일들 한 단위
빌드(패키지) : 코드를 실행 가능한 형태(패키지)로 변환
서버프로그램 : 패키지를 실행(run)시킨 상태
Github : 온라인으로 코드 공유/협업 가능한 웹서비스
Github repository : 프로젝트 전용 클라우드 폴더(로컬과 리모드가 있음) - 코드를 수정하고 저장할 떄마다 '누가/언제/어떤 코드를/왜 수정했는지 버전로그가 전부 기록됨
commit : 중간 세이브 포인트 만드는 것. 커밋 메시지로 기록해서 버전을 로컬에 남기기 위함. 깃헙에 리모트 올리지 않은 상태
push : 클라우드에 커밋한 세이브 파일들을 깃헙 클라우드 폴더로 동기화하는 것. 푸시를 하고 나면 깃헙 사이트에 내가 작성한 코드와 커밋 메시지가 나타남
pull : 깃헙에 있는 최신 코드를 내 컴퓨터(로컬)로 다운 받아 동기화하는 것
SpringBoot/NodeJS/FastAPI : 각자 사용 언어가 다른 API 서버(백엔드)를 만드는 프레임워크(개발간편화 틀)/런타임(코드실행)
IP : 인터넷에 연결된 모든 컴퓨터(호스트)가 가지는 고유한 숫자 주소
도메인(domain) : 인간이 기억하기 쉽게 만든 문자 주소 (ex. naver.com)
URL(Uniform Resource Locator) : 상세한 인터넷 주소 (ex. https://www.naver.com/news/12345)
DNS(Domain Name System) : 인간이 기억하기 쉬운 문자 주소를 컴퓨터가 이해하는 숫자 주소(IP)로 번역해주는 시스템 서비스
local host port : 번호로 내 컴퓨터 안의 방 하나를 서버에 랜덤 배정
그냥 호스트와 로컬 호스트의 개념 차이 : 호스트는 모든 컴퓨터 각각을 명칭. 로컬 호스트는 내가 지금 쓰는 이 컴퓨터
TUI : 터미널 안에 키보드 화살표나 단축키를 이용해 나름 메뉴도 고르고 그래픽처럼 조작할 수 있게 만드 화면
CMD : 윈도우의 명령 프롬프트 창 = CLI 도구(Mac의 터미널과 동일)
GUI <-> CLI
CI/CD(continuous integration/continuous deployment) : Git같은 버전 관리 프로그램에서 자동으로 합치고 업데이트 하도록 해주는것. 테스트를 통해 코드를 점검하기도 함. 그 뒤 CD는 CI가 된 코드를 자동 배포하는 것
cloudflare/vercel : CI/CD 해주는 서비스
서버는 모바일 호스트에게 설치된 앱 클라이언트로 http를 통해 연결되고 상호작용한다
AWS/Azure : 서버를 호스팅할 컴퓨터를 빌려주는 서비스. 이 서비스 안의 컴퓨터에서 대체로 가볍고 튼튼한 리눅스 OS가 기본으로 깔리고 그 위로 제작한 서버 프로그램이 작동 됨
Nginx : 호스트를 위해 대신 클라이언트를 분배해주고 보안 유지, 속도 향상에 도움을 주는 프로그램 소프트웨어(로드밸런서/부하분산기/리버스프록시라고 함)
SQL : 데이터베이스 전용 명령어(언어)
쿼리(Query) : 질의(질문/요청)이라는 뜻. 데이터 베이스에 보내는 명령어 문장 자체
데이터베이스(DB, database) : 데이터 정보를 모아두는 곳
MySQL, MongoDB : 데이터베이스를 컴퓨터에 만들고 관리해주는 데이터베이스 소프트웨어. MongoDB는 NoSQL
API가 요청한 데이터를 서버 프로그램이 SQL 언어를 사용해서 데이터베이스에서 필요한 데이터를 꺼내준다
MSA구조(Microservice Architecture) : 기능 별로 서버를 쪼개서 여러개 만드는 방식. 서버가 부분적으로 손상되어도 전체서버에 영향을 주지 않도록 하는 서버 개발 방식.
도커(docker) : 로컬 호스트에 기초 공사가 된 포트를 띄워 테스트 서버로 활용할 수 있도록 하는 하나의 컨테이너로 베이스를 세팅해놓은 기술
쿠버네티스(kubernetes) : 복사된 많은 포트들을 관리하고 수를 늘리거나 교체해주는 프로그램
QA(Quality Assurance - 품질 보증) : 버그가 안생기게 예방팀
QC(Quality Control - 품질 관리) : 버그가 있는지 테스트하는 팀
QA 수동 테스트 : 직접 관계자가 테스트
QA 자동 테스트 : 테스트 스크립트 코드를 짜서 자동으로 테스트
웹서비스의 탄생부터 테스트 배포까지 : 개발자가 로컬 호스트 컴퓨터에 도커 같은 도구를 사용해 포트에 서버를 띄워 개발을 하고, 개발이 끝나면 API 명세서를 제작해 URL로 공유하고 QA에 이상없으면 이 코드를 깃헙에 푸시하면 연동된 AWS의 서버 컴퓨터에 전송되고 나면 Nginx가 클라이언트를 맞이하며 리눅스OS 에서 돌아가는 서버 프로그램에게 요청을 분배하고 서버는 SQL로 DB에서 데이터를 꺼내와 화면을 보여줌
SEO(search engine optimization - 검색 엔진 최적화) : 검색창에 사람들이 특정 단어를 검색했을 때, 내가 만든 웹사이트가 광고비를 내지 않고도 맨 위(상위권)에 무료로 노출되도록 웹사이트를 똑똑하게 가꾸는 작업.
technical SEO : 사이트 속도, 모바일 최적화, 시멘틱 태그
contents SEO : 핵심 키워드 포함, 체류 시간, alt 태그 꼼꼼히
Paid : 돈을 내고 검색 엔진에서 결과 확인 시 '광고'마크와 함께 상휘노출 되도록 하고 클릭할 때마다 돈이 나가고 돈을 안내면 바로 사라짐
개발자 도구 둘러보기 : 요소/콘솔/소스/네트워크
요소 (Elements): "눈에 보이는 디자인과 레이아웃이 어떻게 짜여있지?"
콘솔 (Console): "지금 웹사이트 내부적으로 어떤 에러가 터지고 있지?"
- 콘솔 창에 console.log(window.innerWidth); 라고 치고 엔터를 누르면, 현재 내 브라우저 창의 가로 픽셀 크기(예: 1440)를 숫자로 정확하게 뱉어냅니다. 반응형 디자인 검수할 때 아주 유용
- document.body.contentEditable = true (활용: "여기에 글자가 세 줄로 길어지면 디자인 레이아웃이 깨지나?" 테스트해 보고 싶을 때, 기획자에게 다른 문구로 바꾸면 어떤 느낌일지 실시간으로 보여주고 싶을 때 아주 요긴하게 쓰입니다. (새로고침하면 다시 원래대로 돌아옵니다!))
소스 (Sources): "이 사이트를 이루는 원본 소스 코드 파일들이 어디 있지?"
네트워크 (Network): "서버랑 데이터(API)를 주고받을 때 속도는 어떻고 에러는 없나?"
크롤링 (crawling) : 인터넷에서 필요한 데이터를 긁어오는 것
OG tag (open graph tags) : 링크가 어떤 내용인지 예쁘게 미리보기(Preview) 카드 형태로 보여주기 위해 사용하는 HTML 메타데이터
메타 데이터 : 데이터를 넘어서 그 이상의 데이터를 설명하는 데이터
SDK (software development kit) : 기능을 한 세트에 올인원으로 담아놓은 키트
- API (Application Programming Interface): 다른 프로그램과 소통하기 위한 규칙과 명령어 모음 (가장 핵심적인 부품)
- 코드 샘플 및 예제: "이렇게 만들면 됩니다" 하고 보여주는 샘플 소스코드
- 라이브러리(Libraries): 미리 만들어진 기능 데이터베이스 (예: 로그인 기능, 결제 기능 등)
- 컴파일러/디버거: 코드를 기계어로 바꾸거나 오류를 찾아주는 도구
- 문서 가이드: 개발자를 위한 친절한 설명서
- 기타 등등

[앱인토스 바이브코딩 챌린지 도전기] 1. 신뢰 = 가치

지지군 — Sun, 7 Jun 2026 20:13:22 +0900

- 바이브 코딩과 FOMO

내 스레드는 AI와 바이브코딩으로 점령된지 오래다

FOMO가 왔다

지금 FOMO를 겪는 당신, 오히려 트렌드세터일지도

난 이제야 바이브코딩이라는 단어를 들어봤는데 온 세상 사람들이 바이브코딩으로 무언가 만들어내고 신나게 공유하고 있었다.

댓글에는 그 경이로움에 감탄하는 사람들의 향연이 펼쳐졌다.

20대인 내가 메가커피에서 알바할 때 간혹 마주하던 키오스크 앞의 머뭇거리시던 어르신의 마음이 백 번 이해되는 것만 같았다.

나는 얼마나 멀어지는 중인가.. 가늠도 안되게 빠르게 멀어지는 세상에 어느것부터 붙잡아야할지도 막막했다.

그러던 중 다들 FOMO를 겪지 않느냐며, 나만 바이브 코딩도 안해보고 mcp가 뭔지도 모른다던 누군가의 글을 보고 안심했다.

그리고 알고리즘의 장난에 내 세상이 놀아나고 있었다는 것을 새삼 상기했다. (그래 알고리즘은 이런 무서운 녀석이었지...)

그 뒤에는 이런 글도 봤다. 다들 그럴싸하다고 놀랍다며 올리는 결과물들이 사실은 진짜 굴러가기만 하는 겉만 그럴싸한 것들이라 본인조차도 안쓰고 버려지기 쉽상이라고.

AI가 만드는 버려질 인터넷 무언가 vs 먹을 수 있는 피자

맞다. 내가 그동안 배운 것은 저런 겉만 멀쩡한게 아니라 사람들이 진짜 필요로 하는 것을 만들기 위해 시간을 들이는 것 이었는데. 이런거에 휘둘릴 필요 없는 것 이었는데. 디테일한 기획 없이 막 나온 바이브코딩 결과물들이 운영, 브랜딩, mvp, pmf 등의 고려는 거의 없이 인터넷에 쓰레기를 양산하는 건 아닐까까지 생각이 들었다. (사람들이 쌓아놓는 메일들도 지구온난화에 영향을 준다던데...) 이것도 자원낭비가 아닌가. 그치만 그와중에 이 플랫폼들은 이 쓰레기를 만드는 사람들로부터 돈을 벌겠지. 그게 비즈니스인가.

그럼 나는 바이브코딩을 시험하기 위한 서비스가 아닌 사람들이 원하는 서비스를 만들어봐야겠다. 바이브코딩을 배우고 난 뒤 내가 그동안 학습한 것들로 사람들이 필요한 것을 만들어보자. 그동안 배운 것들을 써먹을 기회가 될 수 있겠다.

- 신뢰 는 가치 다.

바이브 코딩을 배워볼까 하고 인스타나 스레드를 조금 참고하는데 무료 자료 공유, 웨비나, 깃허브 자료 공유 등 엄청나게 사람들이 너도나도 무언가 제공하려고 하더라. 이 현상 속에서 유튜버 소울정님이 최근 영상에서 언급한 '슈퍼 샘플'이라는 워딩이 가슴에 깊게 다가왔다. 새로운 시대가 열렸다. 공유할수록, 보여줄수록, 기록할수록 발전할 수 있다. 참견러들이 모여서 같이 발전한다. 단순 결과물만 따단 하고 보여주는게 아니라 과정을 보여주면서 함께 커간다. 슈퍼샘플은 업계 스탠다드가 되고 그건 곧 신뢰가 된다.

그리고 여기서 말하던 [신뢰]가 세상에 가장 중요한 가치가 되어간다는 것을 느끼고 있다.

만들어낸 이야기에 대한 거부감은 본능

이야기가 돈이 된다는 것은 몇 해전부터 마케팅보다 브랜딩에 대한 인식이 높아지면서 함께 떠오른 성설이다. 단지 마음이 흔들릴 만큼 그 마음에 공감이 되면 사람들은 사나보다. 라고 막연히 생각했었다. 내가 마케팅을 직접 해본 적은 없으니 사람들이 보기에 재미있어 보이고 뭔가 단어 하나라도 걸려서 마음을 건드려주면 하겠지 하는 마음이었던 것 같다. 하지만 지금은 생각이 다르다. 사람들을 예쁜 포장으로 유인하던 건 옛날이고.. 그보다, 날 것으로 포장 밖에 삐져나온 진심이 더 통한다는 것을. 보여주려던 의도조차 하지 않은 그 진심에서 사람들은 끝내 자신만의 관점으로 진심을 발견해내고 그 주체보다도 먼저 감탄한다. 나조차도 그래본 경험이 있어서 자신있게 말할 수 있다. 그래서 만드는 입장에선 방향을 잡기가 더 어려운 것처럼 느껴진다.

민음사 민경씨는 그랬다. 컨텐츠는 노력할 수록 이상하게 더 잘 안되더라. 많은 크리에이터가 이런 딜레마를 겪는다고 말하던 것을 보았다. '잘'하고 싶어서 힘 준 건 오히려 잘 안되더라고. 그건 보여준다는 것에 너무 집중해서가 아닐까? 모두가 그런 마음을 알기에 더 가공되지 않은 진심을 보고 싶어하는 거라고 생각헀다. 모두가 잘 보이고 싶은 마음에 그러지 않아도 되는 자리에서조차 애쓰던 자신의 모습이 생각나서, 해봤기 때문에 어떤 수를 쓰는지 눈에 훤하다. 조금이라도 내막을 알면 쉬워보이거든. 그 얕은 지점이 느껴지면 얄팍해보이고 오히려 진심이 아닌 것처럼 느껴진다. 왜 유튜버들이 많이들 리스크를 알면서도 뒷광고를 했겠는가, 왜 광고주는 돈을 더 주고서라도 뒷광고를 시켰겠는가. 사람들에게 진심이 통한다는 것을 알고 있기 때문이다. 그만큼 진심이 가진 위력은 실로 엄청나다. 사람들은 진심을 보고 싶어한다. 믿을 수 있기 때문이다. 속고 싶지 않기 때문이다. 진심이 통하는 세상을 원하기 때문이다. 진심을 보여주고 다쳐본 사람들이어서 진심이 더 귀중해졌다. 의심하는 세상속에서 진심을 지켜내는 게 생각보다 쉽지 않다. 진심이더라도 어느 순간 스스로를 의심하게 될 때 단언할 수 있는 기준이 없기 때문이다. 오늘은 사람들의 마음에 닿을 수 있는 나만의 진심은 무엇일까 고민해보게 되었다. 일단 바이브코딩부터 공부하면서 차근차근 생각해봐야지...

부트캠프 3~4주차 : 카카오톡 유저플로우, 비즈니스 로직 분석 및 개선 미션

지지군 — Tue, 10 Mar 2026 17:01:51 +0900

미션 내용

'유저는 새로운 친구를 ID로 검색해서 찾을 수 있다.' 유저플로우 선택
유저스토리 관점에서 분석/핵심 기능 흐름 정리
클론 디자인 (브랜드 아이덴티티, UI 구성, 화면 전환 방식 분석 후 디자인에 적용 + 폰트/컬러/아이콘 등 가능한 한 실제 서비스와 유사하게 구현)
심화 1단계 : 브랜드 & 비즈니스 로직 고려해 추가화면 및 UX 개선 아이디어 제시 및 몇몇 화면에 적용
1. 카카오톡 브랜드의 톤앤매너를 유지하면서, 해당 플로우에서의 비즈니스 목표를 어떻게 표현할지 고민
2. 실제 서비스 사용성을 고려한 추가 화면 혹은 UX 개선 아이디어 제시
심화 2단계 : 인터랙션 표현
1. 모달, 스크롤, 탭 전환, 알림 메시지 등 사용자 상호작용 (UX) 요소를 설계하거나
2. 프로토타입 기능을 사용해 클릭/탭 시 화면 전환을 간단히 체험할 수 있게 만들기

카카오톡 ID로 친구추가 기능 해부

유저플로우 분석 실습

상단 앱바 중 친구추가 아이콘 찾아 터치

불편한 점 1 : 내 아이디를 친구추가에서 확인 / 내프로필-더보기-내프로필공유(3 depth)로 확인해야 하는 것

불편한 점 2 : 검색 아이콘 버튼과 친구추가를 혼동

검색 돋보기와 친구추가 버튼 중 플러스 친구 추가의 경우 어디에 들어가야하는지 한 번에 알기 어려웠다. 유저플로우 기준 3번째 화면에 들어가 검색까지 해봐야 플러스친구는 여기서 추가하는 것이 아님을 알 수 있었다.

앱바에 기능 설명 라벨이 없는 것은 유저가 이미 익숙하고 복잡도를 높이지 않기 위함이 목적이지만, 돋보기 아이콘의 기능이 왠지 모호하다는 단점이 있다.

차라리 상단 app bar가 채팅 탭에서도 통일 되었다면 같은 기능이라는 점을 인식하기 더 쉬웠을 수도...

좋은 점 : 메인에서 내 프로필과 관련된 task를 상단 내 프로필 우측 app bar에 위치시켜 직관적으로 친구추가를 찾을 수 있음. 내 아이디는 중요하지만 자주 쓰지 않아 어디서 찾아야 할지 헷갈리기에 여러 뎁스를 거치지 않도록 복잡한 구조를 단축

ID 아이콘 터치

내 아이디와 큐알코드 + 상단에 네가지 친구추가 방법 화면 (친구 추가 수단이구나 인지, 아래에는 내 이름과 함께 아이디를 배치해 내 아이디임을 알려주고, 같은 카드에 삽입된 QR이 내 프로필을 추가하는 QR임을 인지)

다양한 친구 추가 수단 확인 가능.

딤드 처리를 통해 메인화면에서 크게 벗어나지 않아 금방 돌아올 수 있다는 인지를 심어줌.

상대 아이디 입력

자동으로 키보드 입력창이 화면 들어가자마자 노출되고 검색창은 입력 중 상태로 진입해 터치 횟수를 한번 줄임, 다시 한번 내 아이디도 노출시켜서 여백을 줄이고 안정감을 주고 내 아이디를 보기 위해 진행 중인 작업을 그만두고 돌아가지 않아도 되게 하였다.

아이디 검색

타이핑과 동시에 글자수 세기 시작, 입력 전체삭제 버튼아이콘은 인풋 박스 오른쪽 끝에 배치해 입력 중인 텍스트와 충분한 여백으로 분리되도록 했다.

positive 한 Add friend 버튼은 카카오톡의 상징색이자 채도가 높은 노란색으로, 반대로 negative 하고 목적에 반하는 Block 버튼은 명도는 비슷하지만 뉴트럴한 컬러로 시각적으로 채도 높은 노랑 버튼이 눈에 띄도록 위계를 준다. 위치 또한 오른손잡이가 많은 특성상 노란 버튼을 누르기 쉽게 오른쪽에 배치하였다.

친구 추가 완료

친구 추가 후 "successfully added."라는 문구로 추가 완료 되었음을 1차 인지 시키고, 간단한 프로필 관련 task를 해결할 수 있도록 총 3개의 단축 기능을 제공한다. 별명 수정 가능 표시의 연필 아이콘을 이름 옆에 생성한다. 이전 화면과 마찬가지로 중요도가 낮은 'change profile'버튼에는 뉴트럴 컬러를, 바로 활용할 가능성이 높은 'chat'기능과 이어지는 버튼은 노랑으로 위계를 나누어준다.

Add Friend 버튼에서 chat 버튼으로 전환되면서, 더이상 add friend task는 완료되었으니 시도할 필요 없으며, 자연스럽게 다음 단계로 넘어갈 수 있게 친구추가가 성공적으로 되었다는 사실을 자연스럽게 인지시킨다. 같은 화면에서 작은 요소의 변화나 텍스트 한 줄의 추가로 주의를 크게 돌리지 않고 전환이 빠르고 부드럽게 된다는 인식을 줄 수 있다. 만약 'successfully added'같은 문구를 팝업으로 따로 띄웠다면 사라질 때까지 기다려야 하거나, x를 눌러 행동을 늘려 오히려 불편함만 줄 수 있었는데 이렇게 단축시키면서 ux를 고려한 디자인이 될 수 있었다.

오른쪽 이미지 참고) 모바일 디바이스에서 위보단 아래, 왼쪽보단 오른쪽이 터치편의성을 고려하기 좋은 위치
정보 전달 화면 구조가 아닌 상호작용 구조(버튼, 인풋박스 등)일 경우 이를 먼저 고려하는 것이 좋겠다.

클론 디자인 프로토타입

피그마 바로가기

Figma

Created with Figma

www.figma.com

카카오톡 비즈니스 로직

비즈니스 로직이란,

'서비스가 돈을 벌거나, 목표를 달성하기 위해 작동하는 내부 규칙'

이 서비스는 어떤 기준으로 움직이고, 어떤 조건에서 어떤 결과를 내는가? 를 결정하는 규칙들의 집합

비즈니스 로직을 알고 싶다면 의도를 파악하면 된다. 모든 화면은 의도를 가지고 만들어졌다.

카카오톡은 메신저로 시작해 초기부터 전화번호 기반 프로필 자동 연결로 유저 수를 공격적으로 확보하면서 이탈 비용을 늘려 lock-in 효과를 만들었다. 이후 서비스 내의 관계망을 더욱 고도화시키고 체류시간을 늘릴 engagement로 오픈채팅, 나우, 채널, 프로필 뮤직 등을 채택해 플랫폼화 되었고, 카카오톡 선물하기에서 쇼핑까지 확장하면서 일상의 모든 관계에 이벤트를 연결 지어 감정과 상황이 소비로 이어지게 했다. 카카오톡은 통신 수단 → 관계 인프라 플랫폼으로 역할이 확장되었다.

다시 정리하자면,

카카오톡의 비즈니스 로직은 관계 데이터를 독점하는 데서 출발한다.
연결 수를 극대화해 이탈 비용을 높이고,
관계 이벤트가 발생하는 접점에서 결제를 자연스럽게 삽입해 감정 기반 소비를 유도한다.
즉, 관계 밀도를 높일수록 수익 기회가 증가하는 구조이다.

핵심 비즈니스 로직 : 유저 간 연결 - 관계 유지 - 소비로 전환하는 3단계

유저플로우 | 유저는 새로운 친구를 ID로 검색해서 찾을 수 있다 ➜ step 1 유저 간 연결

유저 간 연결(step 1)에서는 보다 쉽게 연결되는 것이 중요하다?

5가지 전략

연결 마찰 최소화
- ID검색, QR, 추천친구, 연락처 자동 동기화로 연결 방식을 다양화하며 동시에 매끄럽게 진행되도록 다듬음
현실관계 → 디지털 관계 자동 이식
- 팔로우라는 개념 없이 자동으로 상호 연결이 되고 개인적 공간을 나눈다는 것에서 실제 관계가 디지털로 그대로 자연스럽게 옮겨감. 이런 연결관계가 이탈 비용을 높이고 락인 효과에 기여함
연결 확장 채널 분리
- 네트워크 층위 다각화 : 전화번호(현실 관계) / ID(의도 연결) / 오픈채팅(관심사 기반)
연결 후 이탈 통제 장치
- 원하는 범주까지 오픈하거나 닫을 수 있게 통제권을 주어서 반대로 연결로 인한 리스크를 두려워하지 않게 함
네트워크 밀도 향상 관리
- 관계 밀도는 서비스의 수익 기회와 직접 연관되어 이를 향상하기 위해 추천 친구로 빈 연결 고리를 채우고 밀도를 높임

유저 간 연결(step 1)에서는 연결 속도를 극대화하되, 심리적 리스크는 최소화하여 네트워크 밀도를 지속적으로 확장하는 것이 중요하다.

카카오톡은 연결을 ‘선택’이 아닌 ‘기본값(Default)’으로 설계함으로써 네트워크 형성 비용을 거의 0에 가깝게 만들었다.

그럼 이때 UX/UI 개선 목표로 연결을 더 쉽게, 라고만 접근한다면?

연결이 너무 쉬워졌을 때에 대한 리스크가 존재한다. (*keyword '아무나')

1차 리스크 : 스팸이나 이상 접촉 증가로 인한 플랫폼 신뢰도 하락, 개인정보 불안 상승

2차 리스크 : '아무나' 연결될 수 있어서 원치 않는 연결로 인해 관리 비용이 증가하면서 메신저에 대한 감정도 피로한 공간이라는 인식으로 부정적 변화

3차 리스크 : 불필요한 네트워크가 추천 정확도 하락, 관계 노이즈 증가, 중요 연락 놓침으로 네트워크의 질을 낮춤으로써 가치 상실

4차 리스크 : 연결이 더이상 즐거운 경험이 아니게 되면서 대체를 찾아내고 사용자를 묶어두던 lock-in 구조 붕괴

과한 연결로 로직(step 1 연결)이 무너지면?
연결이 너무 쉬우면 네트워크는 빠르게 성장하지만, 신뢰와 관계의 질이 붕괴되면 플랫폼의 장기 가치는 오히려 하락할 수 있다.

그래서 카카오는 연결은 쉽게, 하지만 연결 허들은 낮추면서 통제권을 사용자에게 주고 무분별하게 노출되지 않는 구조를 만들었다.

연결	통제
연락처 카톡 프로필 자동 동기화 개인마다 식별 가능한 ID, QR code 추천 친구	친구 차단 친구 숨김 친구 삭제 메시지 차단 내 프로필 비공개 멀티 프로필 전화번호로 추가 차단 아이디로 검색 추가 차단 친구 추천 제한

이제 다시 유저 플로우(유저는 새로운 친구를 ID로 검색해서 찾을 수 있다.)에 집중 해보면 진입 단계에서 두 가지 페인 포인트가 있었다.

불편한 점 1 : 내 아이디를 친구 추가(1 depth)에서 확인 / 내프로필-더보기-내프로필공유(3 depth)로 확인해야 하는 것
불편한 점 2 : 검색 아이콘 버튼과 친구추가를 혼동

이었지만, 다시 한번 확인한 결과 2번째 문제는 이미 카카오톡에서 문제 상황으로 집었던 지점을 해결해두었던 것을 확인하게 되었다.

이 과정에서 나는 '내 아이디를 친구 추가(1 depth)에서 확인 / 내프로필-더보기-내프로필공유(3 depth)로 확인해야 하는 것'으로 문제를 삼고 질문을 이어가게 되었다.

2번째 문제 해결 과정은 여기에서

Problem

사용자는 일반적으로 자신의 정보는 ‘내 프로필’에서 확인할 수 있을 것이라는 멘탈 모델을 가지고 있다.

그러나 카카오톡에서 내 ID를 확인하기 위해서는
내 프로필 → 더보기 → 내 프로필 공유 (3 depth) 경로로 진입해야 하며, 해당 기능은 직관적으로 드러나지 않는 숨겨진 기능(hidden feature)에 가깝다.

반면 친구 추가 화면(1 depth)에서는 ID가 바로 노출되지만, 이는 사용자가 자신의 정보를 찾을 때 자연스럽게 접근하는 경로가 아니다.

이로 인해 사용자의 멘탈 모델과 서비스의 정보 구조가 일치하지 않아 ID의 발견성이 낮아지고,

사용자는 ID를 확인하기 위해 비직관적인 탐색 과정을 반복하게 된다.

Cause

카카오톡은 사용자가 ID를 확인하기 위해 친구 추가 화면으로 진입할 것이라고 가정한 것으로 보인다.
(근거: 친구 추가 첫 화면에서 ID가 바로 노출됨)

하지만 사용자는 일반적으로 자신의 정보는 ‘내 프로필’에서 확인한다는 멘탈 모델을 가지고 있기 때문에 먼저 프로필 화면으로 이동하게 된다.

이처럼 서비스가 가정한 사용자 행동과 실제 사용자의 멘탈 모델이 일치하지 않아 혼란이 발생한다.

Solution

사용자의 멘탈 모델에 맞게 내 ID를 프로필 화면에서도 확인할 수 있도록 IA를 개선한다

A : 프로필 정보 영역에 카카오톡 ID 상시 표기

B : 프로필 화면에서 바로 ID를 확인하거나 공유할 수 있는 진입점 추가

C : 프로필 이름을 터치했을때 ID가 나오는 인터랙션 제공

이를 통해 사용자가 자연스럽게 예상하는 위치에서 자신의 ID를 확인할 수 있도록 하여 탐색 과정과 인지 부담을 줄일 수 있다.

A안 평가 / 3.0 ✭✭✭☆☆

ID는 기본 친구 추가 포맷이 아니기 때문에 사용 빈도가 떨어진다. 내 프로필이라는 화면에서 처음부터 노출하면 사용 빈도에 비해 화면 복잡도만 높일 수 있다.

B안 평가 / 4.0 ✭✭✭✭☆

진입점을 추가하는 것은 UI를 크게 해치지 않으면서 좋은 아이디어 같다. 위치를 고려해야 한다.

C안 평가 / 4.0 ✭✭✭✭☆

프로필 이름을 터치했을 때 나오게 하는 것은 기존에 터치가 안되던 부분을 같은 디자인에 버튼 기능이 들어간다고 인지시키기 쉽지 않기 때문에 도입 초기에 툴팁과 함께 제공하는 것이 좋겠다.

Design

솔루션을 바탕으로 3가지 디자인 시안을 제작해봤다.

이름 옆 화살표 아이콘 추가 버전 / 프로필 섹션 슬라이드 버전 / 이름 버튼화 버전

피그마 프로토타입 링크(접속하면 직접 시연해볼 수 있다.)

Figma

Created with Figma

www.figma.com

Expectation

유저 관점

비즈니스 관점

ID 정보의 발견성 향상
사용자가 자신의 정보를 확인할 때 자연스럽게 접근하는 프로필 화면에서 ID를 확인할 수 있어 정보 발견성이 높아진다.

탐색 과정 및 인지 부담 감소
여러 메뉴를 탐색하지 않고도 프로필 화면에서 바로 ID를 확인할 수 있어 불필요한 탐색 과정과 인지적 부담이 줄어든다.

사용자 멘탈 모델과 인터페이스 구조 일치
‘내 정보는 내 프로필에 있다’는 사용자의 멘탈 모델과 서비스 구조가 일치하여 혼란이 줄어든다.

ID 공유 행동의 편의성 증가
프로필에서 바로 ID 확인 및 공유가 가능해져 친구에게 ID를 전달하는 과정이 더 빠르고 직관적으로 이루어진다.

ID 기반 친구 추가 활성화
사용자가 ID를 쉽게 확인하고 공유할 수 있어 ID 기반 친구 추가 사용률이 증가할 가능성이 있다.

친구 연결 경험 개선
사용자가 새로운 연락처와 연결되는 과정이 간편해져 친구 추가 경험 전반의 만족도가 향상된다.

서비스 이용 맥락 확장
오프라인 만남, 커뮤니티, 행사 등에서 ID를 활용한 연결 상황에서 카카오톡 사용이 자연스럽게 유도된다.

기능 활용도 증가
기존에 깊은 경로에 있어 활용도가 낮았던 ID 확인 및 프로필 공유 기능의 접근성이 개선되어 기능 사용률이 높아질 수 있다.

추가로 생각해볼 것

상단 네비게이션 앱바의 아이콘이 탭마다 구성이 달라서 직관적인 이용경험을 해치고 학습을 필요로 한다는 느낌을 받았다. 네비게이션 앱 바의 구성을 통일한다면 어떨까?

More...

다양한 직/간접적 수익화 사례 예시 찾아보기
UX를 고민하려면 기능의 의도와 구성에 대해 먼저 알아야한다
tip, 비슷한 곳에서 벤치마킹하기
필요한 내용을 선별하는 게 어렵다. 아직 많이 몰라서 그런 건지 문제 정의 분석 솔루션까지의 과정이 너무나도 어렵다.

카카오톡 유저 플로우(유저는 새로운 친구를 ID로 검색해서 찾을 수 있다.) 분석 해결 실습

지지군 — Tue, 10 Mar 2026 09:35:18 +0900

유저 플로우(유저는 새로운 친구를 ID로 검색해서 찾을 수 있다.)

Problem

검색 아이콘과 친구추가 아이콘을 혼동
(검색아이콘을 통해 진입했을때 ID 검색 친구추가가 안되는 것으로 오해한 시점에서 풀어나간 과정입니다)

유저 Goal : 상대 ID 입력 → 친구추가

유저 목적 달성 실패 시나리오

친구탭 진입
→ 돋보기 검색
→ ID 입력
→ 실패 (홈화면으로 직접 이동)
→ 친구추가 아이콘
→ ID 입력
→ 성공

문제는, '검색'이라는 행위를 대표하는 돋보기 아이콘에 ID검색을 연상하고 돋보기를 눌러 들어가면 ID 검색으로 친구추가를 할 수 없었다.
카카오는 이 시나리오에 대해 error recovery를 실패한 사례라고 할 수 있다.
자주 이용하지 않기에 카카오에서 즉시 시스템 피드백을 주지 않으면 매번 잘못된 시나리오를 반복할 확률이 높다.
ID로 친구추가라는 기능은 핵심 기능 중 하나이기 때문에 ux개선이 반드시 필요하다.

Cause

검색 범위 불명확 : 검색 기능의 범위가 명확하지 않다.
아이콘 의미 중첩 : 돋보기 아이콘이 ID검색을 연상시킨다.
시스템 피드백 부재 : 검색 실패 결과 화면에서 친구추가 기능으로 이어지는 시스템 피드백이 없어서 사용자가 틀린 행동을 했다는 걸 인지하지 못한다.

deeper...

카카오톡 ID 기반 친구추가 기능은 진입 뎁스가 깊어서
서비스 내에서 가시성(discoverability)이 낮아
사용자가 친구추가 경로를 직관적으로 예측하기 어렵다.

그 결과 사용자는 검색 기능을 통해
ID를 입력하는 잘못된 시나리오로 진입하게 된다.

Low discoverability
→ 잘못된 진입
→ error recovery 실패

Solution

돋보기 아이콘에 모든 기능을 합치기에는 친구추가 라는 핵심 기능을 해칠 수 있으므로 이는 하지 않고,

아이콘마다 어떤 low level screen으로 가는지 알 수 있게 하는 네비게이션을 하나 더 터치 했을때 노출 되도록 삽입하는 건 오히려 작은 모바일 디바이스 환경에서 정보가 과다해 보일 수 있다. 또한 읽느라 직관성이 떨어지고 학습해야 한다는 부담을 키울 수 있다.

돋보기 아이콘과 헷갈리지 않고 사용하던 유저에게도 혼란을 주지 않기 위해서 오히려 유저의 시나리오에서 헤매는 부분의 막다른 길을 다른 샛길로 이어지게 하는 방법으로 고민해야 한다. 따라서 돋보기 아이콘에 들어가서 ID같은 철자 조합을 검색하면 친구추가로 navigate 할 수 있는 컴포넌트와 함께 권유하는 ux writing을 삽입하는 것이 기존 유저플로우를 크게 해치지 않으면서 가장 적합한 방법이라고 생각했다.(Intent Recovery Pattern)

Design

검색 결과 없음 시
"ID로 친구 추가" CTA 노출

넘어가면 자동으로 검색한 아이디가 입력된 채로 친구추가 화면으로 넘어가 검색됨

(Intent Recovery Pattern)

검색창 그대로 아이디 검색은 앞에 골뱅이를 붙이도록 하고(서치바 밑에 낮은 위계 뉴트럴 컬러로 적어두기)

검색창에서 ID 형식 입력 감지
→ 자동으로 친구추가 모듈 표시

예시 :

@jiyunam 입력

카카오톡 ID로 친구를 찾고 계신가요?
[ID로 친구 추가]

(Intent detection UX)

Expectation

유저 관점	비즈니스 관점
탐색 비용 감소 및 자동 학습 서비스 신뢰도 및 이용만족도 증가 사용자의 기존 멘탈 모델 존중	신규 연결 성공률 증가 친구 추가 전환율 향상 연결 시도 이탈률 감소 CS 문의 감소

UX/UI 디자인 레퍼런스 사이트 모음

지지군 — Mon, 9 Mar 2026 14:47:32 +0900

Mobbin
Dribble
Behance
Awwwards
Pinterest
UI Movement
Page Flows
Land-book
Godly
Collect UI

프로덕트 디자이너 부트캠프 동기이신 [임그린]님의 모음집 (배포 환영이라고 하셔서 맘 편히 올립니다 )

https://harmless-fear-ba1.notion.site/20260206-20243cfbc60980b8a60fc6b4fd0518e8

부트캠프 1~2주차 : 프로덕트 디자인 이해

지지군 — Mon, 9 Mar 2026 03:03:44 +0900

프로덕트 디자인의 역할

UX/UI Designer에서 Product Designer로

UI 디자인, 시각적 요소에 집중 ▶ 사용자 리서치, 데이터 분석 통한 문제정의 및 해결

위 그림만 보면 프로덕트 디자이너가 되기 위해 이 모든 걸 해야하다니 하고 겁 먹을 수 있다.

하지만 잘 살펴보면 모든 것은 별개의 요소가 아니라 겹쳐있는 원들처럼 뗄 수 없는 존재들이고 연관이 있는 것들이다.

나는 디자인의 기본 이론을 배울 때부터 애초에 디자이너라는 건 기획과 떨어질 수 없다고 생각했다.

미술과 디자인을 가르는 차이는 실용성, 편의성의 여부인데 디자인이 이것을 고려하기 위해서는 근본을 이해하고 거기서부터 설계해나가야 빌드업이 완성되면서 비로소 일관성을 드러내는 안정적인 형태를 갖출 수 있기 때문이다.

그래서 프로덕트 디자이너라는 직무는 내 성미에 잘 맞겠다고 생각했다.

비록 일은 많아질지언정, 이전의 UX/UI 디자이너의 역할이었다면 감히 남의 업무에 손대는 느낌이 들 수 있었던 상황에 내 주어진 역할로서 적극적으로 모든 것에 참견할 수 있기 때문이다. 그래서 나는 스타트업이 잘 맞을 거 같았다.

2026년 현재 | 디자이너의 역할이 웹과 앱을 디자인하는 것만이 아닌, 프로덕트의 비즈니스 문제, 서비스 기획, 데이터 관리, 심지어 적극적인 마케팅 업무에 이르기까지 그 역할이 확대되고 있는 추세.

프로덕트 디자이너에게 가장 중요한 역량 1위 '서비스 기획 역량' 신입 디자인어에게 가장 중요한 역량 1위 '커뮤니케이션 역량'

프로덕트 디자이너가 해결해야하는 문제 1위 '문제 해결 능력 및 창의적 사고' & '다양한 디자인 툴에 대한 숙련도'

프로덕트 디자이너가 갖고 있으면 좋은 우대사항 '데이터 기반 의사결정 능력' & '기본적인 개발 지식'

Product Manager와 Product Designer

PM 과 PD

매니저는 방향을 잡고 들어갈 데이터 가공이나 전반적인 진행 상황을 감독 관리하는 프로젝트의 큰 축이자 모든 협력관계의 서포터 역할이라면 프로덕트 디자이너는 설계된 기획 아래 그것들을 구현하고 아이디어를 내고 프로덕트를 만드는 역할이다 둘의 역할은 점점 중첩되며 DX시대의 흐름에 따라 점차 효율성이 높아지고 새로운 방향으로 확장되는 추세이다.

최신 디자인 트렌드

AI + 개인화 + 미니멀 인터랙션 + 대화형 인터페이스 + 몰입형 UI + 접근성

3강 what is design? design에 대하여

얼마나 기본 디자인 원리를 공부해야할까

design coursera 강의
how do you design? pdff
기타 디자인 서적

디자인의 7가지 기본 요소 - 점 선 면 형태 가치 질감 색

요소	의미
점 (Point)	시각적 시작점
선 (Line)	방향, 움직임 표현
면 (Plane / Shape)	공간을 이루는 형태
형태 (Form)	입체적 구조
크기 / 비율 / 가치 (Scale / Size / value)	시각적 중요도
질감 (Texture)	표면 느낌
색 (Color)	감정, 분위기 전달

디자인 구구단 책 참고하면 도움 될 내용

디자인 원칙이 잘 적용된 디지털 제품 찾아보기 실습

UX/UI 정의

어떤 디자인이 좋은 UX 디자인인가? 사용자를 누구로 두냐에 따라 다르다. - 즉 사용자 공감이 가장 중요하다.

복잡함(complexity)은 실재의 상태이고, 혼란스러움(complicated)은 마음의 상태이다.

사용자의 멘탈모델이라는 개념과 이어질 수 있는 내용. 멘탈모델은 사용자가 어떻게 예상하는지 그런 생각의 흐름을 구성한 모델이다.

UX의 특성에는 주관성, 총체성, 정황성이 있다. 개개인의 주관적 경험이 배경에 따라 달라지기 때문에 전혀 다르게 느낄 수 있다는 점을 이해하고(주관성 subjectivity), 어쩌면 알기 전부터 경험했던 모든 과정이 UX를 평가하는 각각의 요소가 되어 최종으로 총체적인 평가를 하게 된다는 점을 고려하고(총체성 holistic), 지금 경험하는 동시에 처해있는 모든 환경이 영향을 미칠 수 있다는 점(정황성 contextuality)을 알고 있어야 한다.

도널드 노먼의 이모셔널 디자인에는, 좋은 디자인을 설명하는 3가지 이론이 있다.

본능적 디자인 : 인간의 감성에 본능적으로 통하는 아름다운 시각적,경험적 디자인을 할 것

행동적 디자인 : 인간의 행동에 영향을 주는 기능적으로 유용한 디자인을 할 것

반성적 디자인 : 인간과 상호작용하는 것으로서 개인적 유대관계를 형성해 가치를 생성하는 디자인을 할 것

당연히 이 모든 것을 충족했을 때 사람들에게 즐거움을 주는 좋은 디자인이라고 할 수 있다.

최근 UI 디자인 트렌드

다크모드
애플의 쿠퍼티노 디자인
마이크로 인터랙션

최근 UX/UI 디자인 트렌드

AI 기반 개인화 인터페이스
대화형 AI의 발전 (CLI-GUI-NUI)
VUI
immersive experience
벤토박스, 글래스

프로덕트

좁은 의미 : 구체적인 산출물

넓은 의미 : 기능을 제공하는 산출물 그 이상의 총체적인 경험

프로덕트 디자이너는 고객의 니즈, 페인포인트를 찾아서 해결하는 역할

고객이 어떤 문제를 겪고 있는가?
고객은 무엇을 원하는가?
해결 방안의 임팩트는 어떠한가?
고객 경험은 어떻게 설계 되어야 하는가?

MVP(minimum viable product) → PMF(product market fit)

agile vs waterfall method

GPTs 추천 목록

컨셉 및 아이디어 발상용

Midjourney prompt generator 디자인 영감을 위한 이미지 프롬프트 생성

Logo Creator 로고 디자인 아이데이션

Design Mentor 디자인 방향성 및 전략 조언

UI 디자인 지원

UI Generator 기본적인 ui 컴포넌트 및 레이아웃 제안

Color Palette Generator 프로젝트에 맞는 컬러 스키마 제안

Typography Assistant 폰트 조합 및 타이포그래피 시스템 설계 도움

리서치 및 분석

UX Resarch Helper 사용자 리서치 계획 및 질문 설계

Persona Creator 상세한 사용자 페르소나 생성

User Journey Mapper 사용자 여정 맵 작성 지원

프로토타입 및 문서화

Wireframe Assistant 와이어프레임 구조 설계

Design System Builder 디자인 시스템 구축 가이드

Documentation Helper 디자인 가이드라인 문서 작성

접근성 및 품질 체크

WirefraAccessibility Checkerme Assistant 와이어프레임 WCAG 가이드라인 기반 체크 구조 설계

Design Review Assistant 디자인 시스템 디자인 리뷰 및 개선점 제안구축 가이드

프롬프트 엔지니어링 방법

제로샷
원샷/퓨샷
단계별(Chain of Thought) 사고 유도
역할 부여(Role Play)
형식/제약 조건 지정
도메인 특화(context)
반복 개선(Iterative Refinement)
부정확 응답 방지

인공지능의 오류에 대처하는 방법 5

TIL 260306 반응형 디자인 알아보기

지지군 — Mon, 9 Mar 2026 01:24:48 +0900

https://rnfltpgus.github.io/knowledge/responsive-web/fluid-grid/

가변 그리드(Fluid Grid)란?

다음 글 React - Suspense, lazy에 대해 잠깐

rnfltpgus.github.io

UI 생성 활용 AI

Relume AI
Galileo AI
Visily

AI 다루기 [최고의 프롬프트 엔지니어링 강의] 책 참고

UX 설계 순서

1 문제 정의
2 IA (정보 구조)
3 User Flow (사용 흐름)
4 Wireframe (화면 구조)
5 UI 디자인
6 Prototype

IA	정보가 어떻게 정리돼 있지? (설계된 구조와 구조의 집합)
sitemap	IA 구조 설계 결과 전반
User Flow	사용자는 어떤 경로로 행동하지? (흐름)
Wireframe	화면 구조는 어떻게 생겼지? (시안)
UI	디자인은 어떻게 보이지? (디자인)

IA와 userflow, navigation 개념의 혼동이 있어서 찾아본 자료

https://story.pxd.co.kr/1600

신입디자이너를 위한 IA 알아보기

들어가며 IA는 우리가 사용하는 모든 서비스가 가지고 있습니다. 그래서 새로운 서비스를 만들거나 기존 서비스를 개선할 때에도 중요한 부분인데요. 올 한 해 다양한 서비스의 IA를 설계하고 개

story.pxd.co.kr

https://story.pxd.co.kr/238

기능배치의 원근법

르네상스 이래 원근법은 2차원의 평면에서 3차원의 입체를 표현하기 위한 기교로서 널리 활용되었는데, 시각적인 효과면에서 볼 때, 근경-중경-원경에 따른 시각적인 깊이감을 줌으로써 시선의

story.pxd.co.kr

https://m2.material.io/design/navigation/understanding-navigation.html#types-of-navigation

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

m3.material.io

Jesse James Garrett가 정리한 인터랙션 디자인의 5가지 차원(5 Dimensions of Interaction Design)

1. 단어 - ux writing

2. 시각적 표현 - 모든 시각적 요소

3. 물리적 객체 또는 공간 - 화면 밖의 디바이스와 공간

4. 시간 - 시간에 따라 변화하는 요소 motion

5. 행동 - 사용자의 행동과 그에 대한 시스템의 반응

인터랙션 디자인의 주요 원리

'사용자는 바보다'

1. 피드백 - 진행 상황을 피드백

2. 일관성 - 같은 요소에는 같은 인터랙션

3. 가시성 - 사용자가 할 수 있는 행동을 '볼 수 있게'

4. 관용성 - 사용자에 대한 관용

5. 매핑 - intuition을 우선으로

트리거 와 인터랙션 ; 트리거는 어떤 행동이 발생했는지 정의하고, 이 행동에 대해 어떻게 반응할지 설정하는게 인터랙션이다.

오늘 배운 figma plugin

- responsive : 반응형이 여러 브레이크 포인트에서 어떻게 작동할지 실행해볼 수 있는 플러그인

클론 디자인 팁 모음 (계속 수정)

지지군 — Mon, 9 Mar 2026 01:15:34 +0900

클론

가변되는 값(gap)은 정수가 아니어도 상관없음 글씨크기 짝수일수록 좋고 가로는 홀수 상관 x 세로는 무조건 짝수

정해진 값은 최소한 정수이어야 함

간격값

안드로이드는 8 배수가 최고! 2,4,8 배수

IOS는 홀수가 되기도 함

간격 - constraint 보단 alignment

오토레이아웃 쓰는게 개발자랑 소통할때도 좋음

2~4픽셀로 자간행간 조절

disabled 같은 거 상태 다른 똑같은 모양에 할거면 style로 color/icon/disabled이런식으로 저장해놓기

OR 마스크 씌워서 컴포넌트 세트 만들고 nested instance 연결하기

뱃지같이 겹치는 요소는 gap을 -로 겹치게 할 수 있다 혹은 constraint로 위치 고정

Youtube Madia Designer [나만 모르고 있는 UI 디자인을 위한 10가지 원칙]

텍스트 1배수 12폰트 이상 2배수 24폰트 이상
적절한 버튼사이즈(터치시 오류가 발생하지 않도록)
아이콘의 통일감 (및 컨셉 일정하게 유지)
접근성 (폰트 컬러 4.5:1 이상 컬러 활용)
스타일 통일감 주기
계층 구조 구분짓기(버튼, 폰트 등)
하단 네비게이션(텍스트의 무분별한 생략 X)
컨텐츠간 여백(모바일의 경우 스크롤 길이 신경안써도됨)
컨텐츠간 구분(라인,여백,면색,카드 ui등으로 구분)
모바일 레이아웃은 화면이 좁으니 큼지막하게 짤것.

Youtube Madia Designer [나만 모르고 있는 UI 디자인 폰트 원칙 7가지 실무 Tip]

1. 화려함보단 심플하게

텍스트는 화려함 x 집중도 떨어짐

2. 읽기 편한 폰트 정렬

가운데보단 좌측정렬

3. 폰트 포인트 컬러 사용

매우 중요한 부분만 포인트 컬러

4. 폰트 계층구조

자연스럽게 시선이 흐르게끔

왼쪽보단 오른쪽에 시선이 더 마지막에 흐르기 때문에 좌는 이미지 우는 정보성 같이 구성해서 오른쪽에 중요한 내용을 두기

5. 일관된 폰트 스타일

다양한 폰트 X

6. 다양한 폰트 두께

많으면 3개, 기본 2개

7. 폰트는 잘 보이고 크게

모바일 디자인은 모바일로 최종 확인

Youtube Madia Designer [이젠 알아야죠? 실무 디자인 여백 사용 원칙 7가지 Tip]

1. 여백을 활용한 폰트그룹

(가독성과 그룹핑) 넓게 띄워서 점점 줄여나가기

2. 아코디언 테이블 여백

숨겨지는 부분의 여백은 위보다 아래가 넓어야 묶이는 느낌이 생긴다

3. 연관 검색어 여백 활용

버튼 여백은 넉넉하게 가로 세로 최소 44px

4. 카드 UI

상하좌우 여백 빡빡하지 않게, 모서리 라운드 조금씩(날카롭지 않아 보이게), 텍스트/오브젝트같은 경우 라운드 안쪽으로 살짝 들여쓰기

5. 상품 섬네일 여백

상품목록 단이 바뀔때 그룹핑이 잘 되어보이도록 충분한 간격을 주기. 스크롤 중에는 간격 여백이 더 안보임

6. 각 텍스트 타이틀 간 여백

바닥에 정보를 뿌리는 정보성 디자인일 경우 라인 혹은 여백으로 그룹핑(혹은 BG)

7. 타이틀 - 본문 - 버튼 여백 구조

타이틀을 보고 본문은 흘리듯 보고 버튼에 시선이 갈 것이기 때문에, 본문은 덜 강조 되면서 셋이 다른 그룹으로 여백에 의해서 그룹핑 되면 편안함

* 보여주고자 하는 컨텐츠를 보여주고, 불필요한 내용을 안보게 하고, 답답한 것들을 풀어주거나, 여백을 타이트하게 해서 뭉쳐주는 것이 모두 여백의 역할

I_ji_you

디자인 시스템 스터디

UX writing 스터디 - 유저가 반응하는 광고 소재의 특징 (토스 애즈 참고)

바이브 코딩에 필요한 기초 핵심 개념 스터디

[앱인토스 바이브코딩 챌린지 도전기] 1. 신뢰 = 가치

- 바이브 코딩과 FOMO

- 신뢰 는 가치 다.

부트캠프 3~4주차 : 카카오톡 유저플로우, 비즈니스 로직 분석 및 개선 미션

상단 앱바 중 친구추가 아이콘 찾아 터치

ID 아이콘 터치

상대 아이디 입력

아이디 검색

친구 추가 완료

피그마 바로가기

비즈니스 로직이란,

유저플로우 | 유저는 새로운 친구를 ID로 검색해서 찾을 수 있다 ➜ step 1 유저 간 연결

Problem

Cause

Solution

Design

Expectation

More...

카카오톡 유저 플로우(유저는 새로운 친구를 ID로 검색해서 찾을 수 있다.) 분석 해결 실습

유저 플로우(유저는 새로운 친구를 ID로 검색해서 찾을 수 있다.)

Problem

검색 아이콘과 친구추가 아이콘을 혼동(검색아이콘을 통해 진입했을때 ID 검색 친구추가가 안되는 것으로 오해한 시점에서 풀어나간 과정입니다)

Cause

Solution

Design

Expectation

UX/UI 디자인 레퍼런스 사이트 모음

부트캠프 1~2주차 : 프로덕트 디자인 이해

TIL 260306 반응형 디자인 알아보기

클론 디자인 팁 모음 (계속 수정)

검색 아이콘과 친구추가 아이콘을 혼동
(검색아이콘을 통해 진입했을때 ID 검색 친구추가가 안되는 것으로 오해한 시점에서 풀어나간 과정입니다)