코드그라데이션

인하우스 vs 에이전시 by 당근대장님

완벽한 장면 — Fri, 16 Jan 2026 13:11:48 +0900

에이전시 vs 인하우스 : 구축·운영 관점에서 보는 커리어 구조 정리

1. 전제: “지원할 수 있는 회사”의 공통 조건

구축과 운영을 하는 회사
이 두 가지를 하지 않는 회사라면
→ 기획자로 들어갈 일이 거의 없음

즉,

기획자 채용 = 서비스가 이미 있거나, 만들거나, 운영하는 조직

2. 구축·운영 조직의 두 가지 형태

2-1. 에이전시(Agency)

에이전시가 하는 일

구축 + 운영을 모두 수행
인하우스의:
- 구축 외주를 받기도 하고
- 운영 위탁을 받기도 함

즉,

고객 = 인하우스
에이전시는 여러 기업의 서비스를 대신 만들어주고 운영해주는 역할

구조적으로 보면

기업 → 에이전시에게 “이거 만들어주세요”
에이전시 → 플랫폼 구축 + 운영 대응

2-2. 인하우스(In-house)

인하우스의 정의

이미 구축된 서비스/플랫폼이 있음
그 안에서 고객을 상대로 직접 비즈니스를 함

핵심 키워드: 도메인

여행 도메인
교육 도메인
이커머스 도메인
렌탈, 금융, 콘텐츠 등

인하우스는

“특정 도메인 안에서 깊게 파는 조직”

3. 왜 대기업들은 내부에서 안 만들까?

대기업(쇼핑몰 리뉴얼, 카드, 플랫폼 등)은
- 자체 인력으로 구축 잘 안 함
- 대부분 외주(에이전시)에 맡김

그래서:

에이전시는
- 대기업 레벨의 요구사항
- 대규모 플랫폼 구조
- 관리자/운영 노하우
  를 직접 경험하게 됨

이게 곧 레퍼런스가 됨

4. 에이전시의 가장 큰 장점 = 레퍼런스

에이전시에서 쌓는 것

“이 회사의 이 서비스를 내가 구축했다”
“이 규모의 플랫폼을 경험했다”

이게 의미하는 바:

레퍼런스 레벨이 올라간다
이력서에 쓸 수 있는 회사/프로젝트가 강해진다

그래서

에이전시 → 인하우스로 이동이 가능해진다

5. 인하우스로 바로 가기 어려운 이유

인하우스가 보는 관점

“우리는 고객을 직접 상대한다”
“이 도메인을 깊게 이해하는 사람이 필요하다”

그래서 인하우스는:

도메인 경험자 선호
도메인 전문가를 뽑으려는 성향이 강함

결과적으로

에이전시 → 인하우스는 도메인 이해가 없으면 어려움
특히 완전히 다른 도메인으로의 이동은 더 어려움

6. 그럼에도 불구하고 에이전시를 추천하는 이유

이유 1. 선택의 폭이 넓다

여러 도메인 경험 가능
여러 규모의 플랫폼 경험 가능

이유 2. 인하우스로 가는 ‘지름길’이 될 수 있다

특정 기업/도메인의 구축을 했다면:
- 해당 기업
- 해당 도메인의 인하우스로 이동이 쉬워짐

예:

삼성 계열 쇼핑몰/카드 구축 경험
→ 삼성 쪽 인하우스 지원 시 설득력 급상승

7. 에이전시 → 인하우스 이동의 현실적인 흐름

특히 3~4년 차 에이전시 기획자
인하우스에서 굉장히 선호

이유:

구축 경험 있음
전체 구조 이해도 높음
관리자/운영/기획 전반을 다 겪어봄

그래서

에이전시 3~4년 차 = 인하우스 입장에서 좋은 인재

8. 인하우스의 한계 (초반 선택 시)

인하우스의 구조적 특징

이미 플랫폼이 있음
새로 만드는 일은 거의 없음
주 업무:
- 서비스 운영 기획
- 마케팅 기획
- 개선 기획

즉,

구축 경험을 쌓기 어려움
커리어 방향이 특정 도메인으로 고정됨

9. 커리어 관점에서의 핵심 정리

에이전시

✅ 선택의 폭 넓음
✅ 다양한 도메인/플랫폼 경험
✅ 레퍼런스 쌓기 좋음
❌ 업무 강도 높을 수 있음

인하우스

✅ 특정 도메인 깊이 있게 파기
✅ 안정적인 구조
❌ 초반 선택 시 커리어 폭이 좁아질 수 있음
❌ 다른 도메인 이동이 어려움

스토리보드 (3)

완벽한 장면 — Fri, 16 Jan 2026 09:47:43 +0900

1. 스토리보드는 ‘그리기’ 이전에 이미 반 이상 끝난다

스토리보드는 도형을 잘 그리는 기술이 아님
→ 질문 → 가치 → 구조 → 시각화의 결과물

1-1. 가장 먼저 해야 할 것: 질문

의뢰가 들어오면 바로 그리지 않는다.

반드시 아래 질문부터 한다.

고객은 누구인가?
어떤 서비스를 하려는가?
매출 구조는 무엇인가?
어떤 구조를 원하는가?
기존 서비스와 무엇이 다른가?

이 질문을 안 하면
→ 나중에 반드시 다시 그린다

2. ‘컨셉’과 ‘가치’를 먼저 정의해야 한다

2-1. 왜 가치가 중요한가

쇼핑몰이 3,000개 있으면
→ 가치가 없으면 3,000분의 1
그 경우 살아남는 방법은?
→ 마케팅 비용을 태우는 것뿐

2-2. 가치의 예

쿠팡 = 당일 배송
마켓컬리 = 새벽 배송

이 가치는

UI 이전에
사람 머릿속에 먼저 자리 잡은 개념

스토리보드는 이 가치를 화면으로 번역하는 도구

3. 스토리보드 이전 단계의 전체 흐름

프론트 설계 전체 순서

컨셉 정의
핵심 가치 도출
인포메이션 아키텍처(IA)
텍스트 왁싱(Text Waxing)
핵심 페이지 정의
아이디어 스케치
스토리보드 제작
스프린트 회의
디스크립션 & 코멘트 확정
콘텐츠 설계

4. 텍스트 왁싱(Text Waxing)이 왜 중요한가

텍스트 왁싱이란?

의사결정권자와 ‘단어’를 맞추는 작업

예시

기획자: “장바구니”
의사결정자: “바구니”

이걸 초기에 안 맞추면?

디자인
개발
FAQ
문서

전부 다시 해야 함

텍스트 왁싱은
→ IA 단계에서 반드시 끝낸다

5. 스토리보드는 ‘확정된 그림’이 아니다

잘못된 방식

스토리보드 → 바로 디스크립션 작성

6. 웹과 모바일 설계 사고의 차이

6-1. 웹(Web)

수천~수만 개 정보 존재
메인의 역할:
→ 잘 팔려야 할 것 / 노출돼야 할 것 큐레이션
정보 밀도가 높음

6-2. 모바일(App)

특정 목적을 가지고 진입
기능 중심
메인이 없는 앱도 많음
- 예: 카카오톡

앱에서 웹처럼 욕심내면

→ 사용자는 혼란

7. 화면 레이아웃 기본 용어 정리 (필수)

스토리보드를 그리려면 영역 용어를 알아야 함

용어의미

GNB	상단 글로벌 메뉴 바
GMB	GNB 하단 마케팅 바
Top Area / Identity Area	키 비주얼 / 통 배너
LMB	좌측 메뉴 영역
RMB	우측 보조 영역
Intro	인트로 영역
Body Area	본문
Footer	하단 영역

이 용어를 알고 있어야
→ 디자이너/개발자와 소통 가능

8. 스토리보드 마스터 템플릿 개념

8-1. 슬라이드 마스터 원칙

첫 번째 마스터: 완전 비움
이후 마스터:
- 표준
- 이전 페이지 이동
- 다음 페이지 이동
- 이전/다음 페이지 이동

8-2. 디자인 테마로 저장

디자인 > 현재 테마 저장
이후 새 PPT에서도 바로 사용 가능

스토리보드는 “파일”이 아니라 “환경”이다

9. 아이콘 템플릿 운용 방식

듀얼 모니터 사용
- 1: 스토리보드
- 2: 아이콘 템플릿
위치/사이즈 고정
Ctrl + V로 빠르게 조립

고수일수록
→ 새로 그리지 않고 근처에서 가져온다

10. 스토리보드는 ‘표(Table)’로 그린다

10-1. 언제 표를 쓰는가

클릭 시 하단이 바뀌는 영역
탭 전환
메뉴
리스트
카드

거의 전부 표

10-2. 언제 박스를 쓰는가

하이퍼링크
새 창 이동
화면 전환 없음

10-3. 표의 절대 규칙

모든 선 굵기: 0.5
이 규칙을 깨는 순간:
→ 촌스러운 스토리보드

11. 정렬과 배치의 핵심 스킬

끝과 끝을 먼저 맞춘다
그 다음:
- 맞춤 > 가로 간격 동일
썸네일 4개?
→ Ctrl + Shift로 복제 → 맞춤

눈대중 금지

12. 오브젝트 & 입력 기본 규칙

기본 폰트

맑은 고딕
9pt / 8pt
기본 텍스트 상자 설정 필수

기본 도형

채우기 없음
윤곽선 0.5
기본 도형 설정

13. 표준 조작 키 (실무 필수)

키기능

Alt	부드러운 이동
Ctrl	복사
Shift	수직/수평 이동
Ctrl + Shift	복사 + 정렬 이동

14. 레이아웃 비율 감각 (고급 영역)

기본 비율 감각

1 : 3 : 6
좌우 1:1은 거의 없음
여백도 항상 다르게

좋은 레이아웃의 특징

넓어졌다 → 좁아졌다 → 넓어졌다
리듬이 있음
변화가 있음

이 변화가 미적 완성도를 만든다

15. 와이어프레임 vs 스토리보드

와이어프레임

덩어리
구조 중심
비율 확인용

스토리보드

실제 화면 단위
표 기반
디테일 설계

SB 제작 표준 절차

완벽한 장면 — Thu, 15 Jan 2026 21:52:09 +0900

스피커스(Speakers.kr) 강의를 듣고, 개조식으로 정리한 글입니다.

1. 스토리보드 작업의 기본 구조 이해

1-1. 스토리보드는 “환경 세팅”이 절반이다

스토리보드는 그리기 전에 구조를 만들어 두는 작업이 핵심이다.

슬라이드 마스터
마스터 템플릿
아이콘 템플릿
기본 도형 / 기본 텍스트 설정

이 4가지를 먼저 만들지 않으면
→ 매 장표마다 반복 작업 + 정렬 붕괴 + 품질 편차 발생

2. 슬라이드 마스터 & 마스터 템플릿 제작 절차

2-1. 슬라이드 마스터 진입

보기 > 슬라이드 마스터

2-2. 마스터 구성 원칙

첫 번째 마스터

아무것도 넣지 않음 (완전 빈 마스터)

두 번째 이후 마스터

스토리보드 전용 마스터 구성

2-3. 스토리보드 마스터에 포함될 레이아웃들

표준(기본 화면)
이전 페이지 이동
다음 페이지 이동
이전/다음 페이지 이동

즉, 화면 이동 케이스별 마스터를 미리 정의

3. 마스터를 “디자인 테마”로 저장하기 (핵심)

3-1. 현재 테마 저장

디자인 > 우측 삼각형(더보기) > 현재 테마 저장
파일명 예시
- 스토리보드_마스터
- 스토리보드_코어_마스터

3-2. 효과

새 PPT를 열어도
→ 디자인에서 스토리보드 마스터 테마 선택 가능
레이아웃 클릭 시
→ 스토리보드용 레이아웃이 자동 노출

결론

스토리보드는 “슬라이드 마스터 + 디자인 테마”로 관리해야 한다.

4. 아이콘 템플릿 운용 방식

4-1. 아이콘 템플릿이란?

자주 쓰는 아이콘 / UI 오브젝트를 모아둔 전용 PPT 파일
스토리보드 작업 시 듀얼 모니터로 병행 사용

4-2. 운용 방식

모니터 1: 스토리보드 작업 파일
모니터 2: 아이콘 템플릿 파일
필요한 아이콘 → Ctrl + C / Ctrl + V

4-3. 핵심 규칙

아이콘 위치, 크기 절대 자주 바꾸지 말 것
항상 같은 위치/사이즈로 유지
→ 다음 장표 작업 속도 급상승

5. 공통 오브젝트는 “이미지화”해서 관리

5-1. 언제 이미지로 저장하나?

팝업
공통 레이어
반복 UI 덩어리

5-2. 방법

오브젝트 드래그 선택
우클릭 → 그림으로 저장
다시 불러와 사용

이유

오브젝트 중첩 시 수정 난이도 폭증 방지
SB 안정성 확보

6. 스토리보드 기본 스타일 세팅(필수)

6-1. 기본 텍스트 설정

기본 폰트 크기: 9pt / 8pt
글꼴: 맑은 고딕
설정 방법:
- 텍스트 박스 선택 → 우클릭 → 기본 텍스트 상자 설정

이후 새 텍스트는 자동으로 9pt 적용

6-2. 자동 고침(카피 단축키) 활용

파일 > 옵션 > 언어 교정 > 자동 고침 옵션
예시
- 카피 → 긴 카피 문장
- 푸터 → 회사 푸터 문구

반복 입력 시간 대폭 절약

6-3. 기본 도형 설정

도형 채우기: 없음
도형 윤곽선: 0.5
우클릭 → 기본 도형 설정

이후 모든 박스는 자동으로 SB 스타일 유지

7. 오브젝트 조작 핵심 단축키

동작키

부드러운 이동	Alt
복사 이동	Ctrl
수직/수평 이동	Shift
복사 + 수직/수평 이동	Ctrl + Shift

관리자 / 리스트 / 반복 UI 설계 시 필수

8. 눈금 & 안내선 활용 규칙

우클릭 → 눈금/안내선 표시
마스터 템플릿의 좌우 기준선에 맞춰 배치
붙는 느낌(스냅)으로 정렬 → 정교한 SB 완성

스토리보드의 완성도 = 정렬 정교함

9. “표(Table)” 사용 원칙

9-1. 언제 표를 쓰는가?

클릭 시 하단이 바뀌는 메뉴
탭 전환 구조
리스트 / 카드 / 메뉴 / 정보 영역

90% 이상은 표로 만든다

9-2. 언제 박스를 쓰는가?

새 창 이동 (하이퍼링크)
화면 전환 없음

9-3. 표 사용 절대 규칙

모든 테이블 라인 굵기: 0.5
이 기준을 벗어나면 → 촌스러움 발생
표 추가: 마지막 셀에서 Tab

10. 정렬의 정석 공식

10-1. 균등 배치 공식

오브젝트 끝과 끝 위치 배치
전체 선택
맞춤 > 가로 간격 동일

눈대중 정렬 금지

11. 스토리보드 스타일 가이드의 필요성

11-1. 혼자 작업해도 필요

11-2. 같이 작업하면 필수

버튼 기준 예시

높이: 0.4
넓이: 2~5
색상: 2 / 4 / 6번째 컬러만 사용

숫자로 기억해야 통일성 유지 가능

12. 스토리보드 vs 와이어프레임 차이

와이어프레임

덩어리 중심
구조 정의용
비율 파악

스토리보드

실제 화면 단위
테이블 기반
디테일 설계

13. 레이아웃 & 비율

기본 비율 감각
- 1 : 3 : 6
여백은 항상 동일하지 않다
넓어졌다 → 좁아졌다 → 다시 넓어지는 리듬감
이 변화가 화면의 “미적 완성도”를 만든다

당근대장 PPT 스토리보드 그리기 실습 (1)

완벽한 장면 — Thu, 15 Jan 2026 21:17:30 +0900

0) 시작 전 준비(기본 세팅)

새 프레젠테이션 열기
슬라이드 크기 먼저 변경
- 디자인 > 슬라이드 크기에서 A4 용지 크기로 변경
불필요한 기본 슬라이드 삭제
슬라이드 마스터 템플릿 불러오기
- 저장해둔 “스토리보드 마스터(슬라이드 마스터 템플릿)” 적용
표지(커버) 삽입
다음 페이지부터 작업 흐름 준비
- 새 슬라이드 추가 → 분류(예: 프론트) 페이지 구성
표준 템플릿(소트/표준 템플릿) 불러오기
작업 습관
- Ctrl + S를 계속 반복 저장(습관화)

1) 본격 실습: “옵션 사이트 화면 SB” 그리기(큰 틀 → 세부)

1-1. 레퍼런스 가져오기(로고/검색바 등)

1. 옵션 사이트(레퍼런스)에서 로고/배너/검색 UI 등 복사해서 붙여넣기

듀얼 화면이 아니어도, 필요한 요소는 사이트에서 복사→붙여넣기로 가져온다.

2) 상단 영역(Top Area) 만들기

2-1. 검색 영역 라인부터 잡기

1. 라인(선) 굵기 설정

선을 그린 뒤 **굵기 약 2.25 정도(“2에 4분의 1”)**로 설정(강사 기준)

2. 검색바/검색 버튼은 가능하면

다른 사이트(예: 옥션)의 검색 버튼 요소를 그대로 복사해서
옵션 사이트 레이아웃에 **잘라 붙이는 방식(Ctrl+C/V)**으로 처리

2-2. 상단 로그인/메뉴 텍스트 영역

상단 메뉴(로그인/회원가입/장바구니/마이옵션/고객센터/판매하기 등)는 텍스트로 처리
텍스트 스타일 기준
- 기존 18pt로 잡혀 있으면 9pt 또는 8pt로 변경
- 글꼴이 맑은 고딕인지 확인
상단(Top Area) 라인에 맞춰 텍스트 배치

2-3. 하단 배너(패턴 채우기) 만들기

하단 배너 영역은 사각형 도형으로 만든다
도형 스타일
- 채우기: 블랙
- 우클릭 → 도형 채우기 > 패턴 채우기 → 두 번째 문양 선택
- 윤곽선(라인): 없음
배너 텍스트 입력(예: “옵션 단독 진행”, “폴딩 박스 증정” 등)
“고수 방식” 팁
- 오브젝트를 메뉴로 찾아가지 않고
- Ctrl 누르고 드래그 복제로 빠르게 배치

3) GNB 영역(상단 7개 메뉴) 만들기

3-1. 7개 메뉴 구성(전체 카테고리~최근 본 상품)

상단 메뉴 개수 확인 → 7개 배치
텍스트 스타일 기준
- 0.5
- 테두리 없음 / 음영 없음
- 텍스트 9pt, 굵게
메뉴 항목(스크립트 기준)
- 전체 카테고리 / 쿠폰 / 포인트 / 베스트 / 스마일배송 / 유니버스클럽 / 사업자클럽 / 최근 본 상품
  (말 중에 7개라 했지만 항목은 더 언급됨 → 실제 화면 기준으로 맞추고, 필요한 만큼 조정)

3-2. 햄버거 메뉴 아이콘 추가

“전체 카테고리” 왼쪽에 햄버거 박스가 있으면
- 약간 띄워서 공간 확보
- 햄버거 아이콘을 복사해서 붙여넣기

3-3. 눈금/안내선으로 정렬(필수)

눈금/안내선 설정
- 세로 안내선 사용(불필요한 안내선 제거)
좌/우 기준으로 정렬 잡고
요소들을 안내선에 맞춰 “갖다 붙이듯이” 배치

3-4. 테두리 처리 규칙

내부 테이블은
- 전체 테두리 없음
- 안쪽 테두리만 적용
하단 테두리/상단 테두리 확인
- 실제 화면에서 떨어져 보이거나 없다면 과감히 제거
귀찮으면
- 자주 쓰는 선 스타일은 기본 선으로 설정해두고 반복 사용

4) 좌측 카테고리 테이블(좌측 LNB) 만들기

4-1. 테이블 개수 및 생성 방법

좌측 테이블 개수 확인(강사: 9개 언급)
삽입 > 표로 만든 뒤,
끝 칸이 부족하면
- 마지막 셀에서 Tab 누르면 자동으로 칸 추가

4-2. 스타일 기준

라인 굵기: 0.5
테두리: 없음
글자색: 화이트
채우기: 블랙
폰트: 9pt
입력 예시(스크립트 흐름대로)
- 브랜드패션 / 의류 / 뷰티 / 잡화 / 식품 / 마트 / 유아 / 가구·생활 / 건강·렌탈 / 가전·디지털 / 컴퓨터 / 스포츠·레저 / 자동차 / 여행 / 도서 … 등

4-3. 하단 배너 영역

하단부는 배너 영역이므로
- 도형 채우기 > 패턴 채우기로 처리
좌측 영역(LNB)은 여기까지로 “구조 확정”

5) 키 비주얼(메인 배너) 영역 만들기

키 비주얼 영역은 큰 박스를 쭉 드래그해서 영역 확보
윤곽선: 없음
텍스트는 “정렬이 어려우면”
- 텍스트 박스를 위에 얹어서 배치해도 됨
텍스트 처리 원칙
- 텍스트 오브젝트를 굳이 가져오지 말고, 텍스트만 입력
- (예: “CJ제일제당 X 농심”, “15% 할인”, “더울수록 더욱 시원한 3단 콤보 할인” 등)
하단에 붙는 배너/GMB성 요소는
- 기존 오브젝트를 복사해서 재활용
테이블/리스트 영역이 있으면
- 필요 시 열 삭제
- 전체 맞춤 후 스타일 적용: 블랙 텍스트 / 화이트 배경 / 8pt
중간 구분선이 있으면
- 안쪽 테두리로 열 라인 표현
중앙 오브젝트 박스는
- 패턴 채우기, 윤곽선 없음
좌우 삼각형(화살표)이 있으면
- 삼각형 도형으로 간단히 그려 추가

(( 6) “중요 텍스트 강조” 규칙 ))

강조해야 하는 문구가 있으면
- 폰트 굵기 / 폰트 크기를 반드시 지정
이걸 안 하면
- 디자이너가 “중요도”를 판단할 근거가 없고
- 결과물에서 “왜 이렇게 안 했냐”를 말할 수 있는 기준도 사라짐

7) 폰트 오류 방지

작업 중 폰트가 틀어지면 레이아웃이 깨질 수 있음
해결 방식
- 글꼴 바꾸기로 전체 선택 → 맑은 고딕으로 통일
초기에 조기 발견이 중요(뒤늦게 바꾸면 다 틀어짐)

8) 상품/가격 영역(표로 구성) 그리기

표는 우선 테두리 있음으로 만들어서 구조 잡기
이미지 자리(상단)는
- 셀 병합
텍스트 자리도
- 셀 병합
작업 방식 핵심
- 지금은 “정확한 사이즈”보다
- 열/행 구조(오브젝트 단위) 먼저 정의하는 단계
작업 중 판단 포인트
- “행이 부족하네 / 열이 부족하네”를 쉽게 발견 가능
쿠폰/가격 표현
- 2줄이면 엔터로 2줄 구성
- 강조 금액(예: 1860원)은 폰트 사이즈 키움
- 취소선(정가)은 취소선 처리
패턴 채우기/색 채우기 필요한 영역은
- 블랙 + 패턴 채우기로 “이미지 영역” 느낌만 준다

9) 카드/상품 3개 정렬(맞춤 기능 활용)

3개 오브젝트가 들어가야 하는데 안 맞으면
- 먼저 전체 영역 크기를 조정
끝과 끝(좌우)을 맞춘 뒤
3개 선택 → 그리기 도구 > 맞춤 > 가로 간격 동일하게
부족하면
- 더 줄이거나 늘리면서 반복 조정

10) 반복되는 GNB/GMB는 “마스터로 고정”

메인을 다 그린 다음,
상단 GNB/GMB가 고정이라면
- Ctrl + C로 복사
- 보기 > 슬라이드 마스터 진입
- 해당 마스터에 Ctrl + V로 붙여넣기
- 필요하면 “빈 공간용 레이아웃”도 하나 확보
- 마스터 보기 닫기
이후부터는
- 고정된 상단 영역은 매번 그리지 않고
- 마스터 기반으로 SB를 계속 제작

참고: 10-1. “폴더/버전 관리” 형식

SB를 항목별로 나눠 관리(예: “쿠폰/포인트” 화면이면)
- 상단 메뉴 중 쿠폰/포인트만 색상 강조 처리
- 해당 주제에 맞는 SB만 집중해서 제작

파이썬 가상환경 프로젝트별 설치

완벽한 장면 — Sat, 31 May 2025 09:34:03 +0900

파이썬과 fastapi를 이용하여 간단한 개발을 위해 틈틈이 공부중이다.

그런데 Fastapi는 실행할 때, 가상환경에서 하는 것이 일반적인가보다.

그래서 방법을 cursor 에게 문의하였다.

1. 먼저 기존 venv 폴더가 있다면 삭제:

rm -r venv

2. 새로운 가상 환경 생성:

python -m venv todos

3. 가상 환경 활성화:

.\todos\Scripts\Activate.ps1

4. 활성화 후 Fastapi 설치

pip install fastapi

이렇게 하면

깨끗한 상태에서 시작
todos폴더 안에 독립된 Python 환경이 생성됨
FastAPI는 이 가상 환경 안에만 설치됨

문제상황 : 결제 프로세스 진행 중에 '가격 변동'이 발생했다면?

완벽한 장면 — Thu, 10 Apr 2025 00:40:48 +0900

문제 2)

프로세스는 장바구니 -> 결제화면 -> (PG) → 결제완료/결제취소/결제실패 이렇게 화면 3개.

이 때 '재고 소진'이 발생했다고 하면, 어떻게 처리해야 하는지를 따져봅시다.

Case 1. 각각의 페이지에 진입 시
Case 2. 각각의 페이지에서 다음 페이지로 넘어갈 때,
Case 3. 각각 페이지에 머무르고 있을 때 발생한 경우
Case 4. 페이지에 전체 다 넘어왔을 때

[적절한 해결 방안]

프로세스는 다음과 같다.
장바구니 → 결제화면 → (PG사) → 결제완료 / 결제취소 / 결제실패

이때 재고가 아닌 ‘가격 변동’이 발생한 상황이라면, 이를 어떻게 처리해야 할지 구체적으로 따져봐야 한다.

핵심 : 가격 변동은 재고 부족과 다른 이슈다

가격이 변동된다는 것은 회사나 사용자 둘 중 하나가 손해를 볼 수 있는 민감한 문제이며 재고 부족처럼 단순 처리로 끝나는 문제가 아니다.

고려할 사항

기획자는 기본적으로 사용자 중심의 대변인이어야 한다.
회사의 입장에서 보면, 사용자 중심적 사고를 하는 부서는 고객센터가 가장 앞에 있고,
그다음이 기획자라고 생각한다. 왜냐하면 마케터, 영업, MD, 경영진은 대부분 매출 중심 사고를 하기 때문이다.
그래서 회사 입장에서는 가격이 올랐으면 무조건 반영해서 결제하도록 만들려고 할 것이다.
내려갔을 때는 반영하지 않으려 할 것이다.

=> 하지만 기획자는 그렇게 생각해서는 안 된다.

사용자 경험이 핵심이며, ‘가격이 올랐을 때는 반영하지 않고, 내렸을 때만 반영하는 것’이
사용자 입장에서 가장 좋은 설계다.

고민되는 상황

가격이 올랐을 경우 → 반영할 것인가?
가격이 내렸을 경우 → 반영할 것인가?

이때 일반적으로 기획 과제에서는 업/다운을 모두 반영하는 방향으로 접근하는 경우가 많다.
하지만 여기서 중요한 포인트는 ‘사용자에게 아무런 안내 없이 가격을 반영하는 것’은 절대 해서는 안 되는 일이라는 것이다.
사용자는 가격 변동 사실을 모른 채 결제할 수 있기 때문에, 이는 기망 행위에 가깝다.

적절한 해결 방법 : 리프레시와 다이얼로그 안내

기획 관점에서 이상적인 흐름은 다음과 같다.

오토 리프레시 시점 또는CTA(결제하기) 버튼 클릭 시점에 가격 변동이 있음을 안내하는 다이얼로그 팝업을 띄운다.

팝업에서는 가격이 변동되었음을 알려주고,
사용자가 확인 버튼을 누르면 가격이 반영된 상태로 화면을 리프레시한다.
리프레시된 화면에서는 어떤 상품이 얼마에서 얼마로 바뀌었는지 명확하게 보여줘야 한다.

화면별 가격 반영 전략

1) 결제 화면

- 결제 화면에서는 업/다운 모두 반영하지 않는다.

이유는 오토 리프레시 주기 내(10~15분)에서는 큰 차이가 없고, 이미 담은 상품의 가격이 바로 바뀌면 사용자 입장에서는 납득하기 어렵기 때문이다.

- 단, 오토 리프레시 주기를 넘긴 경우에는 가격 변동을 반영한다.

10분 전에 동일한 가격으로 팔았다면, 10분 후에도 큰 손해는 없다.
그러나 시간이 지나 가격이 달라졌다면, 이는 합리적으로 반영해도 된다.

2) 장바구니 화면

- 여기에서는 가격 변동을 반영한다.

가격이 오르든 내리든 모두 반영한다.

하나의 해결책 사례

선택권이 있다면, 결제 화면에서는 "다운 가격만 반영’하는 방식을 택하자.

예를 들어 가격이 500원 내려갔다면, 이벤트 메시지를 함께 노출하며 사용자에게 긍정적 경험을 줄 수 있다.
기분 좋게 결제를 이어가도록 유도하는 설계다.

이런 설계를 할 때 고민해야 할 두 가지 포인트는 다음과 같다.

회사가 이 방식(다운 가격 반영)을 받아들일 수 있는가?
개발적으로 구현이 가능한가?

유의할 점 : 개발 난이도와 UX 고려

가격이 변동되면, 결제 화면에 적용된 쿠폰 및 포인트 정보를 모두 다시 계산해야 한다.
이는 개발 난이도가 꽤 높은 작업이며, 처리 방식은 두 가지로 나뉜다.

재계산을 자동 반영할 수 있다면 그대로 반영
불가능한 경우, 쿠폰 및 포인트를 초기화하고 사용자가 다시 설정하도록 유도

이때 고려해야 할 점은 가격 변동 폭이다.

500원 이상 할인이라면 사용자 입장에서 기분 좋은 경험이므로 초기화도 감수할 수 있다.
10원, 20원 정도의 차이로 다시 설정해야 한다면, 오히려 불편하고 짜증을 유발할 수 있다.

=> 따라서 다운 가격 반영은 “유저 만족도와 개발/비즈니스 부담 간 균형”이 핵심 포인트이다.

가재고와 판매중지

완벽한 장면 — Wed, 9 Apr 2025 23:27:37 +0900

가재고 (가상 재고) 방식

‘가재고’는 영화 티켓, 공연 좌석처럼 일시적으로 점유 가능한 자원에 적합하다.

장바구니에 담는 순간 일정 시간 동안 타인에게 노출되지 않도록 점유하는 방식

- 일반적으로 10~15분 단위로 오토 리프레시를 걸어 점유 상태를 해제하거나 유지한다.

- 가재고는 ‘가재고 → 실재고’ 전환 시점을 명확히 해야 하며, 보통 PG사에서 결제 성공 코드가 도달했을 때 실재고로 전환하여 재고를 차감한다.

=> 다만 공산품에서는 일반적으로 가재고 방식을 사용하지 않는다.

이유는 단일 좌석처럼 명확한 단위 점유가 불가능하고, 재고 반영 타이밍이 복잡해지기 때문이다.

판매중지 상태

공산품에서는 ‘판매중지’ 상태로 재고 관리를 우회하는 방식을 자주 사용한다.

예: 재고 수량이 3개 이하일 경우 자동으로 판매 중지 상태로 전환한다

장점

- 입고 수량이 자동 반영되어 상태가 변경된다.

- 이벤트 또는 특가 상황에서 머무르고 있는 유저들을 위한 여유 재고 확보가 가능하다.

ex) MD가 판매 패턴을 알고 있을 경우, “냉장고는 하루에 많이 팔리지 않으니 2개 이하 시점에서 판매중지 처리” 등의 전략을 설정한다.

문제상황 : 결제 프로세스 진행 중에 재고 소진이 발생했다면?

완벽한 장면 — Wed, 9 Apr 2025 23:07:36 +0900

문제 1)

프로세스는 장바구니 -> 결제화면 -> (PG) → 결제완료/결제취소/결제실패 이렇게 화면 3개.

이 때 '재고 소진'이 발생했다고 하면, 어떻게 처리해야 하는지를 따져봅시다.

Case 1. 각각의 페이지에 진입 시
Case 2. 각각의 페이지에서 다음 페이지로 넘어갈 때,
Case 3. 각각 페이지에 머무르고 있을 때 발생한 경우
Case 4. 페이지에 전체 다 넘어왔을 때

[적절한 해결 방안]

프로세스는 다음과 같은 흐름으로 진행된다.

장바구니 → 결제화면 → (PG사) → 결제완료 / 결제취소 / 결제실패

- 즉, 화면 기준으로는 총 3단계로 나뉜다.

- 이때 ‘재고 소진’이 발생했다고 가정할 때, 어느 지점에서 발생했는가에 따라 처리 방식이 달라져야 한다.

Case 1. 각 페이지에 진입 시

사용자가 장바구니에 a, b, c 상품을 담은 상태이다. 예: a(1천원)×3개, b(2천원)×2개, c(3천원)×1개
→ 총 주문금액 1만원
이 상태에서 a 상품이 소진되었을 경우, 해당 상품을 유저가 인지하지 못한 채 삭제하는 것은 적절하지 않다.
일반적으로는 해당 상품을 비활성화하거나 UI상에서 구분된 표시로 대체하고,
‘재고 부족’ 안내 문구와 함께 ‘재입고 알림 신청’ 기능 등을 제공한다.
이와 같은 처리는 장바구니 뿐 아니라 결제 화면에도 동일하게 적용 가능하다.

Case 2. 각 페이지에서 다음 페이지로 넘어갈 때

사용자가 다음 단계로 이동하기 위해 CTA(결제하기) 버튼을 클릭하면, 서버 통신을 통해 재고를 다시 확인한다.
- 이 때, 재고가 부족하면 다이얼로그 팝업을 띄워 재고 부족 상품을 안내하고, “부족한 상품을 제외하고 결제할 것인지” 또는 “다시 확인하여 장바구니로 돌아갈 것인지” 선택지를 제공한다.
또한 이 시점에 재입고 알림 버튼 등을 함께 노출하는 것이 일반적이다.

Case 3. 페이지에 머무르고 있는 동안 발생한 경우

사용자가 결제 페이지에 머무르면서 아무런 행동도 하지 않은 상태에서도 재고가 변동될 수 있다.
이를 대비해 대부분의 서비스는 오토 리프레시(auto-refresh) 기능을 적용한다.
- 일반적으로 10~15분 단위로 자동 새로고침을 설정하고,
- 헤더에 서버 통신 명령을 주어 최신 정보를 받아오는 방식이다.
오토 리프레시 외에도 CTA 버튼 클릭 시점에 재확인을 병행하여 처리 안정성을 높인다.

Case 4. PG사 결제 화면 이후, 즉 결제가 끝난 뒤에 발생한 경우

사용자가 PG사 화면에서 결제를 완료하고 돌아왔는데, 재고가 소진되었다면 심각한 문제로 이어질 수 있다.
최악의 경우는 결제가 되었는데 주문이 취소되며, 고객센터에 연락까지 해야 하는 상황이다.
- 이는 고객 불만은 물론, 인건비 손실로까지 이어진다.
따라서 이 상황에서는 차악의 대응이라도 필요하다. 예를 들면,
1. 주문을 자동 취소하고
2. “재고 부족으로 주문이 취소되었음”을 안내하며
3. 보상 쿠폰 등을 함께 제공하여 사용자의 불쾌감을 완화해야 한다.

정리하자면,

가장 좋은 설계는 아예 결제 이후 재고 부족이 발생하지 않도록 미연에 방지하는 것이다.
이를 위해 가재고, 오토 리프레시, CTA 재확인, 판매중지 상태, 다이얼로그 경고 등 다양한 기능을 복합적으로 설계해야 한다.
특히 결제 완료 후 재고 부족으로 인해 사용자의 주문을 취소하는 일은 브랜드 신뢰에 큰 타격을 줄 수 있으므로, 반드시 예방 로직이 필요하다.

화면 설계서의 타입

완벽한 장면 — Sat, 22 Mar 2025 23:32:28 +0900

화면 설계서의 타입

1. PPT

마치 참고서처럼 이용할 수 있는 장점이 있다.
- 그래서 정책도 넣어주고 데이터의 출처도 넣어주고 샘플도 넣어주고 너무 좋다.
그런데 이게 이제 실시간 동기화가 안 되다 보니까 공유하기가 어렵다. 소통이 좀 어렵다.
피그마 같은 경우에는 항상 최신 버전. 이전 버전은 버전 업을 보면 되는데 이거는 이게 지금 최신 버전인지를 항상 이력을 확인해야 하는 단점이 있다.
다만 이러한 다이어그램도 쉽게 그릴 수가 있고 각종 정보들을 손쉽게 첨부하고 있어서 장점이 더 많다.

2. Figma

웹 브라우저만 있으면 다 접근할 수 있다. 소통이 빠르고 접근성이 좋다. 프로토타입 기능.
뭔가 선택하게 되면 변화되는 형태의 인터랙션을 쉽게 만들 수 있다 보니까 전략 기획에서도 쓸 수 있는 장점이 있다.
단점은 이제 프로 차트를 만드는 게 좀 어려운 부분이 있고 그리고 이력이 이력을 볼 수는 있지만 무엇이 바뀌었는지에 대한 이력 카드가 있지는 않다.
백오피스 같은 경우에는 그런 표가 많은 종류의 것들은 피그마가 좀 쓰기가 어려운 부분도 있다.

⇒ 피그마는 이제 프론트에 강점이 강한 것 같고 그런 표나 백오피스 설계에서는 좀 더 PPT가 더 강점이 크다.

3. Adobe XD

장점은 일러스트레이터나 포토샵처럼 어더비 계열의 호환이 잘 됐기 때문에 디자인을 하는 사람들은 굉장히 좋아했던 툴.
시간은 퍼포먼스가 안 난다 거죠. 하지만 그런 보안성이 중요한 기업에서는 쓰기도 한다.

화면설계 (4) 디스크립션

완벽한 장면 — Fri, 14 Feb 2025 00:43:29 +0900

디스크립션 작성의 필요성

1. 요소/속성에 대한 정의를 통해 누락의 방지

요소(Element): 개별 항목(예: 주문 상태, 기간 조회, 회원 구분 등)

속성(Attribute): 해당 요소에 포함되는 값(예: "결제 대기", "결제 완료", "배송 중" 등)

ex. 주문일 순위기준이 기본 값이지만 인기 순위나 아니면 신청 순으로도 볼 수 있어야 된다라는 것이 설명이 되어 있지 않으면 구현자가 어려워한다.

예시

주문 상태 항목: "결제 대기", "결제 완료", "배송 중"
기간 조회 항목: "주문일", "출고일" (사용자가 선택 가능)
회원 구분 항목: "일반 회원", "VIP 회원"

2. 오버/클릭 등에 따른 화면변화에 대한 움직임 정의

사용자의 행동에 따라 변화하는 부분을 명확하게 설명해야 한다.

- 터치 오버 마우스 클릭 같은 모든 행위에 대한 변화점들이 생기게 된다.

예제

검색 버튼을 누르면 : 입력된 값에 따라 결과 목록이 업데이트됨
초기화 버튼을 누르면 : 모든 입력값이 기본값으로 초기화됨
엑셀 다운로드 버튼을 누르면 : 현재 보이는 데이터가 엑셀 파일로 변환되어 다운로드됨

모바일 환경에서 추가적으로 고려할 요소

터치(Tap)
더블 탭(Double Tap)
롱 프레스(Long Press)
스와이프(Swipe)

3. 알럿/컨펌 등 진행 피드백 통해 사용자의 실수 예방

사용자 행동에 대한 피드백 메시지는 일관되게 정의해야 한다.

피드백의 두 가지 유형

1. 알럿(Alert)

- 단순한 안내 메시지

>> 예시 : "이 작업을 실행할 수 없습니다."

2. 컨펌(Confirm)

- 사용자에게 선택을 요구하는 메시지

>> 예시: "정말 삭제하시겠습니까? [예/아니오]"

예제

삭제 버튼을 클릭하면: "정말 삭제하시겠습니까?" 컨펌 창 표시
비밀번호 입력 오류 시: "비밀번호가 일치하지 않습니다." 알럿 표시

⇒ UI적으로 표현할 수도 있지만, 텍스트로 정의하는 것이 빠르고 효율적이다.

ex. Confirm : 쿠폰이 리스트에서 삭제되고 고객에게 발급된 쿠폰은 유지됩니다. 선택된 데이터를 삭제하시겠습니까? → 예/아니오 ⇒ 예 → 정상적으로 삭제되었습니다.(토스트 메시지)

⇒ 재활용도 훨씬 좋다.

UI적으로 설명을 하게 된다면 물론 이것도 방법이겠지만 모바일과 PC 버전에 따라서 또 다르게 좀 그려줘야 된다. 모바일에서는 이렇게 안 나올 수 있기 때문에. 이제 채널마다 또 다른 특성을 갖고 있는 것들을 다 좀 포함해서 설명을 해줘야 되다 보니까 차라리 텍스트로 상술하고, 채널에서 어떻게 표출될지는 적지 않는다.

링크 연결과 관련된 서술

링크로 이동했을 때 어떤 페이지 호출이라고 해서 그 페이지에 아이디를 써주는 것도 좋다.

ex. 선택 시, 수기 발급 팝업 호출(GN-5.3.4.1.2) 이런 식으로.
화면명을 쓰게 되면 자칫 혼동이 있을 수 있다. 그러니까 정확하게 정보 구조화에서 정의했던 화면 아이디를 기재해 준다.

설명 작성의 중요성

- 설계를 할 때 설명란에 무엇을 써야 하는지 고민하는 경우가 많다.

>> 설명이 부족하면 구현이 어려워진다는 것.

=> 특히 아래 세 가지 요소를 명확하게 설명해야 혼동을 줄이고 원활한 개발이 가능해진다.

설명 작성 시 필수 포함 요소

디스크립션 작성 포인트

디스크립션 작성 Tip

설명란에 반드시 기재해야 될 세 가지의 포인트가 있는데 첫 번째가 요소와 속성이다.

- 요소는 그 항목 자체를 의미하고 속성은 그것에 대한 어떤 속성이 있는 경우에 속성까지 같이 기재를 해 준다.

- 변화에 대한 정의는 어떤 레이아웃이 변화되는 경우도 있지만 기능적인 변화도 있어서 그 변화가 어떤 것이든 간에 사용자의 인터랙션이 발생하는 것이면 규제해 준다.

- 피드백은 알락과 컨펌이 있는데 알락과 컨펌들을 설명해 준다.이 세 가지가 이 설명 란에 반드시 있어야 되는 것들이고요

추가적으로 어떤 해상도 같은 것들을 기재하거나 또는 "그 프론트 영역이 관리자 어디서 관리된다" 처럼 관리 포인트를 기재해 줄 수 있다.

설명 작성 시 유의할 점

1) 혼동 방지

- 각각의 요소를 설명할 때 최대한 구체적으로 서술해야 함

- "다들 알겠지?"라는 생각은 금물! 명확한 설명이 필요함

2) 변화 정의 시 고려할 사항

- 버튼 클릭 시 변화뿐만 아니라 UI 레이아웃 변경도 포함

- 이동 경로를 명확히 기재해야 개발자가 혼동하지 않음

3) 피드백 정의의 중요성

- 잘 정의된 피드백은 사용자의 실수를 방지하고 경험을 향상시킴

- 모바일과 PC 환경에 따라 다르게 동작할 수 있으므로, 설명 시 고려해야 함

설명 작성 시 반드시 포함해야 할 3가지 요소

(1) 요소와 속성 정의: 각 항목의 의미와 가능한 값을 명확히 설명

(2) 변화(Interaction) 정의: 버튼 클릭, 마우스 오버, 터치 등 변화 요소 설명

(3) 피드백(Feedback) 정의: 알럿(Alert), 컨펌(Confirm) 등 사용자 응답 요소 설명

추가적으로 고려하면 좋은 요소

이동 경로 정의 : 특정 버튼 클릭 시 이동하는 페이지를 명확히 설명

공통 요소 모듈화 : 헤더, 네비게이션 바, 공통 UI 요소를 따로 관리하여 수정 용이

코드그라데이션

인하우스 vs 에이전시 by 당근대장님

에이전시 vs 인하우스 : 구축·운영 관점에서 보는 커리어 구조 정리

1. 전제: “지원할 수 있는 회사”의 공통 조건

2. 구축·운영 조직의 두 가지 형태

2-1. 에이전시(Agency)

2-2. 인하우스(In-house)

3. 왜 대기업들은 내부에서 안 만들까?

4. 에이전시의 가장 큰 장점 = 레퍼런스

에이전시에서 쌓는 것

5. 인하우스로 바로 가기 어려운 이유

인하우스가 보는 관점

6. 그럼에도 불구하고 에이전시를 추천하는 이유

이유 1. 선택의 폭이 넓다

이유 2. 인하우스로 가는 ‘지름길’이 될 수 있다

7. 에이전시 → 인하우스 이동의 현실적인 흐름

8. 인하우스의 한계 (초반 선택 시)

인하우스의 구조적 특징

9. 커리어 관점에서의 핵심 정리

에이전시

인하우스

스토리보드 (3)

1. 스토리보드는 ‘그리기’ 이전에 이미 반 이상 끝난다

1-1. 가장 먼저 해야 할 것: 질문

2. ‘컨셉’과 ‘가치’를 먼저 정의해야 한다

2-1. 왜 가치가 중요한가

2-2. 가치의 예

3. 스토리보드 이전 단계의 전체 흐름

프론트 설계 전체 순서

4. 텍스트 왁싱(Text Waxing)이 왜 중요한가

텍스트 왁싱이란?

예시

5. 스토리보드는 ‘확정된 그림’이 아니다

추천 방식

6. 웹과 모바일 설계 사고의 차이

6-1. 웹(Web)

6-2. 모바일(App)

7. 화면 레이아웃 기본 용어 정리 (필수)

8. 스토리보드 마스터 템플릿 개념

8-1. 슬라이드 마스터 원칙

8-2. 디자인 테마로 저장

9. 아이콘 템플릿 운용 방식

10. 스토리보드는 ‘표(Table)’로 그린다

10-1. 언제 표를 쓰는가

10-2. 언제 박스를 쓰는가

10-3. 표의 절대 규칙

11. 정렬과 배치의 핵심 스킬

12. 오브젝트 & 입력 기본 규칙

13. 표준 조작 키 (실무 필수)

14. 레이아웃 비율 감각 (고급 영역)

기본 비율 감각

좋은 레이아웃의 특징

15. 와이어프레임 vs 스토리보드

와이어프레임

스토리보드

SB 제작 표준 절차

1. 스토리보드 작업의 기본 구조 이해

1-1. 스토리보드는 “환경 세팅”이 절반이다

2. 슬라이드 마스터 & 마스터 템플릿 제작 절차

2-1. 슬라이드 마스터 진입

2-2. 마스터 구성 원칙

2-3. 스토리보드 마스터에 포함될 레이아웃들

3. 마스터를 “디자인 테마”로 저장하기 (핵심)

3-1. 현재 테마 저장

3-2. 효과

4. 아이콘 템플릿 운용 방식

4-1. 아이콘 템플릿이란?

4-2. 운용 방식

4-3. 핵심 규칙

5. 공통 오브젝트는 “이미지화”해서 관리

5-1. 언제 이미지로 저장하나?

5-2. 방법

6. 스토리보드 기본 스타일 세팅(필수)

6-1. 기본 텍스트 설정

6-2. 자동 고침(카피 단축키) 활용

6-3. 기본 도형 설정

7. 오브젝트 조작 핵심 단축키

8. 눈금 & 안내선 활용 규칙

9. “표(Table)” 사용 원칙

9-1. 언제 표를 쓰는가?