갓생기획

[검색엔진최적화] 구글 SEO, 이렇게만 하면 클릭율 2배 상승 | 이미지최적화

기획하는뇽뇽씨 — Thu, 3 Apr 2025 17:24:47 +0900

검색엔진최적화, SEO(Search Engine Optimization)란?

검색엔진이 이해하기 쉽고 손쉽게 읽을 수 있도록 홈페이지의 구조와 페이지를 개발하여 검색 결과 상위에 노출될 수 있도록 하는 작업이다. 즉, 검색 엔진 봇이 웹사이트에 접근하여 나의 콘텐츠나 게시글이 키워드 관련 검색 결과에 표시되도록 하는 것

- 핵심 SEO 전략 FAQ(요약)

✅ E-E-A-T 신뢰도 강화로, 경험& 전문성 강조, 출처 명확하게 표시하자

✅ CTR을 높여야 SEO 순위가 높아진다! 제목과 설명을 클릭 유도형으로 수정하자

✅ 사용자 체류시간을 늘려야 최적화 가능! 목차, 이미지, 동영상, 내부 링크등을 활용하자

✅ 구글이 좋아하는 웹페이지 구조로 최적화! H1~H3 태그, 모바일 반응형 콘텐츠 제공하자

✅ 2024년 최신 SEO 트렌드 반영! FAQ 추가, 이미지 SEO 강화, 동영상 활용

아래 내용에서 자세히 확인 가능합니다. ↓

검색 엔진 최적화, 진짜 유용한 꿀팁 5가지 방법

1️⃣ 구글이 좋아하는 E-E-A-T 신뢰도 강화 전략(중요도 상 )

E-E-A-T란? Experience(경험) - Expertise(전문성) - Authoritativeness(권위) - Trustworthiness(신뢰성) 의 약자로, 구글 검색 품질 평가 지침의 요소 중 하나이다. 단순 키워드 최적화에 머물러 있지 말고, 브랜드 신뢰도를 높이는 요소를 추가하여 SEO 순위를 상승시켜보자.

경험-신뢰성-전문성(E-E-A-T), 어떻게 높이는데?

✔ 실제 경험을 기반으로 콘텐츠를 작성: 직접 테스트한 내용, 업무 진행하며 얻었던 교훈(Learning) 및 사례, 비교 분석 등의 실제 본인의 경험을 작성한다. (차별화된 콘텐츠 제공)
✔ 전문성을 높일 수 있는 데이터 활용: 통계자료, 연구결과, 전문가 인터뷰를 포함하여 제공한다. (시각화하여 제시할 경우, 더욱 효과적)
✔ 신뢰성(Trust) 확보: 본인이 작성한 내용 이외에 참조한 내용이 있다면, 참고문헌, 저자소개, 회사정보, 이미지 출처 등 자료에 대한 출처를 밝혀 신뢰성을 확보한다.

예시

‍♀️ 검색엔진 최적화 가이드
‍♀️ 2024년 SEO 최적화 가이드 | 상위 노출 핵심 7가지 → 구체적인 숫자와 연도를 활용하여 제시

‍♀️ 완벽한 마케팅 전략을 위한 가이드 - 2024년 최신판
‍♀️ 마케팅 전략 가이드 2024 | 클릭률 2배 높이는 방법! → 키워드를 제목 앞부분에 배치

2️⃣ 클릭률(CTR) 높이면 검색순위 자동으로 상승

클릭률(CTR)이 높은 페이지는 "사용자가 원하는 콘텐츠"라고 판단하기 때문에 구글은 검색 결과에서 클릭률이 높은 콘텐츠를 상위에 올려준다.

클릭률(CTR), 어떻게 높이는데?

✔ 제목 & 설명 최적화: 사용자들이 궁금해하고, 클릭하고 싶어 하는 강력한 키워드 + 숫자 + 감성문구 활용
✔ 파워 키워드 사용: "비밀", "꿀팁", "필수", "이렇게 하면 2배", "반드시 알아야 할"
✔ 이모지 활용( ‍♀️ ‍♀️ ): CTR을 높이는 효과 있음( 특히 모바일에서 효과적, 가시성 제공)

예시

‍♀️ 서비스기획자 포트폴리오 꿀팁
‍♀️ 네카라쿠배 합격한 서비스기획자 포트폴리오 작성법 | 합격률 2배 up! → 호기심을 이끄는 내용 앞단에 배치
‍♀️ 2025년 서비스기획자 포트폴리오 작성가이드(네카라쿠배 합격) - 합격률 2배 up → 구체적인 연도 제시하여 최신화 강조

3️⃣ 사용자 체류시간(Engagement) 늘리기 → SEO 접수 급상승

오래 머물수록 (Engagement) "좋은 콘텐츠"라고 판단되어 상위 노출 될 확률이 증가한다. 구글은 사용자의 engament를 중요하게 생각하고 평가하기에 체류시간을 높이는 것은 중요하다.

체류시간, 어떻게 높이는데?

✔ 도입부에서 핵심 정보 미리 공개 : 사용자가 궁금해할 만한 내용을 먼저 제공하자. 클릭 후 3초 안에 핵심 가치를 전달하고, 도입부에 서론을 길게 작성하지 않는 것을 추천한다. ( 두괄식 글쓰기)
✔ 목차 추가(Table of Contents) : 사용자가 원하는 내용으로 바로 이동 가능하도록 목차와 바로가기 링크를 제공하자. 사용자는 원하는 정보를 얻음으로써 신뢰 상승 가능!
✔ 이미지 & 동영상 삽입 : 긴 글보다 이미지 같은 시각적 요소를 통해 체류시간 증가에 기여, 동영상도 gif로 변경하여 업로드하면 더 좋은 품질 유지 가능하다. (클릭 행위/단계 제거)
✔ 내부 링크 활용 : 중간 or 하단에 다른 관련 포스팅으로 유도하여, 나의 페이지에 오랜 시간 머물러 있도록 설계한다. (콘텐츠 세분화 후 총정리 포스팅에서 연계시키는 방식)

체류시간 증가를 위한 예시 - 출처 본인

예시

‍♀️ SEO 최적화 방법은 다양합니다 → 포괄식 표현, 애매함
‍♀️ SEO 핵심 포인트 요약
◾ 키워드는 제목 앞에 배치
◾ CTR 높이는 강력한 문구 사용
◾ 체류시간을 늘려 SEO 점수 상승
자세한 내용은 아래에서 확인하세요 → 구조화되어있고, index 제시함으로써 머릿속에 요약 가능

4️⃣ 구글이 좋아하는 웹페이지 구조 (실무자용 고급 Tip )

검색엔진 봇이 내 페이지를 쉽게 분석할수록 SEO 순위가 올라가기 때문에, SEO 점수를 상승시키기 위해 웹페이지 구조를 신경 써야 한다.

웹페이지 구조, 최적화 어떻게 하는데?

✔ H1, H2, H3 태그 올바르게 사용 : H1 태그는 1개, 나머지는 계층적으로 정리
✔ 모바일 친화적 디자인 유지
☞ 다크모드 고려한 text color 스타일 제공 (*실제로 초반에 작성한 콘텐츠의 다크모드를 고려하지 않아, 불편함을 말씀해 주신 사람이 있었음)
☞ 모바일 고려한 table style (표) 제공
☞ 강조하고자 하는 text 크기 조정, bold 등 강조 표기
✔ 페이지 로딩 속도 최적화 : 3초 이내 로딩되도록 이미지 압축 & 캐시활용
✔ SEO-friendly URL 사용(짧고 키워드 포함)

웹페이지 구조 최적화를 위한 예시 - 모바일 고려한 style 제공

예시

‍♀️www.youngplan.tistory.com/p=12345453y63663634
‍♀️ www.youngplan.tistory.com/seo-tips

5️⃣ 2024년 최신 SEO 알고리즘 변화 반영 (구글이 직접 발표한 내용)

AI 검색(SGE, Search, Generative Experience) 도입으로: FAQ & 구조화된 데이터가 중요해질 것이다.
백링크(외부 링크) 영향력 감소로: 콘텐츠 품질 & 유저 경험이 중요하다.
이미지 & 동영상 검색 증가로 : 이미지 SEO 최적화가 필수이다.

트렌드반영, 어떻게 하는데?

✔ 글에 FAQ 섹션 추가: 구글이 직접 콘텐츠 요약을 보여줄 확률 증가
✔ 이미지 Alt 태그 최적화: 검색엔진이 이미지 내용을 이해할 수 있도록 설명 추가
✔ 동영상 삽입 & 제목에 키워드 포함: 유튜브 & 검색엔진에서 동시 노출 가능

- 이미지최적화, 어떻게 하는데?

1. 파일업로드 시, 표기되는 파일명을 파일에 어울리는 이름으로 변경하자 (귀찮더라도 필수)

❕ 기계가 서버에서 파일을 불러올 때, 파일명이 일치하거나 존재하는 경우 더욱 빠르게 인식, 이미지 최적화

이미지최적화- 파일이름을 변경하여 업로드 하자

‍♀️ KakaoTalk_20250328_144737491_03
‍♀️ api 기본구조

2. 대체텍스트를 삽입하여 제공하자

❕ Alt 태그란 HTML의 코드로 이미지에 대해 설명해 주는 역할을 한다. Alt 태그는 이미지가 정상적으로 표출되지 않을 때 alt 태그 안에 포함되어 있는 내용이 표출된다. 주로, 스크린리더를 사용하는 시각장애인을 위해 사용된다.

이미지최적화- 티스토리 대체텍스트 삽입방법

티스토리 대체텍스트 삽입방법
1. 이미지 클릭
2. 가장 우측에 있는 '대체텍스트 삽입' 아이콘 클릭
3. 이미지를 설명하는 텍스트 삽입 후 확인 버튼 클릭

3. 이미지 품질이 우수한 파일을 사용하자

❕ 이미지 파일이 너무 크지 않고(로딩속도의 문제), 이미지 품질이 낮지 않은(품질저하의 문제) 이미지를 활용하여 업로드하자.

마치며, 다음 포스팅으로는 아래 내용으로 돌아오겠습니다. 긴 글 읽어주셔서 감사합니다.

⚜ 구글서치어드바이저로 내 블로그 분석하기

↓ 함께 읽으면 좋은 데이터 분석 포스팅 ↓

[데이터분석] 서비스 기획자가 알아두면 좋은 SQL 기초 지식 (SELECT, INSERT, DELETE, UPDATE 등)

데이터 설계 시 고려사항 데이터 베이스 설계 시 지켜야 할 데이터의 속성이 있다. 데이터는 기본적으로 무결성, 일관성, 회복, 보안, 효율성, 확장성 등이 해당한다. ◼ 무결성 : 삽입, 삭제, 갱

youngplan.tistory.com

[서비스기획] 데이터 설계시 필요한 개인정보 마스킹 처리 기준과 예시에 대해 알아보자

이번 포스팅은 개인정보와 관련된 데이터 설계시 알아두면 좋은 '개인정보 마스킹 처리 기준'에 대해 작성해보고자 한다. 백화점, 카페, 영화관 등 키오스크나 단말기에서 개인정보를 입력할때

youngplan.tistory.com

[서비스기획] 프로덕트 데이터 분석에 필요한 핵심 기술과 대표적인 분석 방법론에 대해 알아보

1. 프로덕트 데이터 분석에 필요한 핵심기술아래 3가지 기술은 실무에서 사용되는 기술과 역할, 사용예시, 활용도에 대해 정리해 보았다. 프로덕트를 분석하는 행위는 주로 사용자 행동과 비즈

youngplan.tistory.com

참고문헌

메타 디스크립션 - https://guide333.tistory.com/entry/metadescription-contentseo
이미지 최적화 팁 - https://brunch.co.kr/@mobiinside/1239

[서비스기획] 포트폴리오에 녹여낼 수 있는 'A-Z까지 모두 경험해본 기획자' 브랜딩 전략 (*JD분석)

기획하는뇽뇽씨 — Tue, 1 Apr 2025 17:05:33 +0900

안녕하세요. 갓생기획입니다.

오늘 포스팅해볼 주제는 "A-Z까지의 프로세스를 경험해 본 기획자", "서비스 기획단계에서 출시 및 운영까지의 경험", "a-z까지 주도적 업무 경험" 등의 대한 해석을 5가지로 분류하여 정리해 보자.

해당 문구는 서비스기획자, UI&UX 기획자 채용공고를 통해 많이 봤던 문구일 것 이다.

필자는 'A-Z의' 문구를 보며 정확한 의미와 해석이 궁금해졌고, 경력서와 포트폴리오에 녹여낼 수 있는 방법을 작성해보려 한다.

주니어는 업무에 활용하여 해당 경험을 적극적으로 만들 수 있는 기회, 시니어 분들께서는 본인의 경험을 어떤 식으로 녹여내면 좋을지 함께 생각해 볼 수 있는 의미 있는 포스팅이기를 바란다.

A-Z까지 모두 경험해 본 기획자

a-z까지 서비스 기획부터 출시까지 모두 경험해본 기획자의 의미는? (출처-본인)

서비스 구축 경험에 대해 묻는 것이다.
신규 서비스 론칭 혹은 프로젝트 구축 및 출시 경험

1. 하나의 기획 프로세스를 처음부터 끝까지 경험한 기획자

서비스 기획의 전 과정을 경험한 사람을 의미한다.

A-Z의 A, B, C.. Z 알파벳은 시작과 끝을 의미하며, 처음부터 끝까지 모든 단계를 경험했다는 의미를 지니고 있다.

해석하면,

기획자의 전반적인 역량이 검증된 것 (전체 사이클을 경험)
신입이 아닌 경력자로서 A부터 Z까지 주도적으로 수행 가능하다는 의미를 지님

1) 프로세스 관점에서 본 A-Z

기획서 작성 (IA, 화면설계, 프로세스) → 개발팀/디자이너와 협업 → QA → 배포 및 론칭 → 유지보수

2) 아이데이션 관점에서 본 A-Z

아이데이션 → 콘셉트/아이디어 도출 → 문제정의 → 가설 (퍼널분석, 설문, 로그검증, 페르소나 등) → 검증 (A/B테스트, KPI 검증)

2. 다양한 도메인을 경험한 기획자

특정 분야에 국한되지 않고, 다양한 산업군과 서비스 도메인을 경험한 것을 의미한다.

A-Z = 다양한 분야/ 직군/ 도메인을 경험했다는 의미

해석하면,

특정 도메인에 편중되지 않은 기획 경험을 보유하고 있는지 확인
다양한 업계의 '베스트 프랙티스'를 이해하고 활용 가능한지 확인

* 베스트 프랙티스(Best Practice) : 경영 목적을 지속적이고 효과적으로 달성하기 위한 가장 성공적인 해결책이나 문제 해결방법 ( 목표를 달성하는데 적절하고 효과적인 수단을 확인하고 수행)

ex) IT 산업군, 서비스 도메인 예시

하드웨어		소프트웨어		IT 서비스& 플랫폼
컴퓨터 및 서버	PC, 노트북, 워크스테이션, 서버	운영체제	Windows, macOS, Linux, Android, IOS	인터넷 서비스	포털(네이버, 구글), 검색 엔진
반도체	CPU, GPU, 메모리, 반도체 제조	클라우드 플랫폼	AWS, Azure, Google Cloud	전자상거래(이커머스)	쿠팡, 아마존, 쇼피파이
네트워크 장비	라우터, 스위치, 모뎀, IoT기기	데이터 베이스(DBMS)	Oracle, MySQL, MongoDB	핀테크	온라인 결제, 블록체인, P2P 대출
모바일 기기	스마트폰, 태블릿, 웨어러블 디바이스	보안 소프트웨어	백신, 방화벽, 암호화 솔루션	소셜미디어	페이스북, 인스타그램, 트위터
디스플레이	OLED, LCD, 마이크로 LED	개발 툴& 프레임워크	Git, Docker, Kubernetes, React, Node.js	게임 산업	콘솔 게임, PC 게임, 모바일 게임 개발
스마트 가전	AI 스피커, 스마트 TV, 스마트홈 디바이스	엔터프라이즈 솔루션	ERP, CRM, SCM, HR 솔루션	AI& 빅데이터	머신러닝, 챗봇, 데이터 분석 서비스
				헬스케어 IT	디지털 헬스, 원격 의료, 의료 AI
				모빌리티 &스마트 시티	자율주행, MasS, 스마트 교통

예시
◾ 커머스, SNS, B2B SaaS, 플랫폼 등 다양한 서비스 기획 경험
◾ 웹, 앱, 하드웨어 등 다양한 디바이스 환경에서 기획 경험
◾ 스타트업, 대기업, 에이전시 등 다양한 조직 문화 경험

3. 기획부터 운영까지 책임지는 기획자

단순 문서 작성이 아닌, 실제 실무 KPI를 기반으로 성과까지 책임지는 기획자

A-Z = 기획(Planning) 뿐만 아니라, 출시(Execution)와 운영(Operation)까지 관여

해석하면,

실무에서 단순히 기획안만 작성하는 게 아니라 (문서에 국한되지 않고) 실제 시장조사- 문제정의-가설-검증을 진행하여 KPI 기준 성과를 낼 수 있는 사람
단기적 기획, 단순한 수정 및 개선이 아닌 '장기적인 서비스 성장'에 기여하는 인물인지 확인하고자 함

예시
◾ 제품 초기 기획(MVP) → 개발 협업 → 서비스 론칭 → 데이터 분석 및 개선
◾ UX 기획 → AB테스트 → 사용자 피드백 반영 → 지속적인 오류사항 개선 및 업데이트

4. 성장형 기획자 (끊임없이 배우는 사람)

"모든 경험"을 했다는 것은 결국 학습과 성장을 의미한다.

A-Z = 과거의 경험이 아닌, 현재도 끊임없이 배우고 성장해 나갈 수 있는 잠재력 있는 사람인가를 확인

해석하면,

"A-Z까지 경험했다"는 말은 완벽한 기획자가 아니라, 계속 성장할 수 있는 잠재력 있는 기획자라는 의미로도 해석
"모든 것을 알고 있다"는 생각이 아닌, 자신의 부족함을 깨닫고 배우고 성장할 수 있는 사람인지 확인하고자 하는 의도

예시
◾ 기획뿐만 아니라 개발/ 데이터/ 마케팅까지 학습하는 기획자
◾ 변화하는 트렌드(예 : AI, Web3, Growth Hacking 등)를 빠르게 흡수하는 기획자

5. 범용성 높은 기획자 (Generalist vs Specialist)

특정 분야의 전문가(Specialist) 보다는 다방면에 능한 범용적 기획자(Generalist)에 가까운 사람인지를 확인하고자 함

[기획 + 마케팅], [기획 + 디자인], [기획 + PM]와 같이 한 가지 업무나 롤에 머물러 있지 않고, 다양한 도전을 받아들일 수 있어야 함

해석하면,

AI 등장과 함께, 빠르게 성장하고 있는 4차 산업혁명의 시대에서 IT업계에서는 여러 가지 업무와 롤을 수행할 수 있는 범용적 기획자의 가치가 높다.
단, 특정 도메인의 깊이(Specialization)도 중요하기 때문에 밸런스 유지는 필수
본인의 가치를 높이기 위해 핵심 역량(Core Competence)을 발굴하고 관리할 수 있어야 함

예시
◾ UX 기획부터 데이터 분석까지 할 수 있음
◾ 프런트와 백오피스 설계를 모두 진행할 수 있음
◾ 서비스 기획 + 운영 + 개발 or 마케팅까지 고려한 기획서를 작성할 수 있음 ( 도메인에 대한 이해가 뒷받침되어야 하므로)

인사이트(Insight)

기획자, 웹기획, 앱기획, UI&UX 기획, 서비스기획 채용공고에서 A-Z까지 모두 수행해 본 경험이 있는 기획자라는 말을 다른 표현으로

"서비스의 설계, 구축, 출시까지의 모든 프로세스를 높은 기여도로 경험해 본 분"
"기획서 작성, 구축, 운영 및 신규 서비스 출시 경험이 있으신 분"
"제품 기획/출시/운영/개선까지 전체 사이클을 주도적으로 이끌어 보신 분"
"서비스 기획부터 출시/운영까지 End-to-End 경험"
"신규 사업/서비스(Zero-to-One)를 설계해서 론칭 및 운영해 본 경험이 있으신 분"

등이 있다. 모든 채용공고에 공통적으로 1개 이상씩 자리를 차지하고 있다 함은, 그만큼 중요도가 높다는 뜻인데

경력이 3년 5년 10년 등 경력이 많다고 해서 모두가 해당 경험을 어떻게, 얼마만큼의 기여도로, 주도적으로 했을지 알 수 없기 때문이다. (경험의 깊이를 확인 불가/ 그래서 검증할 수 있느냐 없느냐가 중요 관건 )

(Worst ) 단순히 해당 경험을 주도적으로 경험해 봤다, 나는 이만한 성과를 가지고 있는 사람이다. 보다는

<<<<<<<<<<<<<<<

(Best ) 어떤 문제를 어떻게 정의하고, [어떠한 방법(skill)]으로 해결했고, [~~한 결과]와 그 과정에서 [어떠한 배움과 개선포인트]를 도출해 냈고, [러닝포인트]를 다른 프로젝트나 업무 진행 시 [어떠한 방법]으로 적용할 수 있었다~라는 식의 포트폴리오가 더 설득력 있을 것 같다고 생각한다.

글을 마치며,

기획도, 디자인도, 마케팅도, 개발도, 데이터분석도, 툴 사용경험도 모두 중요하게 평가받는 모든 K-기획자들 ...

존경하고 항상 응원합니다.

긴글 읽어주셔서 감사합니다.

▼ 함께 읽어보면 좋은 글 ▼

2025.03.28 - [⭐ 서비스기획] - [서비스기획] IA(Information Architecture) 정보구조도 작성 방법과 내비게이션 설계를 통한 사용자 UX 경험 설계 방법에 대해 알아보자

[서비스기획] IA(Information Architecture) 정보구조도 작성 방법과 내비게이션 설계를 통한 사용자 UX

정보구조도(Information Architecture, IA)란?정보구조도란 서비스 내 정보의 배치와 흐름을 시각화한 설계도이며, 서비스 목차 역할을 수행하는 문서이다. 사용자 입장에서는 "원하는 정보를 쉽고 빠

youngplan.tistory.com

2025.03.26 - [⭐ 서비스기획/ 데이터 분석] - [서비스기획] 프로덕트 데이터 분석에 필요한 핵심 기술과 대표적인 분석 방법론에 대해 알아보자

[서비스기획] 프로덕트 데이터 분석에 필요한 핵심 기술과 대표적인 분석 방법론에 대해 알아보

youngplan.tistory.com

2024.04.24 - [⭐ 서비스기획/ 데이터 분석] - [서비스기획] 데이터 설계시 필요한 개인정보 마스킹 처리 기준과 예시에 대해 알아보자

[서비스기획] 데이터 설계시 필요한 개인정보 마스킹 처리 기준과 예시에 대해 알아보자

youngplan.tistory.com

[서비스기획] IA(Information Architecture) 정보구조도 작성 방법과 내비게이션 설계를 통한 사용자 UX 경험 설계 방법에 대해 알아보자

기획하는뇽뇽씨 — Fri, 28 Mar 2025 15:29:58 +0900

정보구조도(Information Architecture, IA)란?

정보구조도란 서비스 내 정보의 배치와 흐름을 시각화한 설계도이며, 서비스 목차 역할을 수행하는 문서이다.

사용자 입장에서는 "원하는 정보를 쉽고 빠르게 찾고, 이해할 수 있도록 콘텐츠를 체계적으로 구성하는 과정"
내부 작업자 입장에서는 "우리의 서비스(웹/앱 등)의 화면을 정의하고, 화면 내에 포함된 기능을 정의하는 도구 "로 정의할 수 있다.

정보구조도의 구성요소

서비스 흐름(Service Flow)	사용자가 정보를 탐색하는 경로
콘텐츠 계층(Contents layer)	상위-하위 정보의 논리적 구조
내비게이션 패턴(Navigation patterns)	정보 접근 방식 (탭/ 메뉴/ 허브 앤 스포크 등) 아래에서 설명
페이지 관계(Page Relationship)	각 화면(페이지)의 연결성과 이동 경로

✔ 정보구조도의 종류

- 트리 구조의 IA

트리구조 IA는 정보나 콘텐츠를 "계층적"으로 배치한 구조로, 상위-하위 관계가 명확하게 시각화되도록 작성할 수 있는 설계 방법이다.

장점으로는 도식화를 통해 사용자가 원하는 정보를 단계별로 쉽게 탐색할 수 있으며, 복잡한 서비스도 논리적으로 구조화할 수 있다. 하지만 콘텐츠 확장 및, 하나의 정보가 여러 카테고리에 속할 경우 유연성이 부족하다는 단점을 가지고 있다.

- 엑셀 형식의 IA

엑셀형식 IA는 정보구조를 "표 형식"으로 정리한 형태로, 각 페이지의 세부 정보와 기능을 체계적으로 나열할 수 있는 설계 방식이다. 트리구조에 비해 복잡성은 높되, 상세한 커뮤니케이션을 위해서는 주로 사용되는 설계 방법이다.

장점으로는 기능정의 및 화면설계 내용, 정책설계 내용 등을 포함하고 있어 체계적으로 파악이 가능하며, 그로 인해 팀원 간의 의사소통과 요구사항 전달에 용이하다. 반면, 정보 흐름을 시각적으로 표현할 수 없기 때문에 복잡한 사용자 흐름 (User Flow)나 인터랙션을 담기에는 제한적인 단점을 가지고 있다.

※ 트리구조와 엑셀 형식의 IA 비교

구분	트리구조 IA	엑셀 형식 IA
표현 방식	계층적 구조(Tree Diagram)	행·열 기반의 표 (Spreadsheet)
활용 목적	정보 전체 흐름과 관계 시각화	세부 페이지 및 기능정의
장점	◾ 구조 직관성 높음 ◾ 탐색 흐름 이해 용이	◾ 관리의 편의성 ◾ 기능적 요구사항 명확도
단점	◾ 확장 시 복잡성 증가 ◾ 중복 정보 관리의 어려움	◾ 흐름 시각화 어려움 ◾ 관계성 표현 부족
적합한 상황	◾ 사용자 탐색 경로 시각화/ 전체 구조 확인 ◾ 설계 초기단계, 정보설계 시	◾ 기획서 작성 ◾ 기능정의서와 화면별 요구사항 관리

❓ 정보구조도, 왜 작성해야 할까?

[외부] 사용자 경험(UX) 개선 : 이탈률 감소를 위해 정보 탐색을 직관적으로 개선하거나, 비즈니스 수익률을 높이기 위해 정보구조를 개선해야 할 필요등, 데이터기반 문제를 해결할 경우 필요하다.
[내부] 효율정 커뮤니케이션 : 기획/디자인/개발 팀 간 업무 이해도 향상과 오해도를 줄이는데 필요하다.
[내·외부] 확장성 확보 : 서비스 기능을 개선하거나 확장할 경우에 유지보수가 용이하다.

정보구조도 작성방법 How-To?

IA 작성에 정답은 없다. - 출처 : 본인

A안은 [ 사이트 개편을 위한 ] 정보구조도이며(1년 차 작성) , B안은 [사이트 구축을 위한] 정보구조도(3년 차 작성)이다.

A안의 관리 항목은 '사이트 구성메뉴(1~3 depth), TAB, 팝업페이지, 언어구분, 접근권한, 화면이름, page, PC, Mobile, 변경요청, 수정일정, 설계완료여부, 디자인, 퍼블리싱, 수정사항, 페이지 정의, 등...'

→ 지금 다시 돌아보니, 왜 이렇게 복잡하게 작성했을까? 누구를 위한 문서인가?라는 생각이 제일 먼저 들었다.

B안의 관리 항목은 '사이트 구성메뉴(1~3 depth), 기능구분, 기능관리, 기획담당자' + 진행상황 관리 (별도진행)

→ 필요한 내용만 빠르게 확인하는 것을 목표로 축약하여 정리한 문서였다. 개발자들과 소통 시 해당문서를 통해 진행하였으며, 스토리보드 작성 시 추가되는 기능 혹은 정책에 대한 내용을 함께 정리해 두었다.

들어가기에 앞서, 정보구조도 작성에는 맞다/틀리다고 하는 정답이 없다.

정보구조도를 작성하고 있는 이유와, 상황, 시스템 복잡도에 따라 각 내부 이해관계자 혹은 고객의 니즈를 충족시키기 위한 문서로써 복잡하고 세밀하게 작성하는 것을 선호할 수도 있으며, 단순하지만 필요 내용이 모두 추가되어 있는 자료를 선호하는 사람이 있을 수 있다는 것을 고려하고 작성해 보도록 하자.

1️⃣ 정보수집 단계

이해관계자 인터뷰 : 각 부서의 요구사항을 파악하여 정보를 수집한다. (마케팅, 고객지원, 개발팀)
경쟁사 분석 : 유사 서비스를 벤치마킹하여 정보구조와 차별점을 확인한다. (IA 기술활용 서비스 도입, 정보구조 벤치마킹 등 * 다만, 목적과 필요성이 근거로 제시되어야 함)
사용자 조사 : 특정인물과 우리 서비스에 해당하는 인물을 고려한 페르소나가 아닌 여러분류의 불특정 다수 페르소나를 작성하고, 다양한 인물에 따른 고객여정(User Journey)을 작성하여 고객의 핵심 행동을 분석한다.

2️⃣ 정보분류 단계

카테고리화 : 콘텐츠를 주제별로 묶어서 1단계 ~ 3단계로 계층화시킨다.
우선순위 정리 : 주제별 그룹핑된 콘텐츠를 사용빈도와 중요도에 따라 노출 우선순위를 결정한다.

TIP
◾ Card Sorting 기법 : 실제 사용자가 제품의 정보와 구조를 어떻게 인식하고 그룹화하는지 확인하는 기법으로, 준비된 카드를 그룹화해 표현하게 하는 유저 리서치 방법론이다.
◾ 3-click rule 준수 : 사용자가 원하는 정보를 최대 3번 클릭 이내로 모든 정보를 찾을 수 있도록 설계하는 기법으로, 복잡성을 고려하여 설계하는 방법이다.

3️⃣ 내비게이션 설계

Primary Navigation(1차 내비게이션) : 주요 서비스 접근 경로 (예 : 홈, 검색, 마이페이지)
Secondary Navigation(2차 내비게이션) : 서브 카테고리 또는 세부 기능
Global Navigation(글로벌 내비게이션) : 어디서든 접근 가능한 고정 메뉴, GNB 상단바에 주로 배치( 회원가입, 로그인, 검색, 장바구니)

* 내비게이션 패턴 종류와 사용예시

패턴명	설명	사용예시
계층 패턴	상위 → 하위로 정보다 단계적으로 구성된 패턴	쿠팡(카테고리 > 상품)
탭 패턴	주요 기능이나 콘텐츠를 탭(TAB)으로 전환하며 접근할 수 있는 패턴	인스타 (피드/검색/추가/릴스/프로필)
허브 앤 스포크	메인 허브에서 독립된 기능(스포크)으로 이동 후 메인으로 복귀하는 패턴	아이폰 설정(메인 설정 → 세부설정)
라이너 패턴	정해진 순서대로 단계를 거쳐 진행하는 직선 흐름의 패턴	크몽 회원가입 (정보입력 → 인증→완료)
네스트 돌 패턴	상위 화면에서 하위 화면으로 점진적 확장하며 탐색하는 패턴	네이버 블로그 (블로그 홈→ 글 목록 →글상세)
벤토 박스 패턴	한 화면에 여러 정보를 병렬로 배치해 한번에 제공하는 패턴	구글 드라이브 (파일 목록, 즐겨찾기, 최근 항목 동시 표시)

내비게이션 설계 패턴 - 실 서비스 예시 (출처 : 본인)

4️⃣ 이동경로 설계

각 페이지 간 이동경로를 정의하고 사용자 흐름(User Flow)을 설계한다.

user flow - 출처 : 본인

TIP
◾ CTA(Call to Action) 버튼을 각 단계마다 배치하여 흐름을 유도한다.
◾ 필수 기능(로그인, 검색, 장바구니)은 항상 접근 가능하도록 글로벌 메뉴에 배치한다. (상단 고정메뉴)
＊ CAT : 사람들이 구매하거나, 구독, 예약 등 비즈니스 목표에 걸맞은 행동을 취하도록 유도하는 기능 (클릭 가능한 형태의 텍스트, 이미지 버튼)

▼ 자세한 User Flow에 대해 알고 싶다면? ▼

[서비스기획/UX] User Flow에 대해 알아보자-1(작성방법과 Task Flow, Wire Flow)

User Flow, Task Flow, UX Flow 등 다양한 용어들이 시스템과 현업에서 사용되면서 모호하고 헷갈렸던 기본 개념에 대해 정리해보고자 한다. 차이점과 더불어 Flow char, User Flow를 작성하는 방법까지 이번

youngplan.tistory.com

정보구조도 작성 시, 고려해봐야 할 사항( tip)

1️⃣ 사용자 중심으로 설계하자

기술적 편의성 < 사용자 니즈를 중점으로 생각하여 설계하자. (기획자가 개발지식에 대해 알고 있어야 하는 이유! 기술을 기반으로 설득하거나, 개발자에게 다른 방향성을 제시할 수 있다)
웹/앱 등 서비스의 목적과 사용자가 서비스를 이용하는 이유를 파악하고, 해당 기능과 배치순서를 고려하자
ex) 사용자가 자주 찾는 메뉴는 상단에 배치하거나, 1번째 순서에 배치한다.

2️⃣ 정보량을 최적화하자 (많지도, 적지도 않게)

필수 정보만 노출하도록 그룹핑하여 제거하자
과도한 카테고리화는 지양하자 ( 밀러의 법칙에 의하면 사람은 약 7개의 정보만 기억할 수 있으며, 그 이상의 정보는 압도감을 줄 수 있다고 설명한다)
ex) 복잡한 메뉴는 드롭다운으로 정리한다.

3️⃣ 데이터를 기반으로 사고하자

화면이나 프로그램을 기획할 때, 가장 먼저 고려해야 하는 것은 '어떤 데이터를 수집하고, 어떠한 흐름으로 제어할 것인가'이다.
눈에 보이는 데이터와 눈에 보이지 않는 데이터를 구분하고, 고려하여 설계하자.
눈에 보이는 데이터는 성별, 연령, 개인정보, 수집되어야 할 정보들을 고려하자. (단, 정말 필요로 하는 데이터만 수집받는 것을 목표로 설계하자)
눈에 보이지 않는 데이터는 완료일자, 수정일자, 저장 횟수 등을 고려할 수 있다.

4️⃣ 가시성을 확보하자

주요 경로는 한눈에 보이도록, 숨겨진 기능은 최소화되도록 하자
ex) 모바일에서는 하단 고정 바로 핵심 기능을 제공한다.

5️⃣ 유연한 확장을 고려하자

기존 기능에서 카테고리 추가 혹은 추첨방식 추가 등의 기능 요구사항이 존재할 경우, 기존 정보 구조와 기능에 문제가 없도록 확장성을 고려하여 설계하자.
예) 프로그램을 추첨방식으로 설계할 경우, 추첨방식을 '코드화' 하여 관리하고 확장성을 고려한다.

[서비스기획] 프로덕트 데이터 분석에 필요한 핵심 기술과 대표적인 분석 방법론에 대해 알아보자

기획하는뇽뇽씨 — Wed, 26 Mar 2025 17:45:19 +0900

1. 프로덕트 데이터 분석에 필요한 핵심기술

아래 3가지 기술은 실무에서 사용되는 기술과 역할, 사용예시, 활용도에 대해 정리해 보았다.

프로덕트를 분석하는 행위는 주로 사용자 행동과 비즈니스 성과를 정량적으로 측정하고 해석하는 과정으로써, 아래 기술을 다룰 수 있다면 차별화 된 기획자로서 성장할 수 있다.

간략한 기본 정보들을 담고 있으므로, 심도 깊은 데이터 분석 지식에 대해서는 다음포스팅에서 다뤄볼 예정이다.

① SQL (Structured Query Language)

역할 : 서비스의 DB(Data Base)에서 데이터를 추출
사용예시 : 사용자 행동 로그, 구매 기록 분석
핵심 쿼리 : SELECT, JOIN, GROUP BY, CASE

✅ 활용 예시
◼ 주문 이력에서 활성 사용자 식별
◼ 구매 이탈 구간 추척 및 개선 포인트 도출
◼ 상품의 좋아요 혹은 찜 수 추출 통한 성과 도출

사례 및 예시 : 사용자 당 평균 구매 횟수를 분석하기 위한 쿼리

SELECT user_id, COUNT(order_id) AS purchase_count
FROM order
GROUP BY user_id
ORDER BY purchase_count DESE;

② Python(또는 R) - 데이터 분석 및 시각화

역할 : 복잡한 데이터 가공과 통계적 분석
사용예시 : A/B테스트, 사용자 군집 분석

✅ 활용예시
◼ 재방문율과 재결제율 분석
◼ 시각화도구 (matplotlib, seaborn) 로 패턴도출

③ Excel/ Google Sheets

역할 : 기본적인 EDA(탐색적 데이터 분석)
사용예시 : KPI 지표 추적, 데이터 집계

✅ 활용예시
◼ 빠른 지표 산출 및 비교분석
◼ 코호트 분석(기간별 사용자 그룹 추적)

2. 주요 데이터 분석 방법론과 적용사례

프로덕트 기반 회사에서 많이 사용하고 있는 분석 방법론에 대해 설명한다.

서비스기획 포트폴리오를 준비하고 있다면, 진행했던 프로젝트에 적용해봐도 좋은 경험이 될 것이다.

① AARRR 모델(Growth Funnel 분석)

정의 : 사용자 여정을 5단계로 나누어 고객의 생애 주기를 기반으로 온라인 비즈니스 성장을 효과적으로 촉진하기 위해 사용되는 핵심 지표 프레임 워크 입니다.
활용 : 고객이 처음으로 제품을 접하고 나서 비즈니스에 기여하기 까지의 전 과정을 체계적으로 분석하는 데 활용
- Acquisition (유입) : 고객이 처음으로 제품이나 서비스를 접하게 되는 단계. 검색 엔진, 소셜 미디어, 광고, 입소문 등의 다양한 채널을 통해 이루어 진다.
- Activation (활성화) : 고객이 제품이나 서비스를 실제로 사용하거나, 등록하거나, 처음으로 가치를 느끼는 단계
- Retention (유지) : 고객이 제품을 계속 사용하도록 유지하는 것을 목표로 하는 단계. 푸시알림, 이메일, 리워드 프로그램 등을 통해 이루어진다.
- Revenue (수익) : 고객이 제품이나 서비스에 대해 실제로 비용을 지불하는 것을 목표로 하는 단계. 구매, 구독, 업그레이드 등의 방법을 통해 이루어진다.
- Referral (추천) : 만족한 고객이 제품이나 서비스를 다른 사람에게 추천하는 것을 목표로 하는 단계. 추천 프로그램, 보상시스템, 쉬운 공유기능 등을 통해 이루어진다.

AARRR - 출처 : 와이즈 트래커

쿠팡 실제사례
1. Acquisition (유입) : 광고에서 신규 가입 유도
2. Activation (활성화) : 첫 구매 완료 시 쿠폰 제공
3. Retention (유지) : 정기 배송 서비스 제공
4. Revenue (수익) : 로켓와우 멤버십으로 수익창출
5. Referral (추천) : 친구 추천 시 포인트 지급

✅ 활용예시 :

각 단계 별 이탈률 확인
각 단계 별 유입률 확인
고객의 재방문율 상승 방안 제시
구매력 높은 유저들의 특징 확인
취약한 구간을 찾아 개선 방향 제시

② 코호트 분석(Cohort Analysis)

정의 : 동일한 기간동안 동일한 특성을 가진 사람들을 모아 분석하는 것으로, 특정 시점에 유입된 사용자 그룹의 행동이 어떻게 변화하는지를 분석하는 '행동분석' 이다.
목적 : 재방문율과 이탈 시점 파악
그룹분류 : EX) 인천에 사는 20대 후반 여성이 네이버 검색을 통해 A페이지로 방문을 해서 B제품을 구매했다고 가정하면 이 사용자의 코호트 그룹은 아래처럼 분류 할 수 있다.
- 제주(지역) 코호트
- 26~29세(연령) 코호트
- 여성(성별) 코호트
- 네이버 트래픽 코호트
- 자연검색 트래픽 코호트
- A방문페이지 코호트
- B제품 (구매) 코호트

코호트분석, 출처 - https://analyticsmarketing.co.kr/

배달의 민족 실제사례
1. 2024년 1월 신규 가입자의 3개월 차 재구매율 확인
2. 첫 주문 후 2주 이내 재방문률이 20% 미만 → 리마인드 푸시 개선

✅ 활용예시 :

신규 vs 기존 사용자 유지율 비교
이탈 시점에 맞춘 타겟 마케팅 적용

③ A/B 테스트(AB Testing)

정의 : 기능 변경이나 정책 적용 시 두 그룹의 성과 차이를 특정
목적 : 변화가 지표에 미치는 영향을 정량적으로 검증

사진출처 : https://splitmetrics.com/

네이버 페이 실제사례
◼ 결제 버튼 디자인을 A/B로 나눠 전환율 측정
A 그룹 : 기존 디자인
B 그룹 : 개선된 CTA 버튼

✅ 활용예시 :

UI/UX 변경의 성과 검증
최적화된 정책으로 서비스 개선

④ 퍼널 분석(Funnel Analysis)

정의 : 사용자가 목표까지 도달하는 각 단계의 이탈률을 분석
목적 : 사용자 흐름의 병목 구간 파악

출처 : 뷰저블

토스 실제사례
◼ 송금 프로세스에서 이탈율 분석 :
1. 앱 실행
2. 수신자 선택
3. 금액 입력
4. 송금 완료

✅ 활용예시 :

이탈율이 높은 단계에서 UI 개선
복잡한 과정을 단순화해 전환율 증가

⑤ 사용자 군집분석(User Segmentation)

정의 : 유사한 행동을 보이는 사용자 그룹으로 나누는 분석기법
목적 :맞춤형 서비스 제공 및 마케팅 최적화

사용자 세그먼트

마켓컬리 실제사례
◼ 구매 패턴 기반으로 고객 그룹 생성
- 고빈도 구매자(VIP)
- 할인 민감형(프로모션 대상)
- 비활성 고객(리텐션 타겟)

✅ 활용예시 :

개인화 추천 시스템 구축
타겟 마케팅으로 ROI 극대화

▼ 데이터 분석 함께 보면 좋은 글 ▼

2024.04.03 - [⭐ 서비스기획/ 데이터 분석] - [데이터분석] 서비스 기획자가 알아두면 좋은 SQL 기초 지식 (SELECT, INSERT, DELETE, UPDATE 등)

[데이터분석] 서비스 기획자가 알아두면 좋은 SQL 기초 지식 (SELECT, INSERT, DELETE, UPDATE 등)

youngplan.tistory.com

[Figma] 피그마에서 이미지 불러와서 도형에 마스크 하는방법 (이미지 크롭)

기획하는뇽뇽씨 — Wed, 8 May 2024 22:00:07 +0900

이번 포스팅에서는 피그마에서 이미지를 불러와 크롭하는 방법에 대해 다뤄보고자 한다.

쉽지만 까먹으면 자주 검색하는 기능 중 하나인 '이미지 마스크' 기능 이번 포스팅을 통해 완벽히 숙지하자.

0. 사전준비

원하는 크기의 도형을 미리 그려놓는다. (원, 사각형, 둥근 사각형, 오각형, 별 등)

(※ 이미지의 원본 크기보다 도형의 크기를 크게 그려놓는다면, 이미지가 깨져보일 수 있다.)

1. 피그마에서 이미지 열기

피그마에서 이미지를 열기 위한 방법은 3가지가 있다.

툴에서 가져오기 : 리본메뉴 중 도형 드롭다운 메뉴에서 'Place image/video' 항목을 선택한다.
단축키로 가져오기 : Ctrl + Shift + K
파일 탐색기에서 드롭다운하기 : 원하는 이미지를 선택하여 드롭다운 한다.

가장 편한 방법으로 이미지를 열면되겠다.

필자는 툴의 리본메뉴에서 이미지 불러오는 기능을 자주 사용한다.

2. 파일 탐색기를 통해 파일 불러오기

2. 파일 탐색기를 통해 이미지 불러오기

Click or drag to place

- 도형에 이미지를 불러오는 경우

불러오고자 하는 이미지를 더블클릭하면 이미지가 바로뜨지 않고, +(image)의 형태로 커서를 따라다니는 형태로 표출된다. 크롭하고자 하는 도형에 +(image) 를 클릭하면 이미지가 크기에 맞추어 크롭된다.

- 도형에 이미지를 불러오지 않는 경우

이미지를 도형에 클릭하지 않고, 프레임(Frame) 혹은 섹션(Section)에 드롭다운 하면 '원본이미지'가 불러와진다.

3. 이미지를 도형에 넣기 혹은 원본사진으로 가져오기

3. 이미지를 불러와 도형에 마스크한 경우와 그냥 불러온 경우

위에서 설명한 '도형에 이미지를 불러와 크롭, 마스크 한 경우'와 '도형에 이미지를 불러오지 않은 경우'를 비교하기 위한 예시 이다. 후자와 같은 경우 원본이미지의 크기가 불러와지는 점 참고하면 좋겠다.

+ 이미지 마스크 종류

피그마 이미지 마스크 종류

Fill : 도형에 빈틈 없이 꽉 채우는 기능
Fit : 이미지중 큰쪽에 맞추어 빈틈이 생기도록 마스크
Crop : 이미지 사이즈를 사용자가 조절하여 자를 수 있는 기능
Tile : 패턴과 유사하게 이미지를 반복하여 도형에 마스크

[Figma] 피그마 오토 레이아웃에 대해 알아보자 (단축키와 활용방법까지)

오토레이아웃? 프레임에 자동으로 간격을 걸어주는 기능으로, 프레임을 동적으로 (콘텐츠에 반응하도록) 만들어준다. 주로 Web, 반응형 모바일 작업시에 유용하게 사용되고 작업시 디자이너, 퍼

youngplan.tistory.com

2023.12.20 - [ 피그마] - [Figma] 피그마 베리어블 Local variables 에 대해 알아보자 (color, Number, String, Boolean, Modes 설정방법까지)

[Figma] 피그마 베리어블 Local variables 에 대해 알아보자 (color, Number, String, Boolean, Modes 설정방법까

Variable이란? Variable은 스타일과 같이 색상, 숫자 및 문자열과 같은 다양한 설계 속성에 할당할 수 있는 재사용 가능한 변하는 값이다. 개발을 공부해 본 사람이라면 이미 익숙한 개념일 텐데, 임

youngplan.tistory.com

2023.12.29 - [ 피그마] - [Figma] 피그마 컴포넌트 기초에 대해 알아보자-1(figma component사용방법, 사용팁)

[Figma] 피그마 컴포넌트 기초에 대해 알아보자-1(figma component사용방법, 사용팁)

1. 컴포넌트(figma component) Component는 가장 작은 단위, 부품, 요소로써 화면에서 반복적으로 사용되는 가장 작은 단위이다. 화면을 구성하거나 디자인 할 때, 요소를 합쳐 모듈 > 템플릿 > 페이지로

youngplan.tistory.com

2024.01.04 - [ 피그마] - [Figma] 피그마 컴포넌트 응용기능인 스왑 인스턴스에 대해 알아보자-2(figma swap instance사용방법, 사용이유)

[Figma] 피그마 컴포넌트 응용기능인 스왑 인스턴스에 대해 알아보자-2(figma swap instance사용방법, 사

이전 편에서는 피그마 컴포넌트 기초와 사용방법에 대해 알아보았다. 이번 포스팅에서는 피그마 인스턴스 스왑에 대해 알아보고, 사용하는 방법까지 익혀볼 수 있도록 하자. 스왑 인스턴스(swap

youngplan.tistory.com

2024.01.05 - [ 피그마] - [Figma] 피그마 프로퍼티를 이해해보자-3 (figma property 사용이유, 불리언, 인스턴스 스왑, 텍스트)

[Figma] 피그마 프로퍼티를 이해해보자-3 (figma property 사용이유, 불리언, 인스턴스 스왑, 텍스트)

첫 번째 포스팅은 컴포넌트, 두 번째 포스팅 스왑인스턴스에 이어 이번 포스팅은 피그마 프로퍼티에 대해 알아보겠다. 프로퍼티(figma property)란? 프로퍼티는 "속성, 성격"이라는 의미를 가진다.

youngplan.tistory.com

-참고

https://velog.io/@gpdbs2/Figma-10.%EC%9D%B4%EB%AF%B8%EC%A7%80%EC%99%80-%EB%A7%88%EC%8A%A4%ED%81%AC

[서비스기획] 데이터 설계시 필요한 개인정보 마스킹 처리 기준과 예시에 대해 알아보자

기획하는뇽뇽씨 — Wed, 24 Apr 2024 16:18:39 +0900

이번 포스팅은 개인정보와 관련된 데이터 설계시 알아두면 좋은 '개인정보 마스킹 처리 기준'에 대해 작성해보고자 한다. 백화점, 카페, 영화관 등 키오스크나 단말기에서 개인정보를 입력할때 자동으로 마스킹되는 것을 간접적으로 경험해 본적이 있을것이다.

가장 최근에 진행중인 프로젝트에서 사용자 접수 데이터를 암호화하여 저장, 관리자 로그 기록 조회 기능추가, 데이터 마스킹 등 기능개선 업무를 진행하면서 개인정보 보호에 대한 경각심을 가지게 되었다.

이처럼, 당연하게 여겼던 '개인정보 보호'는 선택이 아닌 필수라는 것.

개인정보 보안 등급 예시

개인정보 보안등급 예시

위의 이미지는 개인정보 보안 등급 예시를 설명한다.

개인정보의 종류는 고유식별정보, 민감정보, 인증정보, 신용정보/금융정보, 의료정보, 위치정보, 기타중요 정보 로 분류된다. IT 서비스에서 주로 다루는 개인정보는 "고유식별정보, 인증정보, 위치정보, 금융정보"로 나누어볼 수 있다.

당근 위치정보 허용 설정

위의 이미지는 개인정보 항목의 '위치정보'를 수집하기 위한 팝업으로, 설정버튼을 클릭할 경우 각 디바이스의 설정화면으로 이동한다.

개인정보보호의 법적 의무로써 서비스는 권한을 허용받아야 하고, 허용하지 않을 경우 서비스 이용에 제한이 있을 수 있다.
서비스는 수집한 개인정보의 사용내역, 보유기간 등을 사용자에게 제공한다.

개인정보 마스킹 기준 예시

식별정보

개인정보 항목	설명	마스킹 예시
성명	성명 중 성을 제외한 나머지	홍**
성명	성명 중 이름의 첫 번째 글자 이상	*홍동**
영문 성명	영문 성명 중 앞 4자리 철자 노출	SEO ********
휴대폰번호	전화번호 또는 휴대폰 뒤 4자리	010-1234-****
주민등록번호	뒤에서부터 6자리	971212-2******
여권번호	뒤에서부터 4자리	12345****
주소	도로명 이하의 건물번호 및 상세주소의 숫자 건물번호, 상세주소(동/층/호)	*인천시 미추홀구 주안로 , **동, 호
이메일 주소	ID 중 앞 2자리를 제외한 나머지	sy**@naver.com
CI(온라인 주민등록번호)	88자리의 숫자 중 앞 7자리 노출	cDQ12ci*** ~ ****

고급정보

개인정보 항목	설명	마스킹 예시
카드번호	카드번호 중 7~12번째 숫자 또는 9~12번째 숫자	9430-20-**-239 9430-2000--239
	국제카드 업계 표준(PCI-DSS)준용	9430-**-*-239
카드 유효기간	연/월을 모두 마스킹	YY//MM → /
온라인 회원 ID	ID중 앞 2자리를 제외한 나머지	sy*****
계좌번호	뒤에서부터 5자리 변환 (요구사항에 따른 변경 가능)	430-20-1*** 454222-01-1***
I-PIN	뒤에서부터 5자리 변환	123*****
고객의 IP 주소	앞에서 부터 3자리 변환	***.8.7.12

[서비스기획] 앱과 웹의 기본개념과 차이점에 대해 알아보자 (모바일웹, 웹 앱 vs 하이브리드 앱, 네이티브 앱)

기획하는뇽뇽씨 — Fri, 19 Apr 2024 17:05:57 +0900

현업에서 웹을 주로 다루다 보니, 모바일 서비스 기획에 필요한 앱의 기초지식을 쌓고자 해당 포스팅을 작성했다. 기초적인 내용이지만 헷갈리기 쉬운 개념이기에 잘 잡아두면 좋겠다.

어떤 앱의 형태를 선택하느냐에 따라 구현에 필요한 시간, 비용, 인력을 예상할 수 있기 때문이다.

모바일 앱의 형태로는 크게 4가지로 모바일웹, 웹 앱, 하이브리드앱, 네이티브앱이 있다.

한눈에 정리해보는 웹/앱

웹앱, 모바일 웹은 Web에 해당하며, 네이티브 앱은 App, 하이브리드 앱은 Web+App에 해당한다.

각 형태의 정의와 예시, 장단점에 대해 알아보자.

1. 웹

기본적으로, 웹을 실행하는 환경은 '브라우저'이고 웹을 제공하는 곳은 '웹서버'이다.

사용자가 브라우저에 URL을 호출하면 웹서버에서 브라우저 화면에 웹을 그리는 전체적인 과정('브라우저 렌더링') 방식이 진행된다.

웹이 동작하는 방식

① 사용자가 브라우저에서 URL 입력

② 브라우저는 웹 서버를 실행하고 있는 컴퓨터에게 요청

③ 웹 서버에서는 프론트엔드 개발한 웹을 클라이언트(브라우저)에게 전달

( ■ 페이지 이동 시 마다 위의 동작이 반복된다.)

- 웹의 종류(적응형 vs 반응형)

적응형 웹(Adaptive web)

: PC용, 모바일용 소스를 각각 개발하여 접속 기기에 맞추어 보여주는 기술

서버, 클라이언트에서 접속한 기기가 PC인지 모바일인지 자동 판단하여 기기에 맞는 소스를 따로 보여준다.
반응형 웹보다 깔끔하고 이용 속도도 빠르지만 각각 버전의 화면을 개발해야 하기에 시간이 많이 들고, 유지보수를 위해 각각 반영해야 하는 번거로움이 있다.

반응형 웹(Responsive web)

: 하나의 소스를 화면 크기 별로 유연하게 이미지와 그리드를 최적화해서 나타내는 기술

미디어 쿼리를 사용해 각각의 화면 크기를 확인하여 홈페이지를 최적화하여 나타내주는 기술이다.
하나의 템플릿으로 제작되어 개발이 간편하고 소요되는 리소스가 적다. 유지보수 시 한번의 수정으로 반영이 가능하다.
모든 기기를 위한 CSS를 전부 다운로드해야 한다는 점에서 데이터를 낭비하고 로딩시간을 늘린다는 단점이 있다.

- 모바일 웹

모바일 웹= 웹 100 + 브라우저

모바일 화면에 맞게 구성한 웹. 브라우저(Safari, Chrome 등)에 URL을 입력하여 들어가는 웹

모바일웹

장점	① 앱을 설치하지 않아도 웹브라우저를 통해 서비스를 이용할 수 있다. ② 웹개발만 진행해도 되기에 비용 및 리소스 투입량이 적다. ③ 개발 소요 시간이 적게 든다. ④ 유지보수에 드는 수고와 시간이 적게 든다.
단점	① 모바일 웹으로 접속시 로딩 시간이 많이 소요된다. ② 앱에서 사용할 수 있는 모바일 기기의 기본 기능을 사용할 수 없다. (카메라, 음성녹음 등) ③ 푸시알람 및 마케팅 효과를 얻을 수 없어 서비스 체류시간이 낮다. ④ 앱에 비해 제한적 기능으로 사용자 이탈율이 증가한다.

- 웹 앱

웹 앱= 웹 100 + 앱 껍데기

모바일 웹과 근본적으로 같지만, 겉모습, 구동 방식을 앱처럼 보이게 한 앱. 앱 껍데기를 쓴 웹.

웹 앱

장점	① 웹기반의 앱으로 개발에 소요되는 시간, 비용, 인력의 부담이 적다. ② 앱스토어에서 다운로드 받은 웹앱은 웹 업데이트 시, 자동으로 반영된다. (url기반이므로) ③ 앱스토어에 업데이트 시 심사 승인을 매번 거치지 않아도 된다.
단점	① 앱에 최적화되어 있지 않아 화면이 고정되어있지 않고, 불안전하다. ② 반응속도, 터치민감도 등 앱에 비해 사용성이 떨어진다. ③ 웹과 앱에서 동일한 기능과 프로세스를 가지고 가기에 모든 프로세스는 화면을 기준으로 진행된다. (앱의 팝업, 푸시, 바텀시트 등을 사용하여 복합 구현이 어렵다.)

2. 모바일 앱

모바일 앱은 안드로이드/ IOS 두개의 OS 플랫폼을 사용하여 실행할 수 있다.

앱은 웹과 다르게, 요청시 호출하는 방식이 아닌 이미 모든 페이지와 코드들이 앱 내부에 존재한다.

앱이 동작하는 방식

① 화면이 로드되면서 API 서버에게 어떤 페이지 관련 정보를 달라고 요청한다.

② API 서버는 해당 페이지 정보 요청 확인 후 데이터 응답 값을 넘겨준다.

③ 해당 페이지를 받은 API 응답값을 바탕으로 실행

- 하이브리드 앱

하이브리드 앱 = 일부는 웹 + 일부는 앱

웹을 기반으로 앱의 기능을 차용한 형태의 앱으로, 앱(패키징) 안에 웹 뷰를 불러오는 방식이다.

웹 앱, 네이티브 앱의 장점을 모두 얻기 위한 앱이다.

하이브리드 앱

장점	① 웹페이지와 앱에서 기능을 다르게 구현할 수 있다. ② 네이티브 앱에 비해 구현 비용이 적게 들고 빠르게 구현이 가능하다. ③ 웹 상의 업데이트가 자동으로 반영되므로, 사용자가 직접 업데이트 하지 않아도 된다.
단점	① 네이티브 앱에 비해 앱의 속도가 느리다. ② 모바일 디바이스에 최적화 되어 있지 않기에, 화면을 줄이거나 늘리거나 하는 것이 가능하다. ③ 모바일 디바이스의 기본기능 (카메라, 음성, 푸시알람 등)을 사용할 수 없다. (*단 일부 기능은 접근 가능하다.)

- 네이티브앱

네이티브 앱 = 앱 100

모바일 기기에 최적화된 언어로 제작한 앱으로써, OS의 네이티브 언어(Android의 앱은 java, kotlin, IOS의 앱은 Objective-C, Swift로 개발)로 개발

네이티브 앱

장점	① 다양한 모바일 디바이스 환경에 최적화되어 구현된다. ② 터치 민감도, 반응속도 등이 웹기반 앱에 비해 현저히 빠르다. ③ 디바이스 기본 기능(카메라 등)을 활용한 서비스를 제작 할 수 있다. ④ 푸시알림 등을 송출할 수 있기에, 마케팅 및 사용자 유치에 효과적이다.
단점	① OS 환경에 따른 개발 시간,비용이 오랜기간 소요된다. ② 사용자가 앱스토어에서 업데이트를 진행해야 하므로, 배포 속도가 느리다. ③ 지속적인 앱스토어의 심사과정을 거쳐야 한다. ④ 사용자의 스마트폰에서 용량을 많이 차지한다.

3. 웹 vs 앱 공통점과 차이점

	웹(Web)	앱(App)
공통점	동일한 API 서버를 사용한다.
차이점	① 페이지마다 URL을 요청하여 다운로드 받아야 하므로 속도가 느리다. ② 코드를 바꾼 후 웹서버에 업로드하면 바로 반영된다. ③ 컴퓨터 장치에 포함된 기능을 자유자재로 이용할 수 없다.	① 앱의 반응속도, 터치민감도 등이 좋다. ② 업데이트 시 마다 심사를 통과해야 반영될 수 있다. ③ 디바이스의 기본 기능을 자유롭게 사용할 수 있다.(알림설정, 마이크, 카메라 등)

함께보면 좋은 서비스 기획 포스팅

[서비스기획] 백오피스, 관리자 화면 기획시 '보안관리 (권한 목록, 롤목록, 접속가능 ip)' 메뉴가

들어가며, 타업체에서 개발한 백오피스를 유지·운영하면서 수면위로 나타난 문제와 불편함에서부터 비롯된 깨달음을 정리해보고자 한다. 현재 내가 유지운영하고 있는 백오피스는 보안관리

youngplan.tistory.com

[데이터분석] 서비스 기획자가 알아두면 좋은 SQL 기초 지식 (SELECT, INSERT, DELETE, UPDATE 등)

youngplan.tistory.com

함께보면 좋은 PM 관련 포스팅

[서비스기획/PM] 홈페이지를 오픈하며 해결했던 문제들 (feat1. 클라우드 및 인프라 환경 설정 편 )

필자는 프로젝트 매니저로써 "첫 번째 OO홈페이지" 프로젝트를 오픈하며 발생했던 이슈들, 이슈 해결방법 들에 대해 공유해보고자 한다. 분명 기획자로 회사에 입사했는데 PM일을 하게 될 줄이야

youngplan.tistory.com

[서비스기획/PM] 홈페이지를 오픈하며 해결했던 문제들 (feat2. 개발이슈 편, API연동 개발 이슈, 알

저번 포스팅에 이어 홈페이지를 오픈하며 해결했던 개발 이슈에 대해 다뤄보겠다. [서비스기획/PM] 홈페이지를 오픈하며 해결했던 문제들 (feat1. 클라우드 및 인프라 환경 설정 편 ) 필자는 프로

youngplan.tistory.com

참고

[서비스기획] 백오피스, 관리자 화면 기획시 '보안관리 (권한 목록, 롤목록, 접속가능 ip)' 메뉴가 필수인 이유

기획하는뇽뇽씨 — Thu, 4 Apr 2024 17:38:54 +0900

들어가며,

타업체에서 개발한 백오피스를 유지·운영하면서 수면위로 나타난 문제와 불편함에서부터 비롯된 깨달음을 정리해보고자 한다.

현재 내가 유지운영하고 있는 백오피스는 보안관리 메뉴가 존재하지 않는다. 접근허용 IP, 일반 관리자 생성 및 메뉴 접근 권한에 대한 기능이 없으므로 ~~(모든 관리자가 슈퍼관리자인 셈)~~ 보안에 매우 취약하다. 외부 사용자가 ID/PW를 탈취하기라도 한다면 모든 개인정보를 포함한 데이터를 탈취·조작할 수 있다는 '보안문제'에 마주했고, 기획자가 알아두면 좋을 보안관리 기능 및 중요성에 대해 다뤄보겠다.

백오피스? CMS? 관리자페이지?

백오피스(Backoffice)는 서비스를 제공하는 데 필요한 기능이 담긴 내부 관리 도구이다. 어드민(admin), 운영툴, CMS(Contents Management System) 로 불리기도 하며, 사용자(Front) 페이지의 운영 관리를 위해 사용된다.

"쇼핑몰 백오피스"는 상품관리, 재고관리, 주문배송관리, 광고마케팅 관리, 게시판관리, 설정 등 서비스 운영과 관련된 모든 내용을 포괄하고 있다. 비교적 일반 백오피스와 비교하여 기능, 운영 프로세스가 복잡한 편이다. 그렇기에 '쇼핑몰 백오피스 기획 경험 有 기획자 우대'를 하는 건 아닐까?

"접수 및 신청, 콘텐츠 위주의 백오피스"는 콘텐츠관리, 접수관리, 심사관리, 게시판관리, 메인화면 관리 등 서비스 운영과 관련된 내용을 포괄하고 있다.

백오피스와 분류

보안메뉴, 그래서 왜 필요한데?

외부 협력업체가 우리 서비스 '백오피스'에 접속해야 하는 경우
B2B 사업에서 개인 채널을 관리할 비즈니스 채널이 필요한 경우
팀 단위의 내부 관리자들이 접근할 수 있는 메뉴가 나뉘어져 있는 경우(슈퍼관리자/일반관리자)

크게는 위의 3가지 경우로 분류해볼 수 있겠다. '보안관리' 메뉴는 말 그대로 보안을 위한 메뉴이자 시스템 내부의 데이터, 개인정보 등을 위해 필수라고 할 수 있다.

개인정보를 입력하고 접수하는 시스템을 예로 들어보자. 이름/ 핸드폰번호/ 성별/ 이메일/ 아이디/ 비밀번호 등 개인정보 입력, 개인정보 필수동의 및 활용동의에 체크하고 접수했는데, 해커의 공격에 의해 개인정보가 유출되었다면?

기업 이미지 차원의 문제가 아니다. 개인정보 보호법에 의해 검찰 조사 그리고 징역까지 받을 수 있다는 점이다.
보안과 관련한 문제를 사전에 차단하기 위해, 기획 파트에서는 '데이터 마스킹', '가명사용'등 보안을 고려하여 기획되어야한다.

<번외-데이터 마스킹 기획>

데이터 마스킹 <출처-본인>

클라이언트의 요구사항 : '자유게시판' 을 도입하여 사용자들의 원활한 의사소통을 촉진하고싶다.

나는 Q&A, 1대1문의와 같은 단방향 형식의 소통방식 문제를 해결하기 위해 댓글 기능을 기획했다. "작성자 정보랑 아이디 정보를 다보여주는게 맞나요? 개인정보가 다 보여지면 사용자들이 댓글을 작성할까요? 개인정보보호 문제도 있구요."라는 개발자의 피드백을 수렴하여 '게시글 작성자, 아이디, 댓글 작성자'의 데이터를 마스킹처리했다.

위의 문제를 해결하면서, 데이터, 보안 등에 대해 공부해야겠다고 다짐한 순간이었다.❗

보안관리는 어떤 메뉴들로 구성될까?

- 권한목록

슈퍼관리자 → 일반관리자에게 부여할 수 있는 권한을 정의하는 메뉴이다.
접속권한, 대쉬보드, 회원관리, 게시판 CRUD, 콘텐츠 CRUD, 코드관리, 권한관리, IP권한 관리, 사이트관리, 메뉴설정, 보안설정, 사이트설정 등 관리자가 접근할 수 있는 메뉴에 대한 권한을 정의한다.

- 롤목록

권한목록에서 정의된 특정 목록의 권한을 사용할 수 있는 역할을 정의한 메뉴이다.
역할의 추가, 삭제, 수정은 슈퍼관리자만이 할 수 있다.
관리자 역할 : 최고관리자, 비회원, 일반관리자, 기본 관리자, 테스트 역할, 게시판 관리자

최고관리자 : CMS에서 모든 기능을 제한없이 사용할 수 있다. 주로 권한 부여 및 설정을 진행한다.
일반 관리자 : 조직관리, 메인화면 관리, 콘텐츠 관리, 관리자 관리, 접속권한 관리 등 권한을 부여받아 사용할 수 있다. 일반적으로 관리 범위는 조직 내에서 정하고 부여하기에 따라 다르다.
게시판 관리자 : 게시판을 관리할 수 있는 관리자로서, 게시판의 CRUD 기능을 부여받아 사용할 수 있다.
테스트 역할: 특정 테스트 기능이 포함된 메뉴의 권한을 받아 테스트를 진행할 수 있다.
비회원 : 어떠한 기능도 사용할 수 없다.

- 접속가능 ip

ID/PW를 통해 백오피스에 접근할 때, 특정 아이피만 백오피스에 접근할 수 있도록 등록하는 기능이다.
아이디와 패스워드 정보가 탈취됐다 해도, 프로그램 내에서 자체적으로 접근할 수 없도록 막는 기능이다.
(※ 등록하는 IP주소는 공인아이피 주소만 등록 할수있다.)

- 임시허용 ip목록

일회성으로 ip를 등록하여 백오피스 접근을 허용해야 할 경우 사용한다.
외부관리자가 유동 IP를 사용하고 있을경우 SMS 인증 후 임시 허용하는 아이피 목록이다.
(※ 등록하는 IP주소는 공인아이피 주소만 등록 할수있다.)

- 관리자 접속로그

관리자의 접속로그를 확인할 수 있는 메뉴이다.
데이터 변경, 문제발생 시 접속일시를 대조하여 IP주소를 확인할 수 있다.

- 관리자정보 조회로그

관리자가 관리자정보를 변경한 이력을 확인할 수 있는 메뉴이다.
수행내용을 확인할 수 있다. 위의 관리자 접속로그와 마찬가지로 문제 발생 상황을 대비하기 위해 사용한다.

함께보면 좋은 인프라 관련 포스팅

[PM/infra] 다중 서버 환경에서 소스코드 동기화 문제와 로그인 세션 문제 해결하기 (sticky session)

다중서버 환경에서 발생한 문제 배경 필자는 현재 다니고 있는 회사에서 클라우드 이관 작업을 PM 직무로써 경험했다. 그 과정에서 배운 것들을 기록하고자 한다. 클라이언트의 웹서비스 환경은

youngplan.tistory.com

[PM/infra] ip주소변경 방법과 공인 IP와 사설 IP의 차이점을 알아보자

이전 포스팅은 WWW.을 설정하는 방법과 도메인의 기본적인 지식에 대해 포스팅 해두었으므로 함께 보는것을 추천한다. 도메인이란? 가상공간에서 '인터넷상의 주소'로써, 숫자로 구성된 IP 주소

youngplan.tistory.com

[PM/infra] www. 설정은 어떻게 하나요? (도메인, 호스트네임, 서브도메인, www 설정, 네임서버, DNS)

오늘은 요 며칠간 나를 혼돈의 카오스로 만든 '도메인 및 DNS 네임서버'에 관하여 PM 및 기획자가 알아두면 좋은 도메인 관련 지식을 포스팅해보려고 한다. 시작은 이렇게 되었다. (Client) 도메인은

youngplan.tistory.com

함께보면 좋은 데이터 관련 포스팅

[데이터분석] 서비스 기획자가 알아두면 좋은 SQL 기초 지식 (SELECT, INSERT, DELETE, UPDATE 등)

youngplan.tistory.com

[데이터분석] 서비스 기획자가 알아두면 좋은 SQL 기초 지식 (SELECT, INSERT, DELETE, UPDATE 등)

기획하는뇽뇽씨 — Wed, 3 Apr 2024 17:38:37 +0900

데이터 설계 시 고려사항

데이터 베이스 설계 시 지켜야 할 데이터의 속성이 있다. 데이터는 기본적으로 무결성, 일관성, 회복, 보안, 효율성, 확장성 등이 해당한다.

◼ 무결성 : 삽입, 삭제, 갱신 등의 연산 후에도 DB에 저장된 데이터가 정해진 제약조건을 항상 만족해야 한다.
◼ 일관성 : DB에 저장된 데이터들 사이나 특정 질의에 대한 응답이 처음부터 변함없이 일정해야 한다.
◼ 회복 : 시스템 장애 발생 시, 장애 발생 직전의 상태로 복구할 수 있어야 한다.
◼ 보안 : 외부 데이터 공격 혹은 노출, 변경으로부터 보호할 수 있어야 한다.
◼ 효율성 : 응답시간의 단축, 시스템의 생산성, 저장 공간의 최적화 등이 가능해야 한다.
◼ 데이터베이스 확장 : 데이터베이스 운영에 영향을 주지 않으면서 지속적으로 데이터를 추가할 수 있어야 한다.

SQL이란?

Structured Query Language로, 데이터베이스에서 데이터를 추출하고 조작하는 데에 사용하는 데이터 처리 언어이다.

SQL의 분류

1) DDL(Data Define Language, 데이터 정의어)

DDL은 스키마, 도메인, 테이블, 뷰, 인덱스 등을 정의하거나 변경 또는 삭제할 때 사용하는 언어이다.

논리적, 물리적 데이터 구조의 사상을 정의하고 삭제하는 데에 사용한다.

명령어	기능
CREATE	스키마, 도메인, 테이블, 뷰, 인덱스를 정의한다.
ALTER	TABLE에 대한 정의를 변경하는데 사용한다.
DROP	스키마, 도메인, 테이블, 뷰, 인덱스를 삭제한다.

*가장 대중적으로 사용되는 TABLE을 기준으로 명령어 사용방법에 대해 작성했다. 이외의 도메인, 테이블, 뷰, 인덱스에 대해서 공부하려면 다른 블로그나 유튜브를 참조하면 좋겠다. SQL이나 데이터를 공부할 때, 필자가 가장 도움을 많이 받았던 방법은 '손으로 그려보고 작성해 보는 방법'이다. 아래 예시들을 문제만 보고 작성할 수 있다면 큰 도움이 될 것이다.

① CREATE TABLE : 테이블을 정의하는 명령문

CREATE TABLE 테이블명
(
속성명 데이터_타입 [DEFAULT 기본값] [NOT NULL],... ▶ 속성과 값의 조건을 정의한다.
[, PRIMARY KEY(기본키_속성명,...)] ▶ 기본키로 사용할 속성 또는 속성의 집합
[, UNIQUE(대체키_속성명,...)] ▶ 대체키로 사용할 속성 또는 속성의 집합, 중복된 값을 가질 수 없다.
[, FOREIGN KEY(외래키_속성명,...)]
REFERENCES 참조테이블(기본키_속성명,...)
[ON DELETE 옵션]
[ON UPDATE 옵션]
[, CONSTRAINT 제약조건명] [CHECK(조건식)]
);

→ 기본 테이블에 포함될 모든 속성에 대하여 속성명과 그 속성의 데이터 타입, 기본 값, NOT NULL 여부를 지정한다. (* NOT NULL : 모르는 값 혹은 적용할 수 없는 값)

FOREIGN KEY ~ REFERENCES ~ : 참조할 다른 테이블과 그 테이블을 참조할 때 사용할 외래키 속성을 지정한다.

- ON DELETE 옵션 : 참조 테이블의 튜플이 삭제되었을 때 기본 테블에 취해야 할 사항을 지정한다.

- ON UPDATE 옵션 : 참조 테이블의 참조 속성 값이 변경되었을 때 기본 테이블에서 취해야 할 사항을 지정한다.

◽ NO ACTION : 참조 테이블에 변화가 있어도 기본 테이블에 아무런 조치를 취하지 않는다.

◽ CASCADE : 참조 테이블의 튜플이 삭제되면 기본 테이블의 관련 튜플도 모두 삭제되고, 속성이 변경되면 관련 튜플의 속성 값도 모두 변경된다.

◽ SET NULL : 참조 테이블에 변화가 있으면 기본 테이블의 관련 튜플의 속성 값을 NULL로 변경한다.

◽ SET DEFAULT : 참조테이블에 변화가 있으면 기본테이블의 관련 튜플의 속성 값을 기본 값으로 변경한다.

CONSTRAINT : 제약조건의 이름을 지정한다. 이름지정이 필요 없다면 CHECK절에서 제약조건을 명시한다.

CHECK : 속성 값에 대한 제약 조건을 정의한다.

➕ 기본키와 대체키 (용어)

SQL 기본키와 외래키

문제로 이해하는 CREATE TABLE

✒ 예제
'이름'. '학번', '전공', '성별', '생년월일'로 구성된 <학생> 테이블을 정의하는 SQL을 작성하시오. 단 제약조건은 다음과 같다.
▪ '이름'은 NULL이 올 수 없고, '학번'은 기본키이다.
▪ '전공'은 <학과> 테이블의 '학과코드'를 참조하는 외래키로 사용된다.
▪ <학과> 테이블에서 삭제가 일어나면 관련된 튜플들의 전공 값을 NULL로 만든다.
▪ <학과> 테이블에서 '학과코드'가 변경되면 전공 값도 같은 값으로 변경한다.
▪ '생년월일'은 1980-01-01 이후의 데이터만 저장할 수 있다.
▪ 제약조건의 이름은 '생년월일 제약'으로 한다.
▪ 각 속성의 데이터 타입은 적당하게 지정한다. 단 '성별'은 도메인 'SEX'를 사용한다.

✒ 답안
CREATE TABLE 학생
(
이름 VARCHAR(15) NOT NULL,
학번 VARCHAR(8),
전공 VARCHAR(10),
성별 SEX,
생년월일 DATE,

PRIMARY KEY(학번),
FOREIGN KEY(전공) REFERENCES 학과(학과코드)
ON DELETE SET NULL
ON UPDATE CASCADE

CONSTRAINT 생년월일 제약 CHECK (생년월일 >='1980-01-01')
);

※ 관계연산자에서 크거나 같다(>=) 혹은 작거나 같다(<=)를 표시할때 같다(=)서식이 뒤에 배치되도록 한다.

② ALTER TABLE : 테이블에 대한 정의를 변경하는 명령문

ALTER TABLE 테이블명 ADD 속성명 데이터 타입[DEFAULT '기본값'];
ALTER TABLE 테이블명 ALTER 속성명 [SET DEFAUT '기본값'];
ALTER TABLE 테이블명 DROP COLUMN 속성명 [CASCADE];

ADD : 새로운 속성(열)을 추가할 때 사용한다.
ALTER : 특정 속성의 DEFAULT 값을 변경할 때 사용한다.
DROP COLUMN : 특정 속성을 삭제할 때 사용한다.

예제 <학생> 테이블에 최대 3 문자로 구성되는 '학년' 속성을 추가하세요.

ALTER TABLE 학생 ADD 학년 VARCHAR(3);

예제 <학생> 테이블의 '학번'필드의 데이터 타입과 크기를 VARCHAR(10)으로 하고 NULL 값이 입력되지 않도록 변경하세요.

ALTER TABLE 학생 ALTER 학번 VARCHAR(10) NOT NULL;

③ DROP TABLE : 테이블을 제거하는 명령문

DROP TABLE 테이블명 [CASCADE | RESTRICTED];
DROP CONSTRAINT 제약조건명;

CASCADE : 제거할 요소를 참조하는 다른 모든 개체를 함께 제거한다. 주 테이블 제거 시 각 외래키와 관계를 맺고 있는 모든 데이터를 제거.
RESTRICTED : 다른 개체가 제거할 요소를 참조중일 때는 제거를 취소한다.

예제 <학생> 테이블을 제거하되, <학생> 테이블을 참조하는 모든 데이터를 함께 제거하세요.

DROP TABLE 학생 CASCADE ;

2) DML(Data Manipulation Language, 데이터 조작어)

DML은 데이터베이스 사용자가 프로그램이나 질의어를 통하여 저장된 데이터를 검색, 삽입, 삭제, 갱신 등 실질적으로 처리할 때 사용하는 언어이다.

명령어	기능
SELECT	테이블에서 조건에 맞는 튜플을 검색한다.
INSERT	테이블에 새로운 튜플을 삽입한다.
DELETE	테이블에서 조건에 맞는 튜플을 삭제한다.
UPDATE	테이블에서 조건에 맞는 튜플의 내용을 변경한다.

ⓛSELECT ~ FROM ~ WHERE ~ ORDER BY : 테이블의 튜플을 조회할 때 사용한다.

SELECT 속성명1, 속성명2,...

FORM 테이블명

WHERE 조건
[GROUP BY 속성명, 속성명, ...]
[HAVING 조건]

ORDER BY 속성명 [ASC|DESC] ;

기본적인 SELECT 명령문의 기본 구조는 위와 같다. 그룹함수, WINDOW 함수 등 복잡한 부분은 제외했다.

⚠ SELECT 명령어 사용시 주의해야할 점

⬜ 속성명 관련

속성명은 검색하여 불러올 속성(열) 또는 속성을 이용한 수식을 지정한다.

기본 테이블의 모든 속성을 지정할 때는 '*'을 기술한다.
두개 이상의 테이블을 대상으로 검색할 때는 '테이블명.속성명'으로 표현한다.
AS(=별칭) : 속성 및 연산의 이름을 다른 제목으로 표시하기 위해 사용된다.

⬜ FROM절

질의에 의해 검색될 데이터들을 포함하는 테이블명을 기술한다.

⬜ WHERE절

검색할 조건을 기술한다.

⬜ ORDER BY절

특정 속성을 기준으로 정렬하여 검색할 때 사용한다.

속성명 : 정렬의 기준이 되는 속성명을 기술한다.
ASC| DESC : 정렬방식으로서 'ASC'는 오름차순, 'DESC'는 내림차순이다. 생략시 오름차순으로 지정된다.

예시 아래 <사원>테이블과 <여가활동>테이블을 보고 예제 문제를 풀어보세요.

<사원>

이름	부서	생일	주소	기본급
홍길동	기획	04/05/61	망원동	120
임꺽정	인터넷	01/09/69	성산동	80
황진이	편집	07/21/75	연희동	100
김선달	편집	10/22/73	망원동	90
성춘향	기획	02/20/64	대흥동	100
장길산	편집	03/11/67	상암동	120
일지매	기획	04/29/78	연남동	110
강건달	인터넷	12/11/80		90

<여가활동>

이름	취미	경력
김선달	당구	10
성춘향	나이트 댄스	5
일지매	태껸	15
임꺽정	씨름	8

예제1 <사원> 테이블이 모든 튜플을 검색하세요.

SELECT * FROM 사원;

예제2 ⭐<사원> 테이블에서 '기본급'에 특별수당 10을 더한 월급을 "XX부서의 XXX의 월급 XXX" 형태로 출력하세요.

SELECT 부서 + '부서의' AS 부서2, 이름+'의 월급' AS 이름2, 기본급 +10 AS 기본급2 FROM 사원;

예제3 <사원> 테이블에서 '기획'부의 모든 튜플을 검색하세요.

SELECT * FROM 사원 WHERE 부서='기획';

예제4 <사원> 테이블에서 "기획" 부서에 근무하면서 "대흥동"에 사는 사람의 튜플을 검색하세요.

SELECT * FROM 사원 WHERE 부서='기획' AND 주소='대흥동';

예제5 <사원> 테이블에서 '생일'이 '01/01/69'에서 '12/31/73' 사이인 튜플을 검색하세요.

SELECT * FROM 사원 WHERE 생일 BETWEEN '01/0169' AND '12/31/73';

예제6 <사원> 테이블에서 '부서'를 기준으로 오름차순 정렬하고, 같은 '부서'에 대해서는 '이름'을 기준으로 내림차순 정렬시켜 검색하세요.

SELECT * FROM 사원 ORDER BY 부서(ASC) , 이름 (DESC);

* 생각보다 다양하고 재밌는 예시, 문제가 많은것 같다. 정보처리기사 시험을 준비할 때 공부했던 '이기적' 서적에 있는 예제를 가져와 정리해 두었다.

② INSERT INTO ~ VALUES : 테이블에 튜플을 삽입할 때 사용한다.

INSERT INTO 테이블명(속성1,속성2,속성3...)
VALUES (데이터1,데이터2,데이터3...)

⚠ INSERT 명령어 사용시 주의해야할 점

대응하는 속성과 데이터의 개수, 유형이 일치해야 한다.
기본 테이블의 모든 속성을 사용할 때는 속성명을 생략할 수 있다.
SELECT 문을 사용하여 다른 테이블의 검색 결과를 삽입할 수 있다.

예시 아래 <사원>테이블을 보고 예제 문제를 풀어보세요.

이름	부서	생일	주소	기본급
홍길동	기획	04/05/61	망원동	120
임꺽정	인터넷	01/09/69	성산동	80
황진이	편집	07/21/75	연희동	100
김선달	편집	10/22/73	망원동	90

예제1 <사원>테이블에 (이름-홍승현, 부서-인터넷)을 삽입하세요.

INSERT INTO 사원(이름, 부서) VALUES('홍승현', '인터넷');

※ 삽입하는 값의 데이터가 VARCHAR과 같이 문자열인 경우 ' '으로 묶어준다.

예제2 <사원>테이블에 (장보고, 기획, 05/06/73,홍제동,90)을 삽입하세요.

INSERT INTO 사원 VALUES('장보고', '기획', '05/06/73', '홍제동', 90);

※ 모든 튜플의 값을 삽입하는 경우는 속성명을 생략할 수 있다.

예제3 <사원>테이블에 있는 편집부의 모든 튜플을 편집부원(이름, 생일, 주소, 기본급) 테이블에 삽입하세요.

INSERT INTO 편집부원(이름, 생일, 주소, 기본급)
SELECT 이름, 생일, 주소, 기본급
FROM 사원
WHERE 부서='편집';

※ 다른 테이블에서 조회한 데이터를 삽입하는 코드이다.

③ DELETE FROM ~ WHERE : 기본 테이블에서 특정 튜플(행)을 삭제할 때 사용한다.

DELETE FROM 테이블명 WHERE 조건 ;

⚠ DELETE 명령어사용시 주의해야할 점

모든 레코드를 삭제할 때는 WHERE 절을 생략한다.
모든 레코드를 삭제하더라도 테이블 구조는 남아 있기 때문에 디스크에서 테이블을 완전히 제거하는 DROP과는 다르다.

예제 1 <사원> 테이블에서 "임꺽정"에 대한 튜플을 삭제하세요.

DELETE FORM 사원 WHERE 이름='임꺽정';

예제 2 <사원> 테이블에서 "인터넷" 부서에 대한 모든 튜플을 삭제하세요.

DELETE FROM 사원 WHERE 부서='인터넷';

예제3 <사원> 테이블의 모든 레코드를 삭제하세요.

DELETE FROM 사원;

④ UPDATE ~ SET 속성=데이터 WHERE : 특정 튜플의 내용을 변경할 때 사용한다.

UPDATE 테이블명 SET 속성명=데이터, 속성명=데이터 ... WHERE 조건 ;

예제 1 <사원> 테이블에서 "홍길동"의 '주소'를 "수색동"으로 수정하시오.

UPDATE 사원 SET 주소='수색동' WHERE 이름='홍길동';

예제 2 <사원> 테이블에서 "황진이"의 '부서'를 "기획부"로 변경하고, '기본급'을 5만원 인상시키시오.

UPDATE 사원 SET 부서='기획', 기본급=기본급+5⭐ WHERE 이름='황진이';

3) DCL(Data Control Language, 데이터 제어어)

DCL은 데이터의 보안, 무결성, 회복, 병행 수행 제어 등을 정의하는 데 사용되는 언어이다.

명령어	기능
COMMIT	명령에 의해 수행된 결과를 실제 물리적 디스크로 저장하고, 데이터베이스 조작 작업이 정상적으로 완료되었음을 관리자에게 알려준다.
ROLLBACK	데이터베이스 조작 작업이 비정상적으로 종료되었을 때 원래 상태로 복구한다.
GRANT	데이터베이스 사용자에게 사용 권한을 부여한다.
REVOKE	데이터베이스 사용자의 사용권한을 취소한다.

함께보면 좋은 서비스 기획 포스팅

[서비스기획] 와이어프레임(Wireframe)의 특징과 작성방법에 대해 알아보자

와이어프레임(Wireframe) 와이어프레임(wireframe)이란 웹·앱의 골격이나 사용자 인터페이스(UI) 및 핵심 기능을 보여주기 위해 선과 도형으로 만든 간단한 형태 또는 프레임이다. 와이어프레임은 도

youngplan.tistory.com

[서비스기획] 메뉴구조도(Menutree)기획과 작성방법에 대해 알아보자

메뉴구조도(Menutree)란? 메뉴구조도란 앱/웹 사이트의 메뉴와 구조를 한눈에 파악하여 볼 수 있도록 정리해놓은 문서이다. 웹사이트의 사이트맵을 생각하면 쉽게 이해할 수 있다. 메뉴구조도는

youngplan.tistory.com

함께보면 좋은 인프라 관련 포스팅

[서비스기획/PM] 홈페이지를 오픈하며 해결했던 문제들 (feat1. 클라우드 및 인프라 환경 설정 편 )

youngplan.tistory.com

[서비스기획/PM] 홈페이지를 오픈하며 해결했던 문제들 (feat2. 개발이슈 편, API연동 개발 이슈, 알

youngplan.tistory.com

[서비스기획/PM] 홈페이지를 오픈하며 해결했던 문제들 (feat2. 개발이슈 편, API연동 개발 이슈, 알림톡 개발 이슈, 솔루션 적용 ,개발서버와 운영서버)

기획하는뇽뇽씨 — Thu, 28 Mar 2024 17:17:02 +0900

저번 포스팅에 이어 홈페이지를 오픈하며 해결했던 개발 이슈에 대해 다뤄보겠다.

[서비스기획/PM] 홈페이지를 오픈하며 해결했던 문제들 (feat1. 클라우드 및 인프라 환경 설정 편 )

youngplan.tistory.com

이전 포스팅 그리고 클라우드 이전에 따른 문제들이 궁금하다고 하면, 위의 게시글을 참고해보면 좋겠다.

클라우드 및 인프라쪽 이슈는 개발이슈만큼이나 중요했다. 그 이유는 네트워크 오류로 인해 사용자들이 접근 자체가 불가능하거나, 연결 불안정으로 인한 접속문제는 서비스 장애를 도래하고, 보안이슈는 개인정보와 직결된 문제이기 때문이다.

어떤 상황이었냐면..

API 연동을 개발하며 겪은 문제들

(1) 문자수신 연동 문제

문자 수신연동은 어떤 상황에 필요할까?

: 민원처리, 접수 프로그램 등 간편접수에 많이 사용되는 방식이다.

예를들면, 112에 긴급 신고 문자를 보낸다던지, 음악방송 중 순위 선별을 위한 문자 수신 등 여러가지 상황에 사용된다.

문자 수신 연동 개발이 필요한 case

처음에는,
고객사측에 관리자 화면 접수> MMS에 문자수신 개발 진행해주세요~ 라고 요청을 하셔서 기능을 파악하는데 어려움을 겪었다. 사용자가 접수한 문자는 수신업체의 게시판을 통해 확인 할 수 있는데, 수신 게시판에 쌓인 데이터를 우리 서비스의 DB,관리자 화면에 저장하기 위해 API 연동을 해야한다.

사용자가 접수한 문자를 통해 얻을 수 있는 데이터는 아래와 같다.
발송 전화번호, 내용 data, 첨부파일 data, 발송일시

문자접수 API 수신 연동 프로세스

대략적으로 그려본 문자접수 API 수신 연동 프로세스이다.

문자수신에 데이터가 들어오지 않은 경우 등 예외 케이스는 작성되지 않았기에 감안하고 봐야한다.

문자수신에서 겪었던 연동 문제는 해당 프로세스를 파악하는게 핵심이었다. ~~문자 업체들은 계약 하고, 계정생성 해주고 가이드 하나 던져주고 알아서 하라는 식.....~~

‍♀️ 해당 문제를 해결하면서,

데이터를 연동받을(응답받을) 빈 페이지가 생성되어야 함을 알수 있었다. API 연동으로 원하는 위치(관리자 화면)에 데이터가 바로 생성되는 줄 알았다......... API로 연동받은 데이터를 저장하고, 활용하여, 데이터를 추가 하는 것까지 개발에서 진행하는 과업임을 이해할 수 있었다.

(2) 알림톡 발신 문제

알림톡 발송 연동시에 겪은 문제상황

요구사항 : 사용자가 접수프로그램에서 접수완료 시점에 접수한 내용이 정상 접수되었다는 내용과, 마케팅 수신 동의에 대한 처리 결과를 카카오톡 알림톡 발송

PM인 내가 진행해야 했던 과업 List

① 클라우드 업체에 8443 포트로 Outbound 통신 가능하도록 오픈 요청

→ 외부로 나가는 8443 포트의 Outbound 통신은 전체개방되도록 설정완료

② 우리 웹서버의 공인 IP 주소 (이중화된 서버이므로 총2개)를 확인하여, 알림톡 발송업체에 발송방화벽 오픈 요청

→ 문제는 ...... 개발서버 IP주소, 그러니까 로컬 IP주소를 등록해달라고 했던 것이다.

운영서버의 공인 IP 주소(실서버 IP주소)가 등록되어있지 않아서, 운영에서 테스트 하는 경우 작동이 안되었던 것이다.

③ 알림톡 템플릿 정리 및 등록

→ 알림톡은 관리자 화면에서 템플릿 등록후 승인과정을 거치고 나서야 개발이 가능하다. 알림톡은 두가지 종류가 있는데, 정보성 메시지는 '주문, 결제내역, 배송메세지'에 해당하고 광고성 메시지는 '전송자가 경제적 이득을 취할 목적을 가지고 전송하는 메시지' 이다.

법적인 가이드라인으로 인해, 카카오 내에서 자체적인 템플릿 검수를 진행한다.

(※ 참고로 알림톡 발송 기획시 참고하면 좋을 내용은 여기에서 확인할 수 있다. )

그래서 문제가 뭐였는데? (feat. 함정)

Access to XMLHttpRequest at 'https://xxxxxxxxxxapi.carxx.com:사용포트번호/v3/발송타입/고객사id/발송타입' from origin 'https://www.발송도메인명.or.kr' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

모든 환경 세팅은 끝났는데, 개발쪽에서 문제가 생겼다고 한다. CORS 정책은 뭐지?

개발 마감 일정은 정해져있는데 개발자가 머리를 부여잡고 힘들어 하고 있으니, 도움이 될까 싶어 CORS 정책에 대해 알아보았다.

CORS(교차 출처 리소스 공유) : 리소스를 주고받으려는 두 출처가 서로 다른 경우에 발생하는 오류
브라우저가 자신이 보낸 요청 및 서버로부터 받은 응답의 데이터가 CORS 정책을 지키는지 검사하여 안전한 요청인지 검증하는 것이다.

✅ 어떤 경우에 cors 오류를 만날까? 출처가 다른 경우 (URL의 프로토콜, 도메인, 포트번호 중 1가지라도 다른경우)

웹의 발달에 따라 클라이언트에서 외부 API를 직접 호출하는 방식이 당연해지기 시작해지면서, CORS 정책이 나타났다. 보통의 클라이언트, API 호출 도메인이 다르기 때문에 출처가 다르더라도 요청과 응답을 주고받을 수 있도록 서버에 리소스 호출이 허용된 출처를 명시하여 해결할 수 있다.

출처와 도메인 url 분석하기

✅ 어떻게 cors 오류를 해결할 수 있을까? 서로 다른 출처에 리소스 공유, 응답을 허용할 수 있도록 설정해야 한다.

서버에서 Access-Control-Allow-Orign 응답헤더 세팅

프록시 서버 사용

그래서 문제가 뭐였는데? (feat. 진짜문제)

개발자는 서버에서 Access-Control-Allow-Orign 응답헤더를 *로 설정해도 동일한 오류에서 벗어나지 못했다고 했다.

진짜 문제는 뭐였을까?
요청 메세지를 요청할 때 [ ](대괄호) 안에 메시지를 포함시켜 보내야 했다.
알림톡 업체에서 응답 시 대괄호가 없어 되돌아온 에러였다.

다른 API를 개발할 때 대괄호를 포함하여 값을 보내지 않아도 발송에 문제가 없었다고 한다.

당연하다고 생각했던 부분에서 발생했던 문제였지만, 꽤나 오랜 시간 고민하고 고생했던 문제였다.

발송은 되는데 .. 데이터 타입 불일치로 발송 안되는 문제

알림톡은 승인받은 템플릿의 내용과 동일하게 요청 데이터를 보내야 정상발송된다. 우리가 설정한 변수는 이름과 선택동의사항 여부, 접수일자였다.

테스트 진행해보면서 접수는 정상으로 인입되지만, 응답에러 화면을 통해 요청 데이터가 템플릿 내용과 일치하지 않는다는 것을 확인할 수 있었다.

응답 에러 화면

이름 → name, 선택동의사항 → true/false, 접수일자 → YYYY-MM-DD

사용자가 접수 시 입력한 값을 변수에 저장하여 알림톡 발송 요청이 진행되어야 한다. 어떤 부분이 틀렸을까 하고 오류코드를 살피는데, yyyy.mm.dd.hh.mm.ss 형태로 저장되고 있었다. 시간과 분, 초 까지 요청하니 템플릿 내용과 동일하지 않다는 오류가 뜰 수 밖에.

‍♀️ 아무튼 이 모든 문제를 해결하고 나서야 알림톡 테스트를 정상적으로 마치게 되었다.

알림톡 개발 참 어렵구나.. 조건도 정말 많구나 싶었다.

과거의 내가 알림톡 기획을 ' A 시점에 B 사용자에게 C내용을 알림톡을 발송한다.' 로 정의했다면, 현재는 알림톡 템플릿에 대한 규제와 API 호출 및 요청 등 다양한 배경지식을 쌓음으로써, 개발자와 원활한 소통을 빠르게 진행할 수 있지 않을까 하는 기대를 가진다.

개발서버와 운영서버에서 테스트했을때 발생한 문제

개발서버 / 스테이징 서버/ 운영 서버

로컬서버	개발서버	스테이징 서버	운영서버
개발자들이 처음으로 실행시키는 서버 ( http://local:8080 등)	개발자들의 개인 개발환경이 아닌 1개의 통합된 환경으로 테스트를 할 수 있는 서버	테스트 서버로 불리며, 운영 서버 환경과 거의 100%로 비슷할 정도로 환경을 맞춘 다음, 운영 서버에서 사용되는 데이터를 가지고 운영서버에 반영하기 전에 테스트를 거치는 서버	실제 운영되는 서버 환경

서버 환경과 구성에 따른 테스트 진행 가능여부, 애플리케이션 설정 등으로 생긴 문제들을 기록하고자 한다.

개발서버 환경에서 N번의 테스트를 거친 뒤(완벽한 줄 알았던), 운영서버 반영 하며 발생했던 문제들은 상상 이상으로 많았다.

(1) innorix 솔루션 적용 문제

innorix 솔루션
사용자들이 웹 기반 시스템에서 대용량 파일을 고속으로 업로드, 다운로드 할 수 있도록 하는 파일 전송 솔루션

접수 프로그램 절차중 innorix 솔루션을 이용하여 파일을 업로드 하는 과정이 있었는데, 솔루션을 설치했음에도 테스트가 안되는 문제가 있었다. 확인해보니 솔루션이 웹사이트 도메인과 연결되어있어, 운영서버에서만 테스트가 가능했다.

(2) 첨부파일 표출이 안되는 문제

개발서버에서 모든 테스트를 완벽히 마치고 운영서버에 반영하고 테스트를 해보니, 배너관리, 팝업관리, 이벤트 썸네일 등 첨부파일이 들어간 부분이 모두 보이지 않는 문제가 있었다.

◻ 사용자 파일 업로드 → 접수 및 신청 완료 → 파일 리사이징 → NAS 스토리지에 저장 → 리사이징된 파일을 해당 화면에 표출

◼ 관리자 파일 업로드 → 파일 리사이징 → NAS 스토리지에 저장 → 리사이징된 파일을 해당 화면에 표출

첨부파일 표출 안되는 이유

해당 문제가 어떤 문제인지 확인해보니, 파일 리사이징 단계를 거치지 않아서 파일이 저장되지 않는 문제였다.

확인해 본 결과, 개발서버의 php에 '리사이징을 위한 라이브러리'가 설치되어있어 정상적으로 작동했지만,

운영서버에서 php 설치 시 해당 라이브러리를 포함하여 설치하지 않아서 생긴 문제였다.

그럼 라이브러리만 설치하자!

개발 애플리케이션 내에 '리사이징 라이브러리'를 설치하려고 했더니, 아파치 환경이 버그 및 패치 지원이 끝난 예전 버전이었기에 설치에 오류가 생겼다. 그래서 클라우드 업체에서 새로운 테스트 서버 올려주시고, 아파치 버전을 2.xx버전으로 업그레이드 후에 라이브러리를 포함한 애플리케이션 설치로 해당 문제를 해결 할 수 있었다.

‍♀️ 해당 문제를 해결하면서,

애플리케이션 버전 업그레이드와 DB, NAS, WEB, 개발언어 등 버전 관리는 어떻게 진행하는지 궁금했다.

필자의 경우, 이전 업체가 구축한 환경을 유지해야 했기에 현재 지원되는 버전과 격차가 크게 벌어져있었다.

개발 환경을 변경하게 되면 소스 오류를 고치는 시간과 비용으로 구 버전을 고집했지만,

언젠가 버전관리나 형상관리를 어떻게 하는지 파악해볼 수 있는 큰 시스템을 접해볼 수 있었음 좋겠다고 생각했다.

(3) QR접수 테스트가 안되는 문제

메인화면 디자인을 개편하면서, QR코드 이미지를 생성해달라는 요청이 있었다. QR코드는 실제 운영 서버의 URL로 생성되었기 때문에, 개발서버에서 QR코드 접속 테스트를 진행할 때 오픈 이전의 서버로의 접근이 불가능 했다.

→ 개발서버에서는 QR 접수가 불가능하다. 운영서버의 도메인으로 QR코드가 생성되었고, 운영서버가 오픈되지 않았기 때문이다.

↓함께 보면 좋은 글↓

[서비스기획/PM] 홈페이지를 오픈하며 해결했던 문제들 (feat1. 클라우드 및 인프라 환경 설정 편 )

youngplan.tistory.com

[서비스기획/PM] 홈페이지를 오픈하며 해결했던 문제들 (feat1. 클라우드 및 인프라 환경 설정 편 )

기획하는뇽뇽씨 — Thu, 14 Mar 2024 17:31:38 +0900

필자는 프로젝트 매니저로써 "첫 번째 OO홈페이지" 프로젝트를 오픈하며 발생했던 이슈들, 이슈 해결방법 들에 대해 공유해보고자 한다. 분명 기획자로 회사에 입사했는데 PM일을 하게 될 줄이야.. 현재 다니고 있는 회사에서 다양한 일을 경험해보는 것 같다.

문제가 뭐였는데? (feat. 1 클라우드 및 인프라 환경 설정 편)

(1). 단순한 유지보수 사업에서 서버 이관까지 이어진 ing..

‍♀️ 서버를 사용하려면 매년 계약해야 한다구요?@!

때는 바야흐로 기능개선 및 고도화 사업을 마치고 연간 운영사업을 논의하던 회의에서..

(나) : "서버업체는 어디와 계약되어있으신가요? "

‍♀️ " 서버는 한번 계약을 진행하면 계속해서 사용할 수 있는 것 아니었나요?!!"

(나) : "?!!!!<!!?!?!<네? 매달 일정 금액을 지불하면서 해당 OTT, 클라우드 서비스와 마찬가지로 서버도 연간 단위로 계약을 진행하셔야 합니다."

이때부터 국내 클라우드 3사에 견적을 요청했고, 견적요청하는 방법부터 인프라 환경에 대해 공부할 수 있었다..!

해당 내용은 아래 포스팅에서 확인 할 수 있다.

[PM/infra] PM이 클라우드 견적을 요청하려고 할 때 알아두어야 할 것 (호스팅, 서버와 클라우드의

호스팅이란? 인터넷상에서 서비스를 운영하는데 필요한 서버 공간을 전체 또는 일부를 임대해 주는 서비스이다. - 호스팅의 종류 웹호스팅 클라우드 서버호스팅 - 웹호스팅? 서버? 클라우드? 세

youngplan.tistory.com

무사히 클라우드 계약이 진행될 수 있도록 도움을 드리며 마무리된 문제였다. ( 해결까지 3달이나 걸렸던 문제였다. )

(2). 물리서버 한대의 웹호스팅환경에서 클라우드 이중화 환경으로 이관했을때 발생한 문제

서버 내의 애플리케이션 설치 버전으로 종속성 이슈

이번 프로젝트는 이전업체가 구축한 소스와 파일을 그대로 가지고 와서 신규 기능 개선 및 고도화를 진행했기 때문에, 개발환경 또한 이전 업체에서 사용한 환경으로 세팅하는 것이 필수였다. 하지만, 너무 예전 버전을 사용하고 있어 클라우드 환경에서 애플리케이션을 설치 시 '종속성 이슈'가 발생했다고 한다.

설치를 요청한 개발 환경 버전

Apache 1.3.37

PHP 5.3.13

DB 5.3

(아파치의 경우 2006년도에 지원가능했던 버전으로, 버그 및 기술 지원이 끝난 상태였다. )

하지만, PHP 개발 언어의 버전을 업그레이드 하게 되면 개발 소스에 엄청난 오류를 범하게 될 것이고.. 해당 오류를 해결하기 위해서는 엄청난 고통이 동반되는 것을 경험해본 사수님께서, 개발환경의 경우는 '무.조.건' 동일하게 가야한다라고 말씀해주셨다.

클라우드 업체에서 결국 요청 드린 버전에 맞추어 환경을 세팅해주셨다.

서버 설치는 해주셨는데.. '서버 환경 설정은 모두 개발사에서 진행해주셔야 합니다.'

클라우드 유지운영 협력업체에서는 인프라 환경 및 보안, 네트워크, 통신문제에 관해서만 기술지원이 가능하다고 한다.

그렇기 때문에 개발환경에 필요한 애플리케이션을 버전에 맞추어 설치해주는 작업까지만 지원을 해주셨고, 이외에

DB 권한 설정, DB 서브계정 설정, DB 연결, 웹서버 부팅 시 아파치 실행되도록 설정 등 기존 환경세팅에 맞추어 설정하는 부분이 필요했고, 웹호스팅팀에 도움을 요청하여 해결 할 수 있었다.

동일한 환경설정, 세팅의 필요

web1 서버와 web2서버의 폴더 경로를 도메인 명으로 설정했는데, web2 서버의 폴더 경로가 동일하게 설정되지 않아 로드밸런서가 web2 서버를 찾지 못한다고 하셨다.

home/ tXXXXXX.co.kr → or.kr 로 서버 두대의 폴더경로를 동일하게 설정하여 해결할 수 있었다.

동일한 환경설정, 세팅의 필요

소스코드 배포시 동기화 문제

web1 서버와 web2 서버 내에 동일한 소스코드가 배포, 반영되어야 모든 사용자들이 화면과 기능을 동일하게 사용할 수 있다. 그렇게 되면, 개발자는 소스코드를 수정하고 반영할 때 서버 두대에 각각 반영해야한다는 번거로움과, 다르게 반영할 수 있는 문제를 발견했다.

이중화된 서버에 동일한 소스코드가 배포되기 위해서는 배포 자체를 git과 같은 형상관리 툴로 진행해야 한다고 하셨다. 해당 방법으로 문제를 해결 할 수 있었다.

소스코드 배포시 동기화 문제

웹서버 이중화로 인한 세션관리 문제

사용자 페이지 내에서는 회원 로그인 기능이 없어서 발견하지 못했던 문제였다. 관리자 페이지에서 로그인하여 업무를 보던 중 일정 시간이 지나거나 세션을 가지고 있지 않은 서버로 자동인입되는 경우, 세션이 끊기는 문제였다.

세션을 관리하기 위해서는 어떻게 해야하는지 찾아보던 중 세가지 방법을 발견했다.

첫 번째 방법은 개발단에서 로그인 여부를 DB로 저장, 후에 DB를 읽어서 동기화 처리를 진행하는 방법( 개발 시간 소요 ..)

두 번째 방법은 WAS 단에서 설정하여 클러스터링 하는 방법 (PHP 환경으로 WAS 서버가 없는 우리는 ❌ )

세 번째 방법은 서버 이중화를 위해 세팅되어있는 LB(로드밸런서)에 Sticky session을 설정하여 고정 세션을 사용할 수 있도록 해주는 방법 (외부 협력업체에서 진행해주실 수 있는 빠른 방법 )

웹서버 이중화로 인한 세션관리 문제 <해결>

로드밸런서의 스티키 세션설정으로 고정된 세션을 유지하도록 설정함으로써 해결했다.

[PM/infra] 다중 서버 환경에서 소스코드 동기화 문제와 로그인 세션 문제 해결하기 (sticky session)

youngplan.tistory.com

서버 이중화 환경에서 스토리지를 Block Volume으로 구성한 문제

맨 처음 클라우드 환경을 구성·설계할 때, 사용자 페이지에서 사진 및 첨부파일 등록이 많을 것으로 예상된다는 내용을 포함하여 견적을 요청했다. 클라우드 계약 미팅에서 '파일을 저장할 스토리지 구성'에 대해 여쭤보았을때 DB 서버에 BlockVolume (서버 내에 저장 공간)으로 구성해주시겠다는 것을 NAS로 생각함으로써 의사소통에 오해가 생겼었다..^^;;

BlockVolume과 NAS의 역할 및 저장되는 data

BlockVolume : Web/DB 서버 내에 할당되어 붙어있는 개별 저장장치
✏ 웹서버 Block Volume : 소스코드, 메모리 등이 저장된다.
✏ DB 서버 Block Volume : 사용자들이 입력, 저장한 데이터와 로그가 저장된다. 첨부파일을 저장할 수 없다.
✏ NAS : 별도의 개별 저장장치로, 첨부파일등이 저장된다.

이부분은 클라우드 환경을 설정하는 과정에서 한번 더 짚고 넘어간 문제였다.

환경세팅을 도와주신 엔지니어분께서 보통 이중화 환경에서는 두개의 웹서버가 NAS 저장장치를 바라보게 환경설정을 진행하는데 계약이 Block Volume으로 잡혀있다. NAS를 구성하려면 별도의 계약이 필요해 보인다. 라고 말씀하셨다. 하지만 계약의 주체가 '클라이언트'이었기에 금액적인 부분이 추가되는 문제로 일단은 패스 했다.

"첨부파일이 저장되지 않는다."

개발이 완료되어 개발서버에서 테스트를 진행하던 도중, 다른 text 데이터들은 모두 저장되지만 첨부파일과 같은 데이터들이 저장되지 않는 문제를 발견했다. 처음에는 서버 두대가 첨부파일을 공유하여 받지 못해 생기는 문제인 줄 알았는데,

서버 이중화 환경에서 두개의 서버가 NAS를 바라보도록 설정되어있지 않아 생기는 문제였다.

서버 이중화 환경에서 nas 스토리지를 구성하지 않은 문제

[해결]

클라우드 업체측에 해당 상황을 공유하고, DB 스토리지의 800GB 를 NAS로 구성하도록 변경이 가능한지 문의드렸다.

다행히도 가능하다고 하셨고, 금방 환경설정을 진행해주셔서 빠르게 문제를 해결 할 수 있었다.

DB 스토리지 삭제 및 NAS 설정을 요청한 메일..

다음 포스팅으로 "문제가 뭐였는데? (feat. 2 개발 이슈 편)" 으로 돌아오겠다..!

엄청나게 머리 아픈 일들을 좌르르륵 적다보니 그만큼 성장한 것 같아서 뿌듯하기도 하면서

그 간 있었던 일들이 주마등처럼 지나갔다. 경험한 만큼 성장하는 것 같다. 값진 시간이었다고 할 수 있다.

[PM/infra] 다중 서버 환경에서 소스코드 동기화 문제와 로그인 세션 문제 해결하기 (sticky session)

기획하는뇽뇽씨 — Wed, 28 Feb 2024 17:50:46 +0900

다중서버 환경에서 발생한 문제 배경

필자는 현재 다니고 있는 회사에서 클라우드 이관 작업을 PM 직무로써 경험했다. 그 과정에서 배운 것들을 기록하고자 한다. 클라이언트의 웹서비스 환경은 물리 서버 한대에 ' Web + DB + 저장장치'가 모두 구성된 웹호스팅 환경에서 로드밸런스, Web서버 두대, DB 서버를 각각 분리하여 클라우드 환경으로 이관했다.

웹호스팅 방식에서 클라우드 환경으로의 이관

클라우드 환경 이관 시 견적을 받아야 하는데, 서비스 사용 목적, 동시접속자 수, 회원 수, 서비스의 범위등 '트래픽'에 따라 구성되는 환경이 제 각각이다. 필자가 작성해 놓은 견적 요청 시 필요한 정보를 아래 링크로 공유한다.

[PM/infra] PM이 클라우드 견적을 요청하려고 할 때 알아두어야 할 것 (호스팅, 서버와 클라우드의

youngplan.tistory.com

발생한 문제에 대한 기록

(1) 서버 이중화 환경에 따른 소스코드 동기화 문제

로드밸런서의 역할은 '접속하는 웹서버의 종류, 순서와 관계없이 동일한 서비스의 화면과 기능을 표출함으로써 부하를 줄여주는 것'이다.

첫 번째 : 두 서버의 Directory 파일명 불일치

서버 이중화 환경에서 마주했던 첫 번째 문제는 '두 웹서버의 Directory명이 일치하지 않는다.'였다.

web01, web02 서버의 배포 위치와 Directory명을 도메인 URL로 설정해두었는데, 뒤에 붙는 co.kr을 or.kr로 동일하게 수정해 줌으로써 첫 번째 문제를 해결했다.

웹서버가 사용자 요청 페이지를 찾을 수 없는 경우

사용자 화면에서 F5를 눌러 새로고침 하는 경우마다
Error화면과 정상 운영 상태가 반복된다.

두 번째 : 두 서버에 배포된 소스코드 불일치(정합성 문제)

두 번째 문제는 'web01, web02 서버에 소스코드가 동일하지 않다고 합니다.'였다.

이번 문제는 한쪽에 장애가 발생하지 않는 이상 소스코드가 다르게 올라간 상태로 동시에 운영하게 되는 문제이다.

예를 들어, web01번 서버로 트래픽이 인입될 경우 사용자들은 web01번 소스로 올라간 웹페이지를 보게 될 것이고, web02번 서버로 인입될 경우 마찬가지로 web02번 소스로 올라간 웹페이지를 보게 된다.

이중화 서버의 소스코드가 다른 경우

사용자들이 접근하는 페이지에 따라서
반영/ 수정된 기능과 화면이 다르게 보이는 채로 운영된다.
= 소스 배포 시 동기화가 필수적이다.

세 번째 : 서버의 장애 발생시 생기는 현상

세 번째 경우, 한쪽의 장애 발생으로 인해 웹페이지를 띄우지 못하는 경우, 정상 작동하는 쪽으로만 서비스가 운영된다. 장애는 '아파치 서버 or 웹서버 or DB 서버'가 죽는 현상으로 설명할 수 있다.

(2) 서버 이중화 환경에 따른 세션 공유 문제

세션의 정의

✔ 세션(Session)이란?
사용자 로그인 정보 등 사용자에 대한 정보를 일정 기간 동안에 서버에 기록하고 보관함으로써 사용자를 관리하기 위한 목적으로 사용되는 서버의 저장공간이다.

쿠키와 세션의 차이점

쿠키 : 클라이언트의 컴퓨터에 모든 데이터를 저장한다.
세션 : 서비스가 돌아가는 서버에 데이터를 저장하고, 세션의 키값만을 클라이언트에 남겨둔다.

구글 설정> 개인정보 보호 및 보안 > 쿠키 관리

배경은 이러했다..

(1) 문제와 마찬가지로, 관리자 웹페이지에서 로그인 상태로 사이트를 운영하고 있었는데, 갑자기 '로그인 후에 이용 가능합니다.'라는 문구와 함께 로그인 페이지로 이동하는 문제를 겪게 되었다. 이는 사용자의 로그인 정보(세션, session)를 서버에 저장하는데, 서버에 저장된 세션정보가 자체적으로 공유되지 않아 생기는 문제였다.

어떻게 해결했나요?

개발언어가 PHP이기에, 우리가 고를 수 있는 해결방안의 선택지는 아래의 2가지 방법뿐이었다.

1 - 네이버클라우드 로드밸런서에 Sticky session을 설정한다. (클라우드 단의 해결법)

Sticky session 설정은 MSP 업체에서 진행해 주셨고 아래 설명은 네이버클라우드 스티키 세션 설정 가이드를 활용하였다.

네이버클라우드 sticky session 설정

수동으로 설정을 원한다고 하면 Target Group 생성 → Target Group 설정에서 ' Sticky Session' 체크 → 수정완료로 처리할 수 있다.

Stiky Session 진행방식

sticky session 진행방식

Sticky Session이란 쉽게 설명해 고정된 세션을 의미한다.

예를 들어, User1이 Web01 server에서 로그인을 시도하여 세션을 생성했다면, 이후에 User1이 보내는 모든 요청은 web01 서버로만 보내지게 된다. 로드밸런서가 web01 서버로 모든 요청을 리다이렉트 하여 고정된 세션만 사용하도록 하는 방식이다.

장점 : 동일한 사용자가 고정된 서버에 요청을 보낼 수 있게 됨으로써 데이터 정합성 이슈가 없다.
단점 : 특정 서버에 트래픽이 집중될 경우 다른 서버를 사용할 수 없으며, 장애 발생 시 세션정보를 모두 잃는다.

* 데이터 정합성 : 데이터가 서로 모순 없이 일관되게 일치함

2 - 사용자 로그인 여부를 DB로 저장하여 동기화 처리한다. (개발 단의 해결법)

사용자 로그인 DB 저장, 동기화 진행방식

해당 방식은 개발단에서 사용자의 로그인 정보 혹은 세션 값을 DB에 저장하여, 동일한 사용자가 로그인하는 경우 값을 동기화 처리하여 세션을 유지시키는 방식이다. 특정 서버에만 트래픽이 몰리는 문제는 방지할 수 있지만, DB의 사용량이 많아지게 됨으로써 DB 트래픽 과부하 문제가 발생할 수 있다.

↓ 함께보면 좋은 인프라 관련 포스팅↓

[PM/infra] ip주소변경 방법과 공인 IP와 사설 IP의 차이점을 알아보자

youngplan.tistory.com

[PM/infra] www. 설정은 어떻게 하나요? (도메인, 호스트네임, 서브도메인, www 설정, 네임서버, DNS)

youngplan.tistory.com

[PM/infra] PM이 클라우드 계약시 알아두면 좋은 것( SSL과 HTTPS, IPS, WAF 등 보안서비스,MSP 개념)

이전 포스팅은 클라우드 견적 요청 시 알아두면 좋은 것들과 더불어 견적요청을 위한 것들을 작성해 보았다. 웹호스팅부터 클라우드, 서버의 기본개념과 차이점에 대해 포스팅해 두었기에, 아

youngplan.tistory.com

[PM/infra] PM이 클라우드 견적을 요청하려고 할 때 알아두어야 할 것 (호스팅, 서버와 클라우드의

youngplan.tistory.com

[PM/infra] ip주소변경 방법과 공인 IP와 사설 IP의 차이점을 알아보자

기획하는뇽뇽씨 — Thu, 22 Feb 2024 16:42:13 +0900

이전 포스팅은 WWW.을 설정하는 방법과 도메인의 기본적인 지식에 대해 포스팅 해두었으므로 함께 보는것을 추천한다.

도메인이란?

가상공간에서 '인터넷상의 주소'로써, 숫자로 구성된 IP 주소를 알기 쉽고 기억하기 쉽게 문자의 형태로 변환한 것이다.

- 영문도메인(63자 이하) : 알파벳(a~z), 숫자(0~9), 하이픈(-)을 조합해서 사용한다.

- 한글 도메인(17자 이하) : 한글, 알파벳(a~z), 숫자(0~9), 하이픈(-)을 조합해서 사용한다.

IP(Internet Protocol)주소란?

인터넷에 연결되는 모든 기기의 위치와 식별을 위해 숫자(4개의 10진수)로 구성하여 부여된 고유 주소 (ex: 234.240.33.158)

클라우드로 이해하는 공인 IP와 사설 IP

공인 IP(Public IP)

인터넷 사용자의 로컬 네트워크를 식별하기 위해 ISP(인터넷 서비스 공급자)가 제공하는 IP주소이다. 공용 IP주소라고도 불리며 외부에 공개되어 있는 IP주소를 의미한다.

공인 IP 특징 알려줘!

공인 IP는 전세계에서 유일한 IP주소로써 외부에 공개되어 있기 때문에 인터넷에 연결된 다른 PC로부터의 접근이 가능하다.
SK, KT, LG 등의 통신사를 이용하여 사용하는 인터넷망을 공인 IP라고 할 수 있다.
외부의 접근이 가능함으로써 공격 및 보안을 위해 방화벽 등의 보안 프로그램을 설치할 필요가 있다.

사설 IP(Private IP)

일반 가정이나 회사 내 등에 할당된 네트워크의 IP 주소로써, 로컬 IP, 가상 IP라고도 한다. 주로 라우터에 의해 로컬 네트워크상의 PC나 장치에 할당된다.

사설 IP 특징 알려줘!

인터넷 공유기에 연결된 PC, TV, 스마트폰 등이 대표적인 사설 IP 주소이다. 외부에는 공개되지 않아서 외부에서 검색, 접근이 불가능한 IP이다.
주로 인프라 내부의 서버, DB에 접속할때 사용하게 되는 IP주소이다.

※ 사설 IP와 공인 IP의 차이

	공인 IP (Public IP)	사설 IP(Private IP)
할당 주체	ISP (인터넷 서비스 공급자)	라우터(공유기)
할당 대상	개인 또는 회사의 서버(라우터)	개인 또는 회사의 기기
고유성	인터넷 상에서 유일한 주소	하나의 네트워크 안에서 유일
공개 여부	내/외부 접근 가능	외부 접근 불가능

IP 주소를 변경하는 방법

어떤 경우에 IP주소를 변경하나요?

1. 인터넷 뱅킹이나 스트리밍 서비스를 해외 이용시 지역 차단을 해제하기 위해
2. 정부, ISP, 로컬 네트워크 제한을 우회 하는 경우
3. 사생활 보호 기능을 사용하기 위해

※ VPN이란?

"Virtual Private Network(가상사설망)"의 약자로 인터넷 연결을 암호화하고 선택한 위치의 서버를 통해 데이터를 짧은 거리를 선택하여 통신하는 네트워크이다.

공인 IP 주소 변경 방법

1. VPN에 연결하여 IP 주소를 변경한다.

2. 프록시를 사용하여 IP주소를 변경한다.

3. Tor(The Onion Router)를 사용하여 IP주소를 무료로 변경한다.

4. 인터넷 모뎀의 플러그를 뽑아 다시 연결한 후 IP 주소를 변경한다.

5. ISP(SK, KT, LG 등 통신사)에 요청하여 IP 주소를 변경한다.

6. 네트워크를 변경( Wifi → 데이터/ BWifi → A Wifi)하여 다른 IP 주소를 얻는다.

↓ 함께보면 좋은 인프라 관련 포스팅↓

[PM/infra] PM이 클라우드 계약시 알아두면 좋은 것( SSL과 HTTPS, IPS, WAF 등 보안서비스,MSP 개념)

youngplan.tistory.com

[PM/infra] www. 설정은 어떻게 하나요? (도메인, 호스트네임, 서브도메인, www 설정, 네임서버, DNS)

youngplan.tistory.com

[PM/infra] PM이 클라우드 견적을 요청하려고 할 때 알아두어야 할 것 (호스팅, 서버와 클라우드의

youngplan.tistory.com

레퍼런스

[PM/infra] www. 설정은 어떻게 하나요? (도메인, 호스트네임, 서브도메인, www 설정, 네임서버, DNS)

기획하는뇽뇽씨 — Wed, 7 Feb 2024 15:48:09 +0900

오늘은 요 며칠간 나를 혼돈의 카오스로 만든 '도메인 및 DNS 네임서버'에 관하여 PM 및 기획자가 알아두면 좋은 도메인 관련 지식을 포스팅해보려고 한다.

시작은 이렇게 되었다.

(Client) 도메인은 OO 업체에서 구매했는데, WWW. 이 부분은 어디에서 설정해야 하나요?
웹호스팅에 포함되어 있는 부분인가요? 따로 구매해야 할까요?

나의 당황짤

도메인을 구입하신 업체의
네임서버가 어느 업체로 되어있는지 확인하신 뒤에
네임서비스 메뉴에서 '호스트네임=서브도메인'을 WWW.으로 설정하면 됩니다.

두 문장으로 고객에게 답변을 전달하면 어떻게 될까? '이게 무슨 소리인가..' 하고 서로 답답한 상황만이 지속될 것이다. 아래 도메인과, 호스트네임=서브도메인, 네임서버, URL 개념을 정확하게 이해하고 고객에게 해당 내용을 안내하는 방법까지 소개한다.

고객사의 당황짤

1. 도메인(Domain)이란?

도메인은 '웹사이트의 위치'를 나타내는 것으로, IP 주소를 대신하여 사용하는 주소를 가리킨다.
예를 들어, 도메인 이름 "naver.com"은 = IP주소 "125.209.222.141"을 가리킨다.
주소창에 naver.com을 검색한 것과, http://125.209.222.141을 검색한 결과로 동일하게 '네이버'로 이동한다.

2. 호스트네임(HostName)? 서브도메인(SubDomain)? 과 네임 서비스

서브 도메인(=호스트네임)은 웹사이트의 섹션을 구분하기 위해 도메인 이름에 추가되는 보조 도메인이다.
네임 서비스는 서브 도메인을 설정할 수 있는 기능으로써 도메인 1개당 50개까지 설정이 가능하다. (*서비스별 개수 다름)

서브 도메인의 특징

일반적으로 서브도메인은 주 도메인의 테스트용 페이지로 사용된다.
서브도메인은 모바일 사이트(m.~~), 위치별 사이트(mail.~), 하위 섹션으로 유용하게 사용된다.

서브 도메인 예시

티스토리 블로그를 처음 개설하게 되면, 도메인을 설정한다.

도메인의 주소 tistory.com를 유지하면서 서브도메인 이름인 youngplan 사용자의 블로그 주소로 구분 짓는다.

티스토리 서브도메인 :youngplan

네이버는 서비스를 호스트네임으로 구분 지어 사용자가 접근할 수 있도록 한다.

1) 네이버 포탈 홈 : www.

네이버 서브도메인 : www

2) 네이버 메일 서비스 : mail.

네이버 메일 : mail.

3) 네이버 블로그 서비스 : blog.

네이버 블로그 : blog.

3. 그래서, www. 도메인 앞에 어떻게 붙이는 건데!

도메인 서비스 업체마다 설정 방식, 서비스 구조의 차이가 있기에 고객센터에 사전에 확인하는 것이 좋다. 필자는 아이네임즈 서비스에서 호스트네임( www.)을 설정하는 방법을 안내한다.

고객과 소통 시 사전에 확인해야 할 것

아래의 조건을 갖춰야 www. 설정이 가능해요
✔ 도메인을 보유하고 있는가 1
✔ 도메인에 연결된 네임서버가 존재하는가 2
✔ 도메인업체의 계정정보를 알고 있는가

사전준비를 위해서는

1. 도메인 미보유 시 : 도메인 업체에서 도메인 구입 및 계약 진행
2. 도메인 연결된 네임서버가 없을 경우 : 도메인 업체 내에서 무료/유로로 제공하고 있는 네임서비스 계약 및 연결

네임서비스 진행과정

1. 구매한 도메인 서비스(아이네임즈) 로그인

2. 도메인 > 부가서비스 > 네임서비스 메뉴 접속

3. 도메인 선택

4. 정보 입력 및 신청하기

네임서비스 입력정보 설정하기<출처: 아이네임즈>

◼ 호스트 : 웹주소 IP(= www. 혹은 MX값 등의 정보)를 입력할 경우 사용하는 공간이다.

◼ Type : A, CNAME, MX, TXT, SRV로 이루어져 있으며, Type 별 입력하는 데이터가 다르기에 신중하게 선택해야 한다.

✔ Type
◾ A - Content에 IP주소를 입력할 때 사용한다.
◾ CNAME - 도메인 주소를 입력할 때 사용한다.
◾ MX - 메일값을 입력할 때 사용한다. (* 순위항목은 MX 값을 설정할 때만 사용한다.)
◾ TXT - SPF값을 입력할 때 사용한다.

◼ Content : ip주소 혹은 레코드 값을 입력하는 공간이다.

◼ 순위 : Type이 MX로 선택되었을 때 설정한다.

4. 네임서버(DNS, Domain Name Syetem)란?

네임서버(NameServer)=DNS란
해당 도메인에 매핑되는 IP주소로 변환해 주는 서버이다.
네임서버를 사용하는 도메인은 해당 네임서버에서 IP주소를 반환해 주고, 이로 인해 사용자들은 IP주소를 기억하지 않고 해당 주소의 웹 사이트에 접근할 수 있다.
(* 네임서비스 설정을 위한 사전조건 ✌번)

DNS 작동방식에 대해 알아보자

DNS 작동과정과 원리

DNS 서버 종류에 대해 알아보자

◻ Root DNS 서버 : TLD DNS 서버 IP들을 저장해 두고 안내하는 역할이다. ICANN이 직접 관리한다.

◻ TLD DNS 서버 :. com,. co.kr과 같은 점 뒤에 오는 도메인 확장자를 사용하는 모든 도메인 정보를 관리한다.

◻ Autoritative DNS 서버 : 실제 도메인의 IP 주소가 기록되는 서버이다. 도메인/호스팅 업체의 '네임서버'에 해당됨

◻ Recursive DNS 서버 : 인터넷 사용자가 가장 먼저 접근하는 DNS 서버로, 특정 도메인에 대한 IP정보를 캐시 형태로 저장해 놓는다. 대표적인 예로, KT/SK/LG 와 같은 ISP(통신사) DNS 서버가 있다.

5. URL 자세히 뜯어 분석하기

url 분석하기

프로토콜 : 컴퓨터 또는 전자기기 간의 통신을 위해 데이터 교환 방식을 정의하는 규칙체계이다.
호스트네임 : 네트워크 디바이스(컴퓨터)에 할당되는 이름이다.
도메인네임 : 네트워크에 부여되는 이름이다.
탑레벨 도메인 : 국가별, 지역 및 기관별 구분을 위한 도메인으로써 가장 마지막 부분이다.
루트 도메인 : 도메인 네임 + 탑레벨 도메인을 합친 도메인으로써, 공급업체로부터 구매할 수 있는 이름이다.

↓ 함께보면 좋은 클라우드 관련 포스팅 ↓

[서비스기획] PM이 클라우드 견적을 요청하려고 할 때 알아두어야 할 것 (호스팅, 서버와 클라우

youngplan.tistory.com

[서비스기획] PM이 클라우드 계약시 알아두면 좋은 것( SSL과 HTTPS, IPS, WAF 등 보안서비스,MSP 개념)

youngplan.tistory.com

참고 레퍼런스

https://velog.io/@kkj53051000/%EB% 8F%84% EB% A9%94% EC% 9D% B8 Domain% EA% B3% BC-DNS-%EC% A0%95% EB% A6% AC

https://velog.io/@minjae-mj/%ED%98%B8%EC%8A%A4%ED%8A%B8-%EB%84%A4%EC%9E%84%EA%B3%BC-%EB%8F%84%EB%A9%94%EC%9D%B8-%EB%84%A4%EC%9E%84

[이커머스 기획] Ecommerce에서 자주 등장하는 결제 용어에 대해 알아보자 1

기획하는뇽뇽씨 — Wed, 31 Jan 2024 10:57:11 +0900

해당 글은 토스페이먼츠의 용어사전을 참조하여 포스팅했습니다.

가상계좌

가상계좌란?
온라인 결제를 위해 고객에게 발급되는 임시 계좌로써, '무통장입금'으로 불리기도 한다.
고객이 가상계좌를 요청하면, 고객의 이름으로 임시 계좌가 발급되고, 해당 계좌에 정확한 금액을 입금하면 결제가 완료된다. 무통장입금은 복잡한 본인인증 절차가 생략된다.

가상계좌 결제 프로세스

가상계좌의 특징

정해진 금액을 설정된 기한 내에 입금해야 한다. 또한, 주문의 입금 금액을 한번에 송금해야 한다.
입금 기한, 금액, 계좌번호, 은행이 모두 일치한다면 입금자명과 주문자명은 달라도 결제는 이루어진다.
결제를 요청시 가상계좌를 발급하기에 결제 완료 시점은 고객이 정한다. 결제를 미룰 수 있다는 장점이 있다.

* 카드결제 프로세스 : 인증 → 승인 → 매입(즉시 처리)
* 가상계좌 프로세스 : 가상계좌 발급 → 결제완료 (고객 입금 완료 시, 은행 → PG사 → 상점 순으로 확인)

가상계좌 결제를 취소하는 방법

고객이 가상계좌에 입금하지 않은 경우 : 주문 취소 시 환불해야 하는 금액이 없다. 또한 부분 취소를 할 수 없다.
고객이 가상계좌에 입금한 이후 결제를 취소한 경우 : 금액을 환불해야 한다. 취소시, 고객으로부터 직접 환불계좌 정보를 입력받아야 한다.

고정 가상계좌란?

같은 고객에게 같은 가상계좌를 발급할 때 사용하는 계좌로써,
한 고객의 전용 가상계좌를 지칭한다.

고정 가상계좌에는 (일반 가상계좌와 달리) 여러 주문 금액을 한번에 입금할 수 있다.

그러나, 부분합으로 입금하는 방식은 불가능하다. (총 4만원 → 2만원, 2만원)

간편결제

간편결제란?
카드나 계좌를 등록해두고 인증 없이 결제할 수 있는 서비스를 의미한다.
비밀번호나 지문만으로 쉽고 간편하게 결제할 수 있고, 포인트나 적립금도 사용할 수 있다.

일반결제와 간편결제 비교

	일반결제	간편결제
종류	신용·체크카드, 계좌이체, 가상계좌, 휴대폰 결제	포인트 결제, 계좌 충전결제, 신용·체크카드
본인인증	결제 시 마다 매번	최초 주문시 1회

간편결제를 사용하면 어떤점이 좋을까?

1. 고객의 결제 전환율을 높일 수 있다.
간편결제는 최초 등록시 번거로운 절차 없이 빠르게 결제완료 단계까지 도달할 수 있다.

고객이탈 위험을 줄이고, 결제까지 완료하는 고객 비율을 높일 수 있다.

2. 기존 고객의 재구매율을 높일 수 있다.

간편한 결제 방식이 고객에게 좋은경험으로 반복되어 고객 충성도와 재구매율을 이끌 수 있다.

3. 편리한 결제 경험으로 고객 만족도를 향상시킬 수 있다.

불편한 결제경험을 줄이고, 편리한 결제 시스템을 도입하여 긍정적인 브랜드 이미지를 만드는데 도움이 된다.

거래

거래란?
결제를 포함한 결제 승인, 결제 취소, 부분 취소를 지칭하는 의미이다.
(※결제 : 상품이나 서비스를 구매하기 위해 돈을 지불하는 행위를 의미한다.)

*거래 프로세스
결제승인 : 고객 결제요청 → 결제수단 내 금액 확인 → 요청 성공처리, 상점 내 대금 지급
결제취소 : 고객 결제 취소요청( 단순 변심, 실수 주문) → 결제수단 내 환불처리
부분취소 : 고객 결제요청 → 결제승인 → 일부상품 품절 → 품절된 상품 가격 만큼 환불 처리

거래 기록이 중요한 이유

결제시스템에 기록된 결제 기록과 상점의 실제 자금 흐름을 비교할 수 있기 때문이다.

고객이 결제한 기록과 취소, 부분 취소한 기록, 거래상태 등을 조회한 뒤 본인의 상점에 정산내역과 비교하여 일치하는지 확인할 수 있다.

거래 기록 조회를 위한 Data 목록

상점ID / 거래의 Key값 / 결제의 Key값/ 주문ID/ 결제수단/ 고객ID/ 에스크로 사용여부/ 거래 영수증 확인 주소/ 결제 처리 상태 / 거래처리 날짜와 시간정보/ 결제시 사용한 통화/ 결제금액

자세한 Data목록을 확인하고싶다면 여기를 눌러 이동할 수 있다.

해당 Data 목록은 개발자뿐만 아니라 설계시 기획자들이 입력받아야 하는 Data 설계, 화면설계에 유용하게 사용할 수 있을것 같아 작성해보았다.

결제창

결제창이란?
고객이 결제수단을 선택, 인증하고 결제를 완료하는 화면으로, 결제정보를 입력하는 화면으로 생각하면 된다.
(토스에서는 두 가지 결제 솔루션을 제공하고 있다고 한다.)

1. 주문서에서 결제수단 선택하기

주문서에서 결제수단 선택하기 <출처: 토스페이먼즈 개발자센터>

주문서 페이지 내에서 '결제수단'을 선택할 수 있고, 결제수단을 선택하면 선택한 카드사·간편결제사의 결체창('자체창')이 바로 나오는 형식이다.

자체창의 특징

주문서 페이지에서 카드, 할부 개월을 선택하고 이용약관 동의를 받는 UI가 따로 있어야 한다. 그렇기에 주문서 내 결제 영역을 만들고자 하면 별도 기획, 디자인, 개발이 필요하다.
사용하고자 하는 결제수단의 자체창을 각각연동해야 하는 번거로움이 있다.
하지만, PG사가 고객에게 노출되지 않아 결제 경험이 간결하고 브랜드의 일관성을 지킬 수 있다는 장점이 있다.

(PG사 : 다날, 나이스페이, KIS정보통신, 립페이, 키움페이 등 다양한 결제대행사 시스템이 있고, 카드 내역에 영문모를 PG사 이름으로 당황한 경험이 있을거다.)

2. 결제창에서 결제수단 선택하기

결제창에서 결제수단 선택하기 <출처: 토스페이먼츠 개발자센터>

주문서 페이지 밖의 PG 결제창에서 고객이 결제수단을 선택하는 방법도 있다.

주문서 페이지에서는 Radio button을 통해 신용·체크카드/ 무통장입금 방식만 구분하고, 이외의 결제 단계는 PG사 결체장에서 진행된다.

*PG 이용약관동의→ PG결제창 → 카드사 결제 프로세스(앱연동) → PG 결제창에서 결제완료 버튼클릭 → 결제완료처리

기타 결제창

- 계좌이체 결제창

- 가상계좌 발급창

- 휴대폰 결제창

- 자동결제 등록창

계좌이체

계좌이체란?
고객의 은행 계좌에서 실시간 출금이체를 통해 결제하는 방식으로, '실시간 계좌이체'라고 불리기도 한다.

계좌이체 한도

금융결제원이 계좌이체 서비스를 제공하면서 모든 은행의 이체한도가 1천만원으로 통일되어, 최대 한도는 1천만원이다.

하지만, 금융앱 내에서 본인이 이체한도를 직접 설정했다면 1천만원 보다 적을 수 있다.

계좌이체 방법

오프라인 : ATM 혹은 은행을 통해 이체가 가능하다.

온라인 : 은행앱 또는 토스와 같은 금융앱에서 이체가 가능하다.

계좌이체 결제취소 방법?

계좌이체 결제를 취소하면 출금이 되었던 계좌로 결제금액이 영업일 7일 내에 환불된다. 결제 이후 180일까지 환불이 가능하며, 180일이 지난 환불을 PG사에서 처리할 수 없다.

(* PG사는 사용자의 출금계좌 정보를 알 수 없기 때문에, 어떤 계좌에서 출금이 되었는지 혹은 취소 시 어떤 환불계좌로 환불되는지 알 수 없다.)

구매 전환율 (Conversion Rate)

구매 전환율이란?
쇼핑몰 방문자 중 실제 결제를 완료한 구매자의 비율을 뜻한다.

구매전환율, 왜 중요할까?

구매전환율이 낮다는 것은 '구매 과정에서 이탈하는 고객이 많다'는 뜻을 지닌다. 구매 전환율을 파악하여 쇼핑몰의 보완사항, 마케팅 전략 등을 세울 수 있다는 점에서 중요하다.

구매 전환율 공식

구매 전환율 = 구매 횟수/ 방문 수 *100

구매 전환율 평균

온라인 쇼핑몰 평균 전환율은 2.06%로 100명중 2명이 구매로 이어지는 것이 평균이다.

구매 전환율, 어떻게 높일까?

1. 정확한 데이터를 기반으로 구매자가 어떤 화면과 단계에서 이탈하는지 분석해야 한다.

2. 데이터 분석을 기반으로 구매 과정을 개선해야 한다.

(홈페이지 진입 시, 바로 이탈한다면 메인화면 혹은 온보딩 화면의 문제이다.)

문화비 소득공제

문화비 소득공제란?
도서구입, 공연·영화관람, 박물관·미술관 입장, 종이 신문 구독에 사용한 금액을 최대 100만원 안에서 소득공제해주는 제도이다. 총 급여 7000만원 이하의 근로소득자라면 연말정산 시 추가 소득공제를 받을 수 있다.

문화비 소득공제 받는 방법

구매자 입장 : 문화비 소득공제를 받기 위해 따라야 할 별도의 절차는 없다. 문정원에 등록된 사업자에서 결제를 하면 자동으로 문화비가 적용되어 연말정산 자료에 반영된다. (일부 지역화폐, 간편결제, PG사는 문화비 소득공제 적용이 어려울 수 있기때문에 각 운영사에 확인해야 한다.)
사업자 입장 : 문화비 소득공제 사업자로 등록해야 한다. 등록 후 카드 결제는 자동으로 문화비를 분류해주지만 가상계좌, 계좌이체와 같은 현금성 결제는 문화비로 설정을 해야 구매자가 문화비 소득공제 혜택을 받을 수 있다.

매입

매입이란?
PG사에서 승인된 결제 정보를 카드사에 알리므로써, 제공한 서비스와 상품에 대한 대금 정산을 위한 과정이다.

매입 과정 어떻게 진행될까?

매입 및 정산 프로세스

고객 상품 결제 → 상점에서 PG사로 자동 매입 → PG사에서 카드사로 VAN을 통해 매입 → 카드사 정산 → PG사 정산 → 상점 내 정산 완료

뱅크페이

뱅크페이란?
금융결제원에서 운영하는 실시간 계좌이체 PG 서비스이다. 온라인 쇼핑몰에서 '실시간 계좌이체' 결제수단을 선택하면 뱅크페이를 통해 결제하게된다.
(실시간 계좌이체를 통해 사용자가 스스로 이체하는 방식이 아닌, 금융결제원에서 자동이체를 진행해주는 방식이다.)

뱅크페이 진행 프로세스

뱅크페이의 실시간계좌이체는 수수료가 없지만, 고객이 뱅크페이에 가입해야하고, 공동인증서로 본인인증을 마쳐야 결제 할 수 있다.

법인카드

법인카드란?
기업, 기관, 협회, 기타 사업자 등록번호가 있는 법인이 카드사로부터 발급받을 수 있는 카드이다.
법인에서 업무적으로 발생하는 경비를 결제할 때 편리하게 사용할 수 있다.

법인카드의 종류

무기명 법인카드 : 법인 명의로 발급된 카드로, 카드에 법인명만 표시되어있고 임직원이 공용으로 사용할 수 있다. 카드의 결제 계좌는 법인 계좌 혹은 대표자 명의 계좌로 설정이 가능하다.
기명 법인카드 : 임직원 명의로 발근된 카드로, 임직원 개개인의 이름과 법인명이 표시되어있다. 카드의 결제 계좌는 인직원 개인 계좌, 법인 계좌, 대표자 명의 계좌 중 하나로 설정 가능하다.

법인카드를 왜 사용할까?

법인카드를 사용하면 사업 경비를 투명하게 관리할 수 있고, 임직원이 업무 및 복지 경비를 어디에서 어떻게 사용했는지 쉽게 파악할 수 있다. 또한 법인 부가가치세를 신고할 때 증빙 자료를 마련하기 더 간편하고 세제 혜택을 받을 수 있다.

법인카드 발급방법을 알아보자!

회사마다 다르지만 통상적으로 "사업자 등록증, 법인 인감 증명서, 법인 등기부등본, 실제 소유자 확인, 대표 신분증, 최근 2년간 매출 및 신용을 인정받을 수 있는 서류"가 필요하다.

부가가치세(VAT)

부가가치세란?
물건이나 서비스를 판매하면서 얻은 이윤에 대한 세금을 뜻한다.
부가세는 사업자가 아닌 물건 혹은 서비스를 구매한 '소비자'가 부담한다. 사업자는 소비자가 부담한 부가세를 보관하고 신고기간에 세금을 신고 및 납부하는 것이다.

부가가치세의 자세한 개념을 이해해보자!

부가가치는 판매자가 판매 금액에서 원가 금액을 뺀 나머지 금액이다. ex) 200만원 (제품 판매금액) - 50만원(제품 원가)=150만원

부가세는 부가가치에 과세하는 세금으로 부가가치세의 10%금액에 해당된다. ex) 150만원(부가가치세)*10%=15만원

부가가치세 계산법

(매출액-매입값) * 10%
매출세액 - 매입세액

비인증 결제

비인증 결제란?
고객의 본인인증 없이 결제를 요청하는 방식을 뜻한다.
비인증 결제는 결제수단의 소유자를 인증하지 않고 결제 정보만으로 결제를 요청한다.
결제를 쉽게 사용할 수 있지만, 도용의 위험이 있다.

카드 비인증결제 (수기결제, 키인Key-in결제)

카드 번호 결제 API를 사용하면 카드정보(카드번호, 유효기간 등)로 결제를 요청할 수 있다.

충전식 카드 사용에 이용되는 결제방식이다.

[PM/infra] PM이 클라우드 계약시 알아두면 좋은 것( SSL과 HTTPS, IPS, WAF 등 보안서비스,MSP 개념)

기획하는뇽뇽씨 — Fri, 26 Jan 2024 16:00:20 +0900

이전 포스팅은 클라우드 견적 요청 시 알아두면 좋은 것들과 더불어 견적요청을 위한 것들을 작성해 보았다.

웹호스팅부터 클라우드, 서버의 기본개념과 차이점에 대해 포스팅해 두었기에, 아직 안 읽은 분들은 먼저 읽고 오는 것을 추천한다.

견적요청 시 필요한 사항은 무엇이었지?

개발언어, DB, OS, 사용목적, Storage, 보안시스템

기본적인 사항인 개발언어, DB, OS, 사용목적, Storage 등을 모두 정했으면 추가적으로 서비스를 결정해야 하는데,

대표적으로 보안시스템과 MSP(Managed Service Provider)가 있다.

pm이 클라우드 계약시 알아두면 좋은 것

MSP(Managed Service Provider)가 뭐야?

클라우드 환경 설정, 운영, 관리 등을 위한 기술 지원 서비스로써, 엔지니어가 방화벽 운영, 지원, 보안(ACG 등 보안시스템)을 운영한다. 클라우드 보안에 문제가 있을 경우, 데이터 백업 등 운영에 필요한 업무를 진행한다.

( 계약조건에 MSP가 포함되어 있는 경우도 있고, 별도의 파트너사와 함께 계약을 진행하는 경우도 있음 *네이버클라우드)

보안시스템의 핵심 개념을 알아보자!

- ACG (Access Control Group)

ACG란

서버 간 네트워크의 접근을 제어하고 관리할 수 있는 IP/Port 기반 필터링 방화벽 서비스이다. 개별적으로 방화벽을 관리할 필요 없이 서버 그룹에 대한 규칙을 손쉽게 설정하고 관리할 수 있다.

ACG의 특징

네트워크 접근 제어 및 관리
방화벽 보안규칙 설정 및 재사용

- SSL VPN (Secure Sockets Layer, 보안 소켓 계층인증서)

SSL, 보안소켓 계층 인증서는

브라우저(사용자의 컴퓨터)와 서버(웹사이트) 사이에 전송되는 데이터를 암호화하여 인터넷 연결을 보호하기 위한 표준 기술로써, 개인 데이터 혹은 금융 데이터 등의 전송되는 정보를 보거나 훔치는 것을 방지할 수 있다.

* HTTPS(Hyper Text Transfer Protocol Secure) : 하이퍼 텍스트 전송 프로토콜 보안

웹사이트가 SSL 인증서로 보호되는 경우 HTTPS가 URL에 표시된다.
사용자는 브라우저 표시줄의 자물쇠 기호를 클릭해 발급 기관 및 웹사이트 소유자의 상호를 포함한 인증서의 세부정보를 볼 수 있다.

- IPS 관제

침입 방지 시스템(IPS)은

악성 트래픽을 실시간 감시하여 악의적인 공격 및 탐지가 네트워크에 유입되는 것을 사전에 차단할 수 있도록 도와주는 시스템이다.

IPS에서 제공되는 서비스

시그니처 기반 방어
Application 방어
프로토콜 기반 방어
도메인 차단
유해 사이트/ URL 기반 차단
패턴 기반의 차단 예외 처리 제공 등

- WAF(웹방화벽)

웹방화벽(WAF)란

Web기반(HTTP/HTTPS) 트래픽을 모니터링하여 공격 트래픽을 탐지 및 차단하는 보안 솔루션이다.

WAF에서 제공되는 서비스

OWASP TOP 10 공격 탐지 및 차단
국정원 8대 취약점 탐지 및 차단
XSS/CSRF/Injection 탐지 및 차단
Cookie 변조 및 도용방지
고객사 환경에 적합한 차단 정책 설정 및 관리 등

어떤 서비스를 골라야 할까?

클라우드를 계약하는 것은 차를 구매하는 것과 유사하다.

보안서비스의 경우, 보안 및 개인정보침해를 예방하기 위한 부가적인 서비스로써 클라이언트의 필요와 선택에 따라 선택하면 된다. 개인적으로는 SSL 보안서비스는 필요하다고 생각이 든다.

↓함께 읽으면 좋은 PM 관련 포스팅 ↓

[주니어 PM] 주니어 기획자가 PM직무를 맡게 되었다.

필자는 SI 업체에서 약 2년간 기획자로써 일을했다. 주로 맡은 업무는 기능고도화, 메인화면 디자인개편, 구축프로젝트 등 다양한 프로젝트를 경험해보고 나니 '웹 기획'의 기본기를 다질 수 있

youngplan.tistory.com

[서비스기획] PM이 클라우드 견적을 요청하려고 할 때 알아두어야 할 것 (호스팅, 서버와 클라우

youngplan.tistory.com

[PM/infra] PM이 클라우드 견적을 요청하려고 할 때 알아두어야 할 것 (호스팅, 서버와 클라우드의 차이점, 2tier와 3tier, 클라우드백업, OS)

기획하는뇽뇽씨 — Thu, 25 Jan 2024 11:05:55 +0900

호스팅이란?

인터넷상에서 서비스를 운영하는데 필요한 서버 공간을 전체 또는 일부를 임대해 주는 서비스이다.

- 호스팅의 종류

웹호스팅

클라우드

서버호스팅

- 웹호스팅? 서버? 클라우드? 세 개의 차이점이 뭐야?

	웹호스팅	서버(Server)	클라우드 서버(Cloud Server)
사용목적	초기 서버 구축과 인프라 관리에 부담이 있는 사용자의 소규모 웹사이트 운영	고정적으로 트래픽과 용량이 많이 필요한 대규모 서비스 운영	잦은 트래픽 증감으로 유연한 서버 활용이 필요한 서비스 운영
주 사용자	- 회사 홈페이지 운영 - 블로그 운영 - 커뮤니티 운영	- 대형 쇼핑몰 업체 - ERP 운영자 - 인트라넷 운영자	- 웹/앱 게임 운영 - 일시적 이벤트 업체 - 개발테스트
초기구축	X	O	X
과금	월정액	설치비 및 월정액	사용량에 따라 부과(후불)
서버 관리 인력	필요없음	필요	필요
서버 관리 권한	-일반 사용자용 권한 -마음대로 조절 불가	- 독보적 관리자 권한 - 마음대로 조절 가능	- 독보적 관리자 권한 - 마음대로 조절 가능

결론적으로

'서버'는 물리적 장비로써 고정적으로 단독 사용이 필요하고 트래픽이 많이 몰리는 서비스에 적합하다.

'클라우드'는 트래픽이 일정하게 발생하지 않는 단발성 이벤트성 서비스에 적합하다.

처음 견적서 요청 시 작성한 내용

견적서를 의뢰 하려고하니 어떤 내용으로 견적을 요청해야 할지 막막했다. 커뮤니티 사이트에 나와있는 대로 견적요청을 적어서 의뢰했다. 필자가 선정한 클라우드 업체는 '네이버, KT, 가비아' 총 3군데 업체를 선택했다. 해외 클라우드 업체로는 아마존이 가장 유명한데, 클라이언트가 국내 클라우드를 사용해야 했다. ( ~~KT 클라우드는 연락조차 안 왔다는...)~~

개발언어, DB언어, 사용목적, 요청사항,
스펙 (CPU, RAM, HDD, 네트워크용량, 필요서비스)

[개발언어] : PhP / DB : Mysql
[ 사용목적 ]
① 편지접수 (최대 1GB, 30만 장)
② 이미지 사진 접수(최대 10mb, 5만 장)
③ 이벤트성 페이지, 안정적인 운영 필요
[기존 사용 스펙]
① CPU : intel Quad-core
② RAM : 8GB + 8GB
③ HDD : Sata 1TB
④ 네트워크 용량 : 10 Mbps(월)

- 그렇게 되니, 의사소통의 문제가 생겼다

네트워크는 종량제 형태로 요금이 부과되시고요~
견적서 드릴 때 논리 구성을 2 Tire로 해야 할지, 3 Tire로 해야 할지 고민이 되네요..
해당 웹사이트 운영하실 때 Web, DB서버의 리소스 사용량 비율 혹시 아시나요?
적어주신 스펙으로 봤을 때는 서버가 분리되어 있는 건 아닌 것 같은데..

당황한 명수 <출처: 무한도전>

????????????????????

너무 당황스러웠지만 그때 내가 할 수 있는 말은 "일단 기존 서버(웹호스팅) 업체에 Web/DB서버 분리, 리소스 사용 비율 알아보고 말씀드리겠습니다." 뿐이었다.

알아보고, 찾아보고, 내 것으로 만들고, 지금에서야 글을 작성하고 있다.

- 클라우드의 기본적인 내용은 알고 있어야지!

1. 2-tier와 3-tier (아키텍처 구조)

2-tier

2-tier 웹 아키텍처 구조는 웹서버가 DB에 연결되어 있는 형태이다. 주로 트래픽이 많지 않은 경우 사용하는 구조이며, 클라이언트가 직접 서버의 DB에 접속하여 자원을 활용한다. 편리하지만 보안에 취약하고 유지보수가 어렵다.

3-tier

3-tier 웹 아키텍쳐 구조는 웹서버와 DB를 논리적으로 분리한 형태이다. 또한 Application Layer에서 웹서버와 WAS를 구분한 것이 핵심이다. Web Server가 Client의 요청과 접속관리를 주관하고, WAS가 웹 애플리케이션 실행을 주관한다.

Web Server : 사용자가 보는 GUI, 인터페이스, 웹 화면을 제공해 주는 서버이다.
Application Server : 사용자가 요청하는 상품주문, 결제, 검색 등의 다양한 기능을 처리하는 서버이다.
DataBase Server : 사용자 요청 시 데이터 기입이나 변경 작업을 지원하고 데이터를 보관하는 서버이다.

2. OS(Operation System: 운영체제)

운영체제(Operation System)란?

사용자와 하드웨어 사이의 인터페이스를 제공해 효율적으로 응용 프로그램이 동작하도록 지원하고,

시스템 자원을 효율적으로 관리하여 응용 프로그램이 원활하게 동작할 수 있도록 한다.

운영체제의 종류

윈도우(Windows)	microsoft에서 개발한 운영체제.노트북 및 서버 시스템에서 주로 사용된다.
macOS	apple에서 개발한 운영체제. mac 컴퓨터 및 노트북에서 사용된다.
리눅스(Linux)	오픈 소스 운영체제로, 서버 시스템 및 임베디드 시스템에서 주로 사용된다. 안정성과 보안성이 높다는 특징이 있다.
유닉스(UNIX)	다중 사용자 및 다중 작업을 지원하는 운영체제로, 서버환경에서 주로 사용된다. 안정성과 신뢰성이 높다는 특징이 있다.

클라우드 사용 시 Web Server/ Was Server/ DB Server에 해당하는 운영체제, CPU의 core 수, 용량(GB)을 설정해야 한다.

3. Network Traffic

네트워크 트래픽(Network Traffic)이란?

서버를 통해 최종 사용자에게 전달된 데이터의 양을 말한다.

[함께 알아두면 좋은 네트워크 용어]
인바운드(InBound) : 사용자가 이미지, 데이터 등을 전송하는 등 네트워크에 들어오는 정보를 의미한다.
아웃바운드(OutBound) : 사용자가 첨부파일 다운로드 등 데이터를 요청할 경우 네트워크에서 나가는 정보를 의미한다.

* 보통 클라우드에서 인바운드 트래픽 비용은 무료이고, 아웃바운드의 경우에 네트워크 구간 및 사용량에 따라 차등 과금이 이루어진다.

4. Storage (클라우드 백업, SSD, HDD, Object Storage)

스토리지(Storage)이란?

대용량 데이터 저장장치를 의미한다.

클라우드 백업 : 클라우드 기반 서버에 중요 데이터의 중복 복사본을 여러 개 저장하는 방식이다. 파일 혹은 디렉터리 단위로 백업이 진행되며, 백업의 단위는 Client(고객)이 정할 수 있다. (ex, 주 단위 백업, 일 단위 백업 등)

SSD : 플래시 메모리에 데이터를 저장하는 저장장치이다. 빠르고 효율성이 높은 저장장치이지만, 비용이 비싸다.
HDD : 하드디스크 드라이브에 데이터를 저장하는 저장장치이다. 데이터에 자주 접근하지 않고 저렴한 비용을 원할 때 적합하다.

Object Storage : 사용자가 인터넷상에 원하는 데이터를 저장하고 사용할 수 있도록 구축된 오브젝트 스토리지이다. 안전한 보관 혹은 대용량 데이터, 서버 데이터의 백업 및 복구용도, 소스코드 백업 용도로도 사용될 수 있다.

그렇다면, 어떻게 견적을 요청해야 될까?

필자는 아래와 같은 사항을 체크해서 클라우드 견적요청을 제안한다.

개발언어, DB, OS, 사용목적, Storage, 보안시스템(추후 협의)

사실상 위의 내용들을 모두 포함하고 알아두는 것도 중요하지만, 클라우드를 사용하려고 하는 운영자의 목적이 가장 중요하다. 트래픽이 많이 몰리는 웹사이트를 운영하고 있는지, 안정화를 위해 3-tier 구조를 사용할 것인지, 보안서비스는 어떤 것을 사용할 것인지, 백업서비스 사용여부까지 결정하면 클라우드 견적과 계약은 문제없이 진행될 수 있다.

↓ 함께 읽으면 좋은 포스팅↓

[주니어 PM] 주니어 기획자가 PM직무를 맡게 되었다.

youngplan.tistory.com

[서비스기획] 기획자가 '알림톡, 앱 푸시 기획'시 알아두어야 할 것 (기획 항목, 마케팅 활용 동의

알림톡을 기획하고자 한다면 알림톡의 정의와 알림톡 기획, 법률상식에 대해 정리해 보았다. 기획자가 알림톡 기획 시 체크해야 할 것들을 담았으니 작업 시 참고하여 진행하면 좋겠다. 알림톡

youngplan.tistory.com

[서비스기획] 기획자가 '알림톡, 앱 푸시 기획'시 알아두어야 할것 2 (카카오톡 알림톡과 친구톡

이전 포스팅에서는 기획자가 알림톡 앱 푸시 기획 시 알아두어야 할 것의 '기획 항목 및 마케팅 활용동의와 광고성 정보 동의에 대해 알아보았다. 이번포스팅에서는 카카오톡 알림톡과 친구톡

youngplan.tistory.com

[서비스기획] 와이어프레임(Wireframe)의 특징과 작성방법에 대해 알아보자

기획하는뇽뇽씨 — Tue, 23 Jan 2024 11:52:11 +0900

와이어프레임(Wireframe)

와이어프레임(wireframe)이란

웹·앱의 골격이나 사용자 인터페이스(UI) 및 핵심 기능을 보여주기 위해 선과 도형으로 만든 간단한 형태 또는 프레임이다.

와이어프레임 <출처 : 본인>

와이어프레임은 도구를 이용하여 작성하기도 하고, 필자처럼 손으로 작성하는 방법도 있다.

툴을 사용해서 그리는 것이 더 깔끔한 장점이 있지만, 나는 직접 그리는 것을 선호하는 편이다. 그 이유는 더욱 논리를 작성하는 과정에 집중할 수 있기 때문이다.

- 와이어프레임의 특징

실제 구현되는 앱이나 웹상에 포함되는 비디오 혹은 이미지, 컬러 등이 들어가지 않기에 실제 구현될 제품의 모습과 다르다.
요구사항을 빠르게 반영하여 그려봄으로써 팀원들의 피드백을 쉽고 빠르게 받을 수 있다.
아이디어를 와이어프레임으로 구체화시킴으로써 팀원 간의 해석 오류를 줄이기 위해 사용된다.

- 와이어프레임에서 보여줘야 하는 내용은 무엇일까?

서비스 시나리오, UX에 집중해야 한다.

와이어 프레임은 화면 UI를 디자인하는 단계가 아니기에 화면의 전체적인 레이아웃(구조)과 기능 별 화면 흐름 및 이동, 화면에서 표출되어야 하는 데이터, 컴포넌트, 전체적인 화면의 개수를 파악할 수 있도록 작업해야 한다.

[내부 이해관계자들이 중요시하는 정보]
- 화면의 전체적인 레이아웃 및 구조 / 컴포넌트 / 전체 화면의 개수 → 디자이너
- 기능 별 화면 흐름 및 이동, 화면에서 표출되어야 하는 데이터 → 개발자

와이어프레임은 기능별로 시나리오를 작성하고, 시나리오 흐름에 맞추어 그리면 되는데,

시나리오를 작성하면 흐름에 맞추어 논리적으로 UX 흐름에서 불필요한 단계가 있는지, 빠지거나 어색한 단계가 있는지 체크할 수 있다.

- 예를 들어 설명해 보자!

위의 필자가 작성한 와이어프레임을 예시로 '여행코스 등록' 기능을 설명하는 와이어프레임을 작성하고자 할 때,

서비스 시나리오는 아래와 같다.

지역명, 동행자 선택 → 여행코스 선택(1박 2일, 2박 3일) → 여행코스 상세 등록화면 (여행코스 제목, 상세내용 입력 → 해시태그 입력→ 마커선택 → 장소선택(추가) → 순서변경 → 장소삭제 → 등록)

이처럼, 시나리오를 정리하고 UX를 작성하다 보면 보완이 필요한 화면흐름, 사용자가 필요한 기능 등을 발견할 수 있다. 또한 내부 이해관계자들은 와이어프레임을 검토함으로써 화면을 구성하는 컴포넌트, 데이터, 기능을 사전에 정의할 수 있다.

- 와이어프레임, 어떻게 작성해야 잘 작성한 걸까?

⭐ 잘 작성된 와이어프레임을 그리기 위해서는

1. 설계하고자 하는 핵심 기능의 서비스 시나리오를 작성한다.

2. 서비스 시나리오를 기반으로 와이어프레임 초안을 작성한다.
(작성 시 발견한 이상한 점 혹은 추가적으로 들어가야 할 데이터 등은 빨간색으로 작성한다.)

3. 화면 별 누락된 데이터는 없는지, 필요로 하는 추가적인 기능은 없는지, 상세 화면에서 표출되는 데이터와 등록에 필요한 데이터 사이에 누락된 부분은 없는지, 기능 및 시나리오 흐름의 오류는 없는지 등을 체크하여 수정한다.

4. 팀원들에게 와이어프레임 수정안을 보여주고 의견을 교환한다. ( 불필요한 단계, 누락된 단계(*오류처리, 예외처리 등 다양하다.), 데이터 수정, 기능 수정 등 )

5. 의견이 반영된 와이어프레임 개선안을 작성한다.

6. 와이어프레임을 기반으로 메뉴구조, IA, 화면설계서를 작성한다.

↓ 함께보면 좋은 서비스기획 포스팅↓

[서비스기획] 메뉴구조도(Menutree)기획과 작성방법에 대해 알아보자

youngplan.tistory.com

[서비스기획/UX] User Flow에 대해 알아보자-1(작성방법과 Task Flow, Wire Flow)

youngplan.tistory.com

[서비스기획/UX] 기획자가 알아두면 좋은 Flow Chart에 대해 알아보자 (작성방법과 기호의 의미까지)

이전포스팅에서는 User Flow에 대해 알아보았다. 이번포스팅에서는 Flow Chart의 기본 개념과 작성방법, 기호의 의미까지 알아보자. Flow Chart (플로우 차트) 플로우 차트(Flow Chart)란 프로세스를 수행하

youngplan.tistory.com

[주니어 PM] 주니어 기획자가 PM직무를 맡게 되었다.

기획하는뇽뇽씨 — Fri, 19 Jan 2024 15:05:38 +0900

필자는 SI 업체에서 약 2년간 기획자로써 일을했다. 주로 맡은 업무는 기능고도화, 메인화면 디자인개편, 구축프로젝트 등 다양한 프로젝트를 경험해보고 나니 '웹 기획'의 기본기를 다질 수 있었다. 하지만 내가 과연 현재에 머물러 있을 때 다른 회사에서도 기획자로써 인정받을 수 있을까? 하는 두려움이 마음 한 구석에 자리잡곤 했다.

그런데, 갑자기 본부장님이 나를 부르셨고, PM(프로젝트 매니저) 일을 시키셨다.

OO씨 PM으로 이름 올려놨어~ 개발 요구사항에 맞춰서 관리만해~

[주니어 PM] 주니어 기획자가 PM직무를 맡게 되었다.

Ep.1 사실은 PM업무인 줄 모르고 시작했다.

처음에는 사실 PM업무인 줄도 모르고 시작했었고, 업무 내용은 요구사항에 맞추어 추가 기능 개발건에 대한 단순 관리라고 설명해 주셨다. 가장 주된 업무로는 기능개발 테스트였다. 그리고 개발자가 서버 접속을 할수 있도록 지원해주는 것 (IP허용, DB 계정정보, DB 접속권한 허용 등 ..)이었다.

말 그대로 개발자가 만들어놓은 기능을 테스트하는 업무라고 생각했는데,

개발환경에 대한 이해와 클라우드 환경, 버전에 따른 종속성 문제, 알림톡 추가개발요청, 서버 이관 및 계약 등등 문제가 계속해서 나타났다.

필자는 기획자로써 요구사항과 문제를 정의하고, 내부 작업자들과 소통하며, 필요한 문서를 만드는 업무를 주로 했는데 pm업무를 접해보면서 인프라 지식과 경험이 부족하다는 것을 깨달았다. 인프라와 개발지식의 부족함은 클라이언트, 외부업체, 본부장님과 의사소통 할 때 드러났다. 그런 스스로를 보며 정말 많이 부끄러웠고 끊임없이 공부하고 기록해야겠다고 다짐했다. (이 블로그의 원동력이었다.)

Ep.2 고객사의 끊임없는 추가개발 요청

SI 업체에서 개발을 진행한다고 하면, 보통 '요구사항이 명확하게 정해져있고, 맞춰서 기획,디자인,개발을 진행하는거 아닌가?'라고 생각한다. 처음에는 나도 그런줄 알았다. 하지만 요구사항이라는게 문서로 명확히 정해진다고 한들,

인하우스 혹은 SI에서 변경되는 사항 없이 순조롭게 진행되기란 어려운 일이다. (끊임없는 기획서 수정과 같이...)

첫번째 추가요청 건은 '알림톡 개발'의 건이었다.

기획자로써 알림톡 추가요청이 왔다고 하면, "알림톡 발송시점, 내용, 반려시 처리방안, 법적인 문제 등"을 중심으로 정책을 정하고, 개발자에게 작업을 요청할 것이다. 하지만, PM은 주로 외부 협력업체와의 계약 및 프로젝트 전반적인 관리를 도맡아 하기에 필자는 클라이언트에게 알림톡 업체를 소개해주고, 견적을 받아서 전달하고, 미팅을 진행하는 업무를 진행했다.

주니어 기획자로써, PM업무(극히 일부이지만..)를 시작해보고 나서 가장 크게 깨달았던 점은 프로젝트를 바라보는 시야가 다르다는 것이었다. 프로젝트 매니저(pm)는 개발지식, 외부업체 관리, 영업이익, 후속 사업, 내부이해관계자 등을 생각해야 하기에 깊고 넓은 시야를 가지고 있어야한다는 것을 배웠다.

Ep.3 서버요? 한번 계약하면 평생 쓸 수 있는줄 알았는데요?

클라이언트 쪽에서 기능개발을 추가함에 따라서 서버 용량문제에 대한 이슈를 제기했다. 필자는 용량증설 산정을 위해 서버 관리업체 정보, 서버 스펙, 용량, 구조 등과 차년도 계약은 진행이 되었는지 체크했다.

서버 계약이요? 그거 한번 계약하면 계속 쭉 쓸 수 있는 것 아니었나요?

클라이언트는 서버라는 물건은 비용을 지불하고 구매하면 계속해서 사용할 수 있다고 생각했다. 그렇기에 비용 예산집행에도 당연히 측정되어 있지 않았기에 예기치 않은 상황이 발생했던 것이었다.

단순한 기능개발 테스트 업무에서, 서버·클라우드에 대한 이해와 계약업무를 진행하게 됐다. 웹호스팅을 하는 방식보다 클라우드 환경에서 안정적으로 웹서비스를 진행할 수 있도록 3개의 국내 클라우드 업체를 선정하여 견적을 받아야 했다.

견적을 받아야 하는데 어떤 구성으로 요청해야할지 막막했다.

[주니어 PM] 주니어 기획자가 PM직무를 맡게 되었다.

다음 포스팅에서 이어서 작성해보겠다.

[Figma] 피그마에서 이미지 모자이크, 블러처리 하기 (Effect Background blur)

기획하는뇽뇽씨 — Tue, 16 Jan 2024 13:37:20 +0900

블러(Blur) 처리란?

블러(Blur) :
이미지를 흐리게 하는 것

피그마에서 블러처리 언제 사용할까?

포토샵 파일에서 이미지 블러처리를 완료하고 피그마에 불러오는 경우가 많은데, 피그마에서도 간편하게 블러저리를 할 수 있다.
포트폴리오 작성 할 때, 중요한 정보들을 가려야 할 경우 사용한다.
블로그 포스팅에서 설계서를 내에 포함된 정보들을 가려야 할 경우 사용한다.

피그마에서 이미지 블러처리 어떻게 해?

(1) 이미지 파일의 블러처리할 도형을 선택하여 그린다.

필자는 허스키 블러처리를 위해 원형을 이용해서 그렸다.

(2) 이미지 파일 위에 도형을 위치시키고, 디자인 패널의 Effects를 선택한다.

허스키 이미지 파일 위에 도형을 위치시키고, 디자인 패널 Effects 효과를 선택한다.

(3) Fill → 색상, 투명도 설정/ Background blur → 블러 정도 설정

이미지와 목적에 맞추어 Fill 영역에서 색상과 투명도를 설정한다. (필자는 회색, 77%로 지정)

Effects에서는 Background blur 정도를 숫자를 지정하여 설정한다.

↓ 함께 보면 좋은 피그마 포스팅↓

[Figma] 피그마 컴포넌트 기초에 대해 알아보자-1(figma component사용방법, 사용팁)

youngplan.tistory.com

[Figma] 피그마 컴포넌트 응용기능인 스왑 인스턴스에 대해 알아보자-2(figma swap instance사용방법, 사

youngplan.tistory.com

[Figma] 피그마 프로퍼티를 이해해보자-3 (figma property 사용이유, 불리언, 인스턴스 스왑, 텍스트)

youngplan.tistory.com

[서비스기획] 기획자가 '알림톡, 앱 푸시 기획'시 알아두어야 할것 2 (카카오톡 알림톡과 친구톡의 차이)

기획하는뇽뇽씨 — Mon, 15 Jan 2024 14:12:46 +0900

이전 포스팅에서는 기획자가 알림톡 앱 푸시 기획 시 알아두어야 할 것의 '기획 항목 및 마케팅 활용동의와 광고성 정보 동의에 대해 알아보았다.

이번포스팅에서는 카카오톡 알림톡과 친구톡의 차이점에 관해 포스팅해보겠다.

비즈메세지란?

기업고객이 자사의 카카오톡 채널을 통해 카카오톡 이용자에게 비즈메시지를 발송할 수 있는 상품이다.

대표적인 것으로 알림톡과 친구톡이 있다.

알림톡? 친구톡? 무슨차이점이 있을까?

	알림톡	친구톡
발송 방식	기업 고객사 API 연동 후 자동 발송
발송 내용	정보성 메시지 (고객의 행동에 따라 즉각적으로 발송하는 정보성 내용으로 "주문/예약 확인, 결제내역, 배송 현황 메시지" 등이 해당된다.)	광고성 메시지 (전송자가 경제적 이득을 목적으로 전송하는 전송자에 관한 정보, 전송자가 제공할 재화나 서비스에 관한 정보가 해당된다.)
발송 대상	전화 번호 기반	전화번호+채널 이용자
발송 형식	한/영 구분없지 1,000자 +링크버튼	1. 텍스트형 :한/영 구분없이 1,000자 +링크버튼 2. 이미지형 :400자 + 이미지 1장 +링크버튼 3. 와이드형 :최대76자 +이미지 1장+ 링크버튼
특이 사항	알림톡 발송 실패시, 문자 메시지로 전환 가능	야간 발송 제한(20:50~익일 08:00)

1. 알림톡 예시 화면

알림톡 예시 화면<출처 : 본인>

알림톡 특징

1. 카카오톡 채널을 추가하지 않더라도 알림톡(정보성 메시지) 발송이 가능하다.

2. 정보성 알림톡 발송시간의 제한은 없다 (사용자 행동에 따른 즉각적 반응)

3. 알림톡 템플릿이 정해져 있어, 상황에 맞추어 사용할 수 있다. (법적 제한때문에 템플릿이 존재)

[서비스기획] 기획자가 '알림톡, 앱 푸시 기획'시 알아두어야 할 것 (기획 항목, 마케팅 활용 동의

youngplan.tistory.com

위의 포스팅에서 마케팅활용동의와 광고성 정보 수신 동의의 차이에 대해 자세히 포스팅해 두었으니 참고하면 좋겠다. 또한, 기획시 어떤 항목들이 사전에 정리되어 있어야 하는지 까지 함께 다뤘다.

2. 친구톡 예시 화면

친구톡 예시 화면 <출처 : 본인>

친구톡 특징

1. 카카오톡 채널을 추가해야지만 광고성 정보를 발송할 수 있다.

2. 정보성 알림톡 발송시간의 제한은 (20:50 ~ 익일 08:00)

3. 알림톡 템플릿의 제한 없이 자유롭게 발송 가능하다.

↓ 함께보면 좋은 서비스기획 포스팅 ↓

[서비스기획] 기획자가 '알림톡, 앱 푸시 기획'시 알아두어야 할 것 (기획 항목, 마케팅 활용 동의

youngplan.tistory.com

[SNS 회원가입/로그인] 기획자가 소셜 회원가입/로그인 기획시 알아두어야 할 것 1 (UI 가이드와 타

소셜로그인 서비스란? 소셜(SNS) 로그인 서비스는 네이버, 카카오, 구글 등의 서비스에서 사용자 인증 기능을 이용할 수 있도록 하는 서비스로써 별도의 아이디나 비밀번호를 기억할 필요 없이,

youngplan.tistory.com

[SNS 회원가입/로그인] 기획자가 소셜 회원가입/로그인 기획시 알아두어야 할 것 2 (feat.개발자에

기획자가 소셜 회원가입/ 로그인 기획 시 알아두어야 할 것 2편으로 포스팅으로 돌아왔습니다. 개발자에게 일 잘하는 기획자로써 인정받고 싶다면 1. 사용자 프로필 정보에 필요한 DATA 항목을 정

youngplan.tistory.com

[서비스기획] 기획자가 '알림톡, 앱 푸시 기획'시 알아두어야 할 것 (기획 항목, 마케팅 활용 동의와 광고성 정보 동의)

기획하는뇽뇽씨 — Fri, 12 Jan 2024 15:54:56 +0900

알림톡을 기획하고자 한다면

알림톡의 정의와 알림톡 기획, 법률상식에 대해 정리해 보았다. 기획자가 알림톡 기획 시 체크해야 할 것들을 담았으니 작업 시 참고하여 진행하면 좋겠다.

알림톡이란

기업 고객이 카카오톡으로 사용자에게 정보성 메시지를 발송할 수 있는 서비스로써,
기업고객은 공식딜러사(알림톡 제공업체)를 통해 API를 제공받아 연동하여 개발할 수 있다.

1. 알림톡 업체와 계약이 완료되어 있어야 한다

우선적으로 진행되어야 하는 것은 " 알림톡 업체와 계약이 완료되어 있어야 한다는 점"이다.

아래는 카카오톡 알림톡/친구톡 공식 딜러사 업체 정보이다. 업체 소개 관련해서는 아래 공식 딜러사를 고민해 보는 것을 추천한다.

- 알림톡 개발 요청 시 개발자에게 제공되어야 하는 정보

(계약)_ 알림톡 API 정보와 연동규격서, 알림톡 업체의 계정정보(ID, PW), 접속권한
(기획)_ 알림톡 발송 시점, 알림톡 템플릿, 알림톡 반려처리 경우 처리방안

아래 내용에서 자세히 다뤄보도록 하겠다.

1) 업체선정 및 견적요청

카카오톡 알림톡 딜러사 <출처 : 카카오 고객센터>

위와 같은 공식딜러사 업체를 선정하여 견적을 요청하면 지불방식, 문자메시지 방식에 따른 전송 단가와 Spec에 대한 정보를 알 수 있다. 계약방식은 '선불방식, 후불방식' 중에 선택할 수 있는데 선불방식은 충전식, 후불방식은 이용한 금액만큼 납부로 생각하면 쉬울 것이다.

2) 계약 완료 이후 프로세스

(직접 진행해야 하는 것)
발주처의 계정 회원가입

계약이 완료되면, 공식딜러사(알림톡) 업체 서비스의 계정을 생성해야 한다. 이때 인하우스 업체의 경우는 자사에서 회원가입 처리를 해도 되지만 SI 개발업체의 경우 발주처 계정정보로 회원가입이 이루어져야 한다.

(업체 측에 전달할 정보)
접속권한을 허용할 IP정보, 알림톡 발신번호

회원가입까지 완료되었다면,

알림톡 업체 측에서 개발자 PC의 IP정보를 요청할 것이다. 접속 권한을 부여하는 과정이므로 알림톡을 개발하게 될 개발자 PC의 IP정보를 전달하면 된다.

또한 문자 및 알림톡을 발송하는 전화번호를 전달해야 하는데, 인하우스 업체의 경우 회사의 대표번호를, SI 업체의 경우 고객사에게 요청받은 번호로 전달해야 한다.

2. 알림톡 기획 시 필요한 항목들을 정의하자.

기획자가 알아두어야 할 알림톡 기획시 필요한 항목들 <출처:본인>

개발자에게 가장 중요한 것은 무엇일까? "언제(어느 시점에), 어떻게(어떤 내용으로), 누가(발송번호로), 누구에게( 발송대상) " 일 것이다. 위의 내용이 중요한 이유는 개발이 적용되어야 할 화면과 개발 범위를 측정하는 데에 중요한 요소이기 때문이다.

그렇기에 기획자는 알림톡 발송시점, 발송내용, 문자 발송대상, 알림톡이 적용되어야 할 화면 및 메뉴, 알림톡 반려 시 처리방안을 정해야 한다.

- 알림톡으로 보낼 수 있는 메시지는 어떤 것들일까?

① 수신동의를 받지 않아도 되는 경우 : 정보성 메시지

고객의 행동에 따라 즉각적으로 발송하는 정보성 내용인, "주문/예약 확인, 결제 내역, 배송 현황 메시지" 등이 해당된다.

② 수신동의를 받아야 하는 경우 : 광고성 메시지

전송자가 경제적 이득을 취할 목적으로 전송하는 1) 전송자에 관한 정보, 2) 전송자가 제공할 재화나 서비스에 관한 정보가 해당된다.

+) 광고성 메시지에 대한 판단기준을 아래와 같이 명시했다.
① 특가/할인 상품안내
② 상품 및 서비스 홍보를 위한 프로모션 또는 이벤트
③ 정보를 '주'로 나타내더라도 위의 내용이 혼재된 경우

3. ✔ 광고성 정보 수신 동의를 받고 있는지 확인하자

알림톡 계약이 완료되고, 개발자에게 알림톡 개발 내용을 전달했다. 끝난 줄 알았는데 신경 써야 할 가장 중요한 부분이 남아있다. 무엇일까?

광고성 정보 수신 동의 항목이 있는지 체크하는 것이다.

회원가입 화면(약관동의) <출처:본인>

위의 화면은 필자가 기획한 회원가입 '약관동의' 화면이다. 위의 서비스의 경우, 광고성 홍보 알림톡을 발생할 수 있을까? 정답은 NO이다. 개인정보 수집 및 이용동의는 수집하고 있지만, 광고 수신 동의가 따로 없기 때문에 영리 목적의 광고성 정보를 전송할 수 없다. 자세한 내용은 아래에서 다루겠다.

- 홍보·마케팅에 대한 활용동의와 마케팅 수신 동의에 대한 차이

홍보 · 마케팅에 대한 활용동의와 마케팅 수신 동의는 별개라는 점을 꼭! 명심해야 한다.

개인정보 수집 목적이 홍보 · 마케팅인 경우 : 이에 대한 마케팅 홍보 및 활용 동의를 획득
홍보 · 마케팅 목적으로 알림을 보내고 싶은 경우 (앱푸시, 알림톡, 문자) : 개인정보 수집 동의와, 광고 수신 동의 두 가지 모두 획득해야 한다.

- 광고성 정보 전송 시 알아두어야 할 것

① 영리 목적의 광고성 정보를 수신하기 위해서 수신자의 명시적인 사전동의를 받아야 한다

[정보통신망법 제50조 1항]
누구든지 전자적 전송매체를 이용해 영리 목적의 광고성 정보를 전송하려면 그 수신자의 명시적인 사전 동의를 받아야 한다.

'누구든지'는 영리 사업을 영위하는 사업자를 비롯한 광고성 정보를 전송하는 개인, 단체, 법인, 공공기관을 의미한다.
'전자적 전송매체'란 정보통신망을 통해 수신자에게 전자문서등의 전자적 형태로 전송하는 매체를 의미한다.
'영리 목적의 광고성 정보'란 경제적 이득을 취득할 목적으로 전송하는 재화나 서비스에 관한 정보를 의미하는데, 앱 푸시 또한 포함되니 기획 시 참고해 두는 편이 좋겠다.
'명시적인 사전 동의'란 수신자가 광고성 정보 수신 동의 시 추후 광고를 수신할 수 있다는 점과 광고성 정보의 내용을 명확하게 인지할 수 있도록 이용자에게 분명하게 알린 후 동의를 받아야 한다는 것을 의미한다.

② 수신거부 및 사전 동의 철회 시 전송하지 않아야 한다

[정보통신망법 제50조 2항]
수신자로부터 명시적인 사전 동의를 얻었더라도 수신자가 수신거부의사를 표시하거나 사전동의를 철회한 경우에는 전송자는 더 이상 영리 목적의 광고성 정보를 전송하면 안 된다.

③ 광고성 정보수신 동의에 대한 처리결과를 통지해야 한다.

최초 회원가입 시 수신동의 설정에 대한 통지와 앱 설정 메뉴에서 수신동의 설정을 변경하였을 경우 모두 처리결과를 통지해야 한다. 처리결과를 통지할 때는 ① 전송자의 명칭, ② 수신동의, 수신거부(미동의) 사실과 해당 의사를 표시한 날짜, ③처리결과를 표시해야 한다.

④ 기타 주의사항

오후 9시부터 그다음 날 오전 8시 사이에 전자적 전송매체를 이용해 영리 목적의 광고성 정보를 전송하기 위해 별도의 사전 동의가 필요하다. 야간시간의 광고성 정보 전송에 대한 동의가 따로 필요하다는 점을 알아두면 좋을 것 같다.

↓ 함께보면 좋은 서비스 기획 포스팅↓

[SNS 회원가입/로그인] 기획자가 소셜 회원가입/로그인 기획시 알아두어야 할 것 1 (UI 가이드와 타

youngplan.tistory.com

[SNS 회원가입/로그인] 기획자가 소셜 회원가입/로그인 기획시 알아두어야 할 것 2 (feat.개발자에

youngplan.tistory.com

[서비스기획/UX] User Flow에 대해 알아보자-1(작성방법과 Task Flow, Wire Flow)

youngplan.tistory.com

[서비스기획/UX] 기획자가 알아두면 좋은 Flow Chart에 대해 알아보자 (작성방법과 기호의 의미까지)

youngplan.tistory.com

[서비스기획] 메뉴구조도(Menutree)기획과 작성방법에 대해 알아보자

youngplan.tistory.com

참고 레퍼런스

https://zdnet.co.kr/view/?no=20220622085429

https://blog.naver.com/pi-protect-guide/223033040534

[서비스기획/UX] 기획자가 알아두면 좋은 Flow Chart에 대해 알아보자 (작성방법과 기호의 의미까지)

기획하는뇽뇽씨 — Wed, 10 Jan 2024 14:08:50 +0900

이전포스팅에서는 User Flow에 대해 알아보았다. 이번포스팅에서는 Flow Chart의 기본 개념과 작성방법, 기호의 의미까지 알아보자.

Flow Chart (플로우 차트)

플로우 차트(Flow Chart)란 프로세스를 수행하기 위해 필요한 일련의 단계와 결정을 다이어그램으로 표현한 자료이다. 쉬운 말로 "순서도"라고 할 수 있다.

예를 들어 사고대차 서비스에서 '현재 이용가능한 대차차량 검색'을 하고자 할 때, 사용자는 '회원가입 → 로그인 → 대차차량검색' 순서대로 진행할 것이다. 이처럼 플로우 차트란 서비스의 흐름을 전체적으로 시각화 한 자료이다.

Flow Chart <출처: 본인>

✔ 플로우차트, 왜 필요할까?

디자이너, 개발자와 함께 전체 시스템의 프로세스를 점검하고, 작업 시 참고할 수 있다.
미리 정의해 놓은 플로우차트를 점검하여 시스템 일관성과 오류를 체크할 수 있다.
사용자의 행동을 예측하거나 UX를 점검할 수 있다. 예를 들어 하나의 Task를 수행할 때 복잡한 절차를 거쳐야 한다면 사용자 이탈률이 증가할 것이다. 이처럼 사용자의 사용성을 미리 예측하고 가정하며 테스트해 볼 수 있다.

Flow Chart는 기획자나 개발자가 시스템 고도화, 개선을 목적으로 시스템의 전체 사용자 여정을 파악하기 위해 정리해 놓은 문서이다. 이를 통해 사용자의 행동을 예측하고, UX를 구성하며 수정하여 시스템을 정의할 수 있다.

개발자의 Flow chart와 기획자의 Flow chart

기획자의 플로우차트는 '사용자 입장의 서비스 흐름, 진행순서 등'(포괄적인 Task 단위)을 표현한다.
개발자의 플로우차트는 '개발 시스템 로직 흐름'(조금 더 구체적)을 표현한다.

Flow Chart 작성법

1 - Flowchart 기호

flow chart 기호 <출처: 본인>

- 끝이 둥근 사각형 : 순서도의 시작과 끝을 표시한다.

- 화살표 : 처리의 흐름과 진행순서를 나타낸다.

- 평행사변형 : 데이터의 입력과 출력이 있을 경우 표출한다.

- 직사각형 : 각종 연산 및 데이터 이동 등의 처리 작업을 실행한다.

- 마름모 : 분기점으로써, 조건을 명시한다.

이외의 다양한 기호들에 대해 알아보고자 한다면, 아래 URL을 참고하면 좋을 듯하다.

Flowchart Symbols

Let's go over each flowchart symbol individually.

www.smartdraw.com

2 - Flowchart 작성법과 Tip

Flowchart 작성방법
1. 일관된 디자인요소(다이어그램)를 사용하여 플로우차트를 작성한다.
2. 진행순서는 왼쪽에서 오른쪽으로, 위에서 아래로 화살표를 이용하여 표현한다.

여행경로탐색 및 저장 플로우 예시 <출처 :본인>

위의 플로우차트는 필자가 draw.io를 이용하여 이전포스팅에서 예시로 들었던 여행경로 탐색 및 저장 플로우에 대한 프로세스를 도식화하여 정리해 놓은 이미지이다.

직사각형의 네모도형은 '프로세스'로써 모든 처리 과정을 표시하고, 기호 내에 처리 내용을 기입하였다.

또한 화면(페이지)을 구분하는 용도로 사용했다.

Flowchart Tool

플로우 차트를 더욱 쉽게 작성하고 그릴 수 있는 프로토타이핑 툴을 하나 소개한다.

별도의 애플리케이션 다운로드 없이 웹에서 손쉽게 그릴 수 있으며 로컬 PC와 클라우드에 저장할 수 있고, 공유가 가능하다. PPT보다 훨씬 쉽고 깔끔하게 그릴 수 있다는 것이 장점이다.

1. 웹사이트에 직접 방문하여 만드는 방법

draw.io

Security-first diagramming for teams. Bring your storage to our online tool, or save locally with the desktop app. No login or registration required.

www.drawio.com

drawio 사용법 <출처 : drawio >

웹사이트에 방문하여 Start 버튼을 클릭
파일명, 파일 확장자, 템플릿 혹은 기본화면을 선택하여 flowchart 작성

* 조직도, 시간도, 시퀀스다이어그램 등 대학생 수업자료에 적합한 템플릿들이 많이 있어 과제에 사용하기도 적합하다.

2. 크롬 (구글 드라이브)에 draw.io를 추가하여 플로우차트를 그리는 방법

구글 드라이브에 draw.io추가하는방법

1. 구글드라이브에 들어가서 +신규 버튼을 클릭한다.

2. 더 보기 메뉴를 클릭하고, 연결할 앱 더 보기를 클릭하여 "draw.io"를 검색하고, 설치한다.

3. 설치가 완료되었다면 diagrams.net을 실행한다. (웹페이지에서 생성하는 화면과 동일하게 표출됨)

구글 드라이브에 저장된 draw.io 다이어그램

↓함께 보면 좋은 서비스 기획 포스팅↓

[서비스기획/UX] User Flow에 대해 알아보자-1(작성방법과 Task Flow, Wire Flow)

youngplan.tistory.com

[서비스기획] 메뉴구조도(Menutree)기획과 작성방법에 대해 알아보자

youngplan.tistory.com

[SNS 회원가입/로그인] 기획자가 소셜 회원가입/로그인 기획시 알아두어야 할 것 1 (UI 가이드와 타

youngplan.tistory.com

[SNS 회원가입/로그인] 기획자가 소셜 회원가입/로그인 기획시 알아두어야 할 것 2 (feat.개발자에

youngplan.tistory.com

[서비스기획/UX] User Flow에 대해 알아보자-1(작성방법과 Task Flow, Wire Flow)

기획하는뇽뇽씨 — Tue, 9 Jan 2024 17:39:54 +0900

User Flow, Task Flow, UX Flow 등 다양한 용어들이 시스템과 현업에서 사용되면서

모호하고 헷갈렸던 기본 개념에 대해 정리해보고자 한다. 차이점과 더불어 Flow char, User Flow를 작성하는 방법까지 이번 포스팅에서 다뤄보겠다.

User Flow (사용자 흐름)

유저 플로우(User Flow)란 사용자가 의미 있는 목표를 달성하기 위해 거쳐야 하는 단계로써, 사용자의 활동을 설명하고 시작점에서 최종 상호 작용에 이르기까지 사용자가 수행하는 모든 단계를 의미한다.

Task Flow는 User Flow에 속해있는데, Task Flow는 포괄적인 단계를 작성하고 User Flow는 조건(분기)을 포함한 상세한 단계를 작성하여 사용자 흐름을 파악하고자 한다.

User Flow 작성 4 단계

user flow 작성 4단계

1 - User Goal 작성

유저 골(User Goal) 란 사용자가 이루고자 하는 목표이다. 유저가 서비스 내에서 이루고자 하는 목표를 한 문장으로 작성한다. 예를 들어, 사용자의 목표를 "자전거 여행 코스를 검색"이라고 정의한다면

User Goal : 자전거 여행 코스 검색 이 된다.

1. user goal 작성 <출처: 본인>

2 -Task Flow 작성

태스크 플로우(Task Flow) 란 사용자가 목표를 달성하기 위해 실행해야 하는 각 단계이다.

User Flow에 속해있기에, 전체적이고 대략적인 단계를 알아볼 수 있도록 작성한다. 세부 내용 및 분기는 User Flow에서 주로 다룬다.

2. Task Flow 작성 <출처: 본인>

3 - Wire Flow 작성

와이어 플로우(Wire Flow)는 와이어프레임와 플로우차트가 섞인 개념으로, Task Flow에서 수행하는 단계를 와이어프레임으로 그리고, 플로우를 추가하는 형태로 작성한다. 단계별 사용자의 행동을 표시하여 시각화한다.

이를 통해 사용자의 Task Flow를 점검하고, UI의 위치와 기능구현에 관해 디자이너, 개발자와 함께 논의할 수 있다.

3. wire flow 작성 <출처 : 본인>

4 - User Flow 작성

유저 플로우(User Flow)란 Task Flow와 유사한데, 서로 다른 유저가 서로 다른 태스크를 수행하거나 다른 경로로 이동할 수 있다는 점이 차이점을 지닌다. 목표를 이루기까지의 인터렉션을 정리하고, 조건(분기)에 따라 달라지는 플로우가 있다면 분기를 넣어 각각의 플로우로 연결한다.

4. User Flow 작성 <출처 : 본인>

다음 포스팅에서는 .. Flow Chart (플로우 차트)

지금까지 User Flow를 작성하는 방법과 순서에 대해 알아보았다. User Flow는 서비스의 전체적 흐름을 파악하는데 중요한 부분이며, 기능단위로 작업해야 하는 개발자들에게는 꼭 필요한 필수 문서라 할 수 있다.

해당 포스팅을 작성하면서 기획자로써 공부는 끝이 없다고 생각이 들었다.

공부들을 꾸준히 진행하고 기록하면 개인적인 성장과 더불어 회사에서 인정받는 기획자로써 성장하는 발판이 될 수 있지 않을까?

필자는 사이드 프로젝트를 진행 중인데 사이드 프로젝트에 유저 플로우를 포스팅에서 다룬 방법을 적용하여 작성해 볼 예정이다. user flow를 작성하면서 기획 / ux 오류를 꽤 많이 접하고, 수정할 수 있기에 실무에 꼭 적용해 보면 좋겠다.

↓ 함께 보면 좋은 서비스 기획 포스팅↓

[서비스기획] 메뉴구조도(Menutree)기획과 작성방법에 대해 알아보자

youngplan.tistory.com

[SNS 회원가입/로그인] 기획자가 소셜 회원가입/로그인 기획시 알아두어야 할 것 1 (UI 가이드와 타

youngplan.tistory.com

[SNS 회원가입/로그인] 기획자가 소셜 회원가입/로그인 기획시 알아두어야 할 것 2 (feat.개발자에

youngplan.tistory.com

참고문헌

[Figma] 피그마 프로퍼티를 이해해보자-3 (figma property 사용이유, 불리언, 인스턴스 스왑, 텍스트)

기획하는뇽뇽씨 — Sat, 6 Jan 2024 09:00:30 +0900

첫 번째 포스팅은 컴포넌트, 두 번째 포스팅 스왑인스턴스에 이어 이번 포스팅은 피그마 프로퍼티에 대해 알아보겠다.

프로퍼티(figma property)란?

피그마 프로퍼티란?

프로퍼티는 "속성, 성격"이라는 의미를 가진다. 이미 완성된 컴포넌트에 속성을 더해주는 기능이다.

컴포넌트에 옵션을 주고 컴포넌트의 경우의 수를 줄여줄 수 있다.

컴포넌트 프로퍼티의 4가지 종류와 사용방법

컴포넌트 프로퍼티별로 각각 다른 특성을 가지고 있으며, 각각의 사용법도 다르다.

1. '텍스트, 불리언, 인스턴스 스왑' 프로퍼티는 옵션처럼 추가해서 적용하는 방법이며

2. '베리언트' 프로퍼티는 커스텀해서 사용하는 방법이다.

아래에서 자세하게 확인할 수 있다.

- Text properties(텍스트)

✔ 텍스트 프로퍼티
컴포넌트텍스트 레이어에 속성을 더해주어서 여러 인스턴스의 텍스트를 한 번에 수정할 수 있는 방법이다.

적용가능한 요소
버튼 텍스트, Input의 Place holder, 헬프 텍스트 등 텍스트 레이어가 반복되는 요소에 적용된다.

필자가 정리한 텍스트 프로퍼티 사용방법은 아래와 같다.

피그마에서 텍스트 프로퍼티를 적용하기 위한 버튼, 레이아웃에 적용해 보자.

디자인 및 프로토타입 툴이기에 적용해 보는 것만큼 좋은 학습방법은 없다.

- Boolean properties (불리언)

✔ 불리언 프로퍼티 (Boolean : 참 or 거짓을 구분하는 명제)
컴포넌트에서 반복되는 요소를 토글 버튼으로 on/off 할 수 있는 기능이다.

적용가능한 요소
주로 버튼이나 모듈의 아이콘 또는 이미지에 적용된다.
모듈에서 중복+응용되는 요소가 있다면 응용 되는 부분에 옵션을 적용하여 끄고 켜며 사용할 수 있다.

아래는 필자가 정리한 불리언 프로퍼티 사용방법이다.

불리언 프로퍼티 사용방법

- Instance swap properties (인스턴스 스왑)

✔ 인스턴스 스왑 프로퍼티
스왑 인스턴스 기능을 더 편리하게 사용할 수 있도록 옵션을 주는 기능이다.
(즐겨찾기, 모듈에서 바로 선택하기 등의 기능이 있다. )

적용가능한 요소
스왑 인스턴스를 적용해야하는 모든 곳에서 적용할 수 있다.
주로 이미지, 아이콘 등을 즐겨찾기 하고 바로 바꿀 수 있도록 인스턴스 스왑 옵션을 설정한다.

아래는 필자가 정리한 인스턴스 스왑 프로퍼티 사용방법이다.

- Variant properties (베리언트)

✔ 베리언트 프로퍼티
컴포넌트들을 카테고리별로 묶어 그룹핑하고, 필요할 때 꺼내어 쓰는 기능이다.

⭐ 다음 포스팅에서 이어질 예정이다.

프로퍼티 사용 시 참고할 부분

1. 프로퍼티 옵션 적용은 "마스터 컴포넌트"에서 한다.
2. 프로퍼티 옵션을 화면에 적용할 때에는 "인스턴스"를 활용한다.

↓ 함께보면 좋은 피그마 콘텐츠↓

[Figma] 피그마 컴포넌트 기초에 대해 알아보자-1(figma component사용방법, 사용팁)

youngplan.tistory.com

[Figma] 피그마 컴포넌트 응용기능인 스왑 인스턴스에 대해 알아보자-2(figma swap instance사용방법, 사

youngplan.tistory.com

[서비스기획] 메뉴구조도(Menutree)기획과 작성방법에 대해 알아보자

기획하는뇽뇽씨 — Fri, 5 Jan 2024 09:00:24 +0900

메뉴구조도(Menutree)란?

메뉴구조도란 앱/웹 사이트의 메뉴와 구조를 한눈에 파악하여 볼 수 있도록 정리해놓은 문서이다. 웹사이트의 사이트맵을 생각하면 쉽게 이해할 수 있다.

메뉴구조도는 언제 작성할까?

메뉴구조도 작성은 주로 신규 서비스 구축, 서비스 고도화 시 초기단계에서 진행하는 작업으로써, 메뉴를 목적에 맞게 분류하고 추가, 수정, 삭제하여 메뉴의 구조를 한눈에 파악하는데에 목적이 있다.

Depth가 뭔지 알려줘!

Depth란 "깊이"라는 뜻을 가진 용어로, 화면의깊이를 뜻한다. 메인화면은 0depth가 될 것이고, 서비스 화면의 깊이에 따라 1 Depth, 2 Depth, 3Depth 순으로 정의한다.

출처: 본인 - Depth 정의

1Depth는 그룹핑한 메뉴의 대표메뉴이다.

그렇기에 1Depth 메뉴의 이름은 하위 메뉴들을 공통적으로 표현할 수 있는 이름으로 정해야 한다. 메뉴 순서는 중요성에 따라, 오른쪽 부터 왼쪽 순서대로 메뉴와 서비스를 구조화하는 것이 메뉴구조도 작성의 핵심이다.

( 웹의 경우, 맨 첫번째 1 Depth 메뉴를 구조화 할때 웹사이트의 정체성을 보여주는 메뉴로 구성하는 것이 좋다. )

2Depth 는 실제 화면을 구성하는 메뉴이다.

콘텐츠/ 게시판(목록 형, 썸네일 형)/ 기능 페이지(로그인, 회원가입, 마이페이지 등) 으로 구분할 수 있다. 사용자들이 제공받을 수 있는 서비스 혹은 기능을 중심으로 구성된 메뉴이다.

3Depth 는 목적에 따라 게시판 내 카테고리, 콘텐츠, 기능으로 구성될 수 있다.

구성 목적에 따라서 개발 및 화면의 구성을 고려하여 작성하는 것이 좋다. 게시판 의 경우 카테고리를 정의해야 하고, 콘텐츠 일 경우 콘텐츠 목록을 검토해야한다. 기능 의 경우, 사용자의 편의성을 위해 구성되는 경우가 대부분이므로 '어떤 목적을 가지고 탐색할지'에 대해 고민해 볼 필요가 있다.

구성 목적1 : 기능

정부24 메뉴구조도 - 3Depth 메뉴의 구성 : 기능

정부24는 사용자의 민원서비스를 처리해주는 사이트로써, 서비스 이용동의, 알림 수신동의, 회원탈퇴 등 기능을 중심으로 3Depth 메뉴가 구성되어있다. 원하는 기능을 한눈에 확인할 수 있는 장점이 있으며, 민원 처리 사이트의 목적성에 부합하다고 볼 수 있다.

구성목적2 : 콘텐츠

청년몽땅정보통 3Depth 메뉴의 구성: 콘텐츠

청년몽땅정보통은 미래 청년 일자리, 서울형뉴딜일자리 등의 정책을 3Depth 메뉴로 구성하여 정책위주의 메뉴로 구성이 되어있다. 정책을 한눈에 볼 수 있는 구조이므로 정책의 무게감을 보여주고자 하는 목적이 있다. 단점으로는, 다양한 정책 사이에서 원하는 정책을 찾기 어려울 수 있다.

구성목적3 : 게시판 내 카테고리 메뉴

충남청년포털 3Depth 메뉴의 구성 : 게시판 내 카테고리

충남청년포털은 청년정책을 게시판 형태로 보여주도록 구성되어있다. 일자리·금융 내의 2Depth메뉴인 '진로탐색, 취업지원, 창업지원, 금융지원'은 각각 게시판으로 구성되어 있고, 크게 청년정책 카테고리로 구분된다. 또한 청년 생활정보 하위의 3Depth 메뉴로 '취업 · 교육, 금융 · 정보, 마음 · 건강, 영농 · 자립'은 청년생활 고민소 게시판 내의 카테고리로 구성되어있다. ( 해당 사이트는 필자가 고도화 프로젝트에서 기획한 사이트로 오픈을 앞두고 있다. )

어떻게 작성할까?

1. 핵심기능에 따라 구성될 메뉴를 작성한다.
2. "목적"에 따라 메뉴를 그룹핑 한다. (1,2,3 Depth)
3. 그룹핑 된 메뉴의 1Depth 메뉴의 이름을 수정 혹은 재구성한다.

목적에 따라 달라지는 메뉴구조도 기획

메뉴구조도에도 기획이 필요하다. 웹/앱 서비스에서 사용자에게 제공하고자 하는 서비스의 '목적'이 다르기 때문일 것이다.

필자는 '충남청년포털' 고도화 프로젝트를 진행하면서 2가지 안의 메뉴구조도를 작성했다.

출처 : 본인 - 메뉴구조도(1)

1안은 3Depth 를 콘텐츠(정책)으로 구성한 메뉴구조도이다.

위에서 말했 듯, 정책을 3Depth로 구성하게 되면 정책의 무게감을 보여주는 동시에 모든 정책을 메뉴에서 확인할 수 있다. 하지만 정책의 개수에 따라서 메뉴를 구성하는 화면(GNB)이 변경될 수 있고, 가시성이 떨어질 수 있다는 단점이 있다.

출처 : 본인 - 메뉴구조도(2)

2안은 3Depth를 게시판 내 카테고리로 구성한 메뉴구조도 이다.

게시판 형태로 정책을 확인하고 모아볼 수 있어 깔끔해보이지만, 정책을 가볍게 보여줄 수 있다는 점이 장점이자 단점이다. 또한 메뉴의 개수에 따라 비어있는 인상을 줄 수 있어, 메뉴의 무게중심을 잘 맞추어 구성해야한다. 충남청년포털의 경우 고객사의 의견에 따라 2안으로 확정되었다.

↓ 함께보면 좋은 서비스 기획 포스팅 ↓

[본인인증] 휴대폰 본인인증 번호로 알림톡을 발송하는 서비스 가능할까? (feat. PASS, Nice평가정보)

결론부터 말하자면, 가능하다. 사용자가 휴대폰 본인인증(PASS앱)을 통해 인증받은 번호를 리턴값으로 보내주면 인증받은 번호로 알림톡을 보낼 수 있다. 휴대폰 본인인증 번호로 알림톡을 발송

youngplan.tistory.com

[SNS 회원가입/로그인] 기획자가 소셜 회원가입/로그인 기획시 알아두어야 할 것 1 (UI 가이드와 타

youngplan.tistory.com

[SNS 회원가입/로그인] 기획자가 소셜 회원가입/로그인 기획시 알아두어야 할 것 2 (feat.개발자에

youngplan.tistory.com

[Figma] 피그마 컴포넌트 응용기능인 스왑 인스턴스에 대해 알아보자-2(figma swap instance사용방법, 사용이유)

기획하는뇽뇽씨 — Thu, 4 Jan 2024 14:27:29 +0900

이전 편에서는 피그마 컴포넌트 기초와 사용방법에 대해 알아보았다. 이번 포스팅에서는 피그마 인스턴스 스왑에 대해 알아보고, 사용하는 방법까지 익혀볼 수 있도록 하자.

스왑 인스턴스(swap instance)란?

Swap(바꾸다) +Instance(복사본)

인스턴스(복사본)를 다른 인스턴스로 바꿔주는 기능이다.

왜 사용해야 할까?

인스턴스는 마스터 컴포넌트에 없는 요소를 추가할 수 없기 때문에 이 방법을 활용해서 아이콘, 이미지 등을 바꾸어 줄 수 있다.

(단, 바꾸어줄 아이콘 이미지 등 모두 컴포넌트로 만들어 놓아야 한다.)

어디에 적용될 수 있는데?

Web/Mobile을 디자인 혹은 기획 시 공통부분을 제작할 때 유용하게 사용된다. 예로 들면 header, List에서 아이콘을 변경하려 할 때 스왑 인스턴스(swap instance)를 사용한다.

스왑 인스턴스 (swap instance) 사용방법

스왑 인스턴스 사용방법

스왑 인스턴스를 이용해 갓생기획 로고의 색상을 변경해 보았다.

스왑 인스턴스 적용 방법

1. ⭐변경하고자 하는 아이콘, 이미지 등을 컴포넌트로 만든다. (Ctrl+Alt+K)
2. 변경되는 영역에 인스턴스를 삽입한다. (컴포넌트는 삽입할 수 없기 때문에, 인스턴스로 만들어 삽입한다.)
3. 인스턴스를 더블클릭하여 디자인 패널에서 아이콘, 이미지를 변경할 수 있다.

컴포넌트 쓸 때 기억하면 좋은 원칙

1. 옵션 적용은 마스터 컴포넌트에서 할 수 있다. 마스터 원본은 별도로 관리가 필요하다.
2. 화면에 적용할 때는 인스턴스를 이용한다.

↓ 함께보면 좋은 피그마 포스팅 ↓

[Figma] 피그마 컴포넌트 기초에 대해 알아보자-1(figma component사용방법, 사용팁)

youngplan.tistory.com

[Figma] 피그마 베리어블 Local variables 에 대해 알아보자 (color, Number, String, Boolean, Modes 설정방법까

youngplan.tistory.com

[Figma] 피그마 오토 레이아웃에 대해 알아보자 (단축키와 활용방법까지)

youngplan.tistory.com

[Figma] 피그마 컴포넌트 기초에 대해 알아보자-1(figma component사용방법, 사용팁)

기획하는뇽뇽씨 — Fri, 29 Dec 2023 15:19:22 +0900

1. 컴포넌트(figma component)

Component는 가장 작은 단위, 부품, 요소로써 화면에서 반복적으로 사용되는 가장 작은 단위이다.

화면을 구성하거나 디자인 할 때, 요소를 합쳐 모듈 > 템플릿 > 페이지로 구성한다.

Component
언제든 재사용이 가능한 요소로써
원본으로 복사본까지 한번에 수정할 수 있다.

아이콘 : 더이상 쪼갤 수 없는 가장 작은 단위
모듈 : 아이콘 + Text 등 최소 단위의 조합
템플릿 : 모듈 + 모듈 + 모듈 등 여러 모듈로 조합한 요소
페이지 : 템플릿 + 템플릿= 화면으로, 모듈 조합으로 구성된 아웃풋

마스터 컴포넌트와 인스턴스

컴포넌트 생성시, 객체와 레이어가 보라색으로 변경된다.

출처 - figma coherent Design System (community)

2. 마스터 컴포넌트와 인스턴스 만들기

마스터 컴포넌트(Master Component) 만들기
1. 객체 우클릭 > Create component
2. 객체 선택, 상단 중앙 컴포넌트 아이콘 클릭
3. 단축키 : Ctrl + alt + K

마스터 컴포넌트 만들기

마스터 컴포넌트를 여러개 만드는 방법?

객체 다중 선택(드래그) > Create Multiple component 클릭

마스터 컴포넌트를 여러개 만드는법

인스턴스 (Instance) 만들기
1. 객체 선택 > alt 드래그 앤 드롭다운
2. 객체 선택 > 상단 중앙 컴포넌트 Add variant 클릭
3. 객체 선택 > Ctrl+C,V

인스턴스 만들기

3. 컴포넌트 다루기

- 만들기

객체 우클릭 > Create component

- 연결 해제하기 (Detach)

마스터 컴포넌트 디테치 ( Master component Detach)
1. 자체적으로 마스터 컴포넌트를 디테치할 수 있는 기능이 없다.
2. Detach component 플러그인 사용!

인스턴스 디테치 ( Instance Detach)
1. 객체 우클릭 > Detach instance 클릭
2. 단축키 : Ctrl + alt + B

⚠ 한 번 연결을 해제하면 다시 연결할 수 없고, 재복사나 대치만 가능하다.

- 수정하기

Master component 원본 수정하기
원본이므로 모든 요소 추가, 삭제, 수정이 가능하다.

Instance 복사본 수정하기
원본에 없는 요소를 추가하거나 삭제할 수 없다.

[수정 가능한 영역]
1. 투명도, 색상, 선의 적용 여부, 오토레이아웃 속성, 텍스트 속성, 효과 등
2. 한번 속성을 수정하면, 원본의 속성을 따라가지 않는 특징이 있다.
→ Reset all changes로 원복 가능

[SNS 회원가입/로그인] 기획자가 소셜 회원가입/로그인 기획시 알아두어야 할 것 2 (feat.개발자에게 일 잘하는 기획자로 인정받고 싶다면, CI와 DI)

기획하는뇽뇽씨 — Thu, 21 Dec 2023 16:48:05 +0900

기획자가 소셜 회원가입/ 로그인 기획 시 알아두어야 할 것 2편으로 포스팅으로 돌아왔습니다.

개발자에게 일 잘하는 기획자로써 인정받고 싶다면

1. 사용자 프로필 정보에 필요한 DATA 항목을 정리하자

왜 개발자는 화면과 기획서를 보고 이야기 하자고 할까?

기획자라면 공감할 이야기를 하나 해보고자 한다.

SNS 소셜회원가입/로그인 기능을 추가하기 위해 개발자에게 가능여부를 여쭤보려고 할 때 개발자들은 '화면 혹은 기획서를 보고 이야기하자'라고 한다. 왜 그럴까? 아마 개발자들에게는 기능이 어떤 방식으로 구현되어야 하는지(로직), 어떤 데이터가 어디에 표출되고 이동되어야 하는지가 가장 중요해서 그럴 것이다.

그래서 개발자는 우리가 작성하는 화면설계에서 가장 중요하게 보는 것이 1. 데이터항목 2. 기능일 것이다.

1. 무엇을 2. 어떻게 구현해야 할지에 초점이 잡혀있어 기획과는 사고방식이 다르기 때문이다. 그렇기 때문에 기획자는 넓은 시야에서 서비스 사용자와 내부 이해관계자 모두 이해시키고 만족시킬 수 있어야 한다.

✔ check

회원가입 시 필요한 Data 항목을 정의하자. 필수로 입력되어야 하는 Data는 무엇이고, 소셜계정에서 받을 수 있는 Data는 무엇인지 정의하자. 서비스의 목적에 따라 필요로 하는 Data를 정의하는 것이 좋다.

(회원가입 절차는 복잡할수록 이탈률이 높아지므로, 입력받을 수 있는 Data 항목을 최대한으로 줄이는 편이 좋다.)

[카카오 개인정보 동의항목]

출처 - kakap developers ' 필수 제공항목'

출처 -kako developers '동의항목' 중
서비스는 서비스 제공을 위해 필요한 자원 접근권한을 개발자 웹 사이트 앱에 동의항목으로 설정해야 합니다. 닉네임, 프로필 사진, 이메일과 같은 종류별 사용자 정보나 카카오톡 메시지 전송 등 접근권한에 대해 개별 동의항목이 제공됩니다. 앱에 설정된 동의항목은 해당 서비스의 카카오 로그인 동의 화면에 반영됩니다.

개인정보 동의 항목(Data)
닉네임	프로필사진	카카오계정(이메일)	이름	성별
연령대	생일	출생연도	전화번호	CI
카카오톡 친구목록	카카오톡 채널 추가상태	배송지정보	보안이벤트정보

[네이버 개인정보 동의 항목]

개인정보 동의 항목(Data)
회원이름	이메일	별명	프로필 사진	성별
생일	연령대	출생연도	휴대전화번호

네이버도 카카오와 동일하게 필수 제공 항목과 추가 제공 항목을 설정할 수 있다.

2. 개발하고자 하는 업체의 SNS 개발자 계정정보를 받아놓자

소셜 회원가입/ 로그인을 개발하기 위해서는 개발자 페이지의 계정이 필요한데, 서비스를 하는 회사의 경우는 계정이 존재할 것이다. 하지만 SI의 경우는 고객사 계정정보를 통해 개발이 진행되어야 하기 때문에 Client에 가입을 요청하고 개발자 계정 정보를 받아야 한다.

3. CI와 DI 개념을 이해해 보자 (feat. 사용자 식별)

- CI(Connecting information) 이란?

서비스 연계 정보로써 온라인상의 개인 식별, 온라인 주민등록번호이다. (88 byte의 대소문자 + 특수 + 숫자)

개인마다 고유하게 발급되는 키 값으로 서로 다른 서비스에서도 CI 값을 공유해서 유저를 식별할 수 있다.

- DI(Duplication information) 이란?

중복 확인 정보로 인증 설루션마다 같은 개인이라도 다른 키 값이 발급될 수 있다.(64 byte 대소문자 + 특수 + 숫자)

한 명의 서비스 내에서 3개의 계정 ID를 만들더라도 식별번호(DI 값)는 동일하다.

하지만 서비스 별로 또한 DI 값이 다르기 때문에 공유해서 사용하는 것은 불가능하다.

- CI와 DI 공통점과 차이점이 뭔데?

공통점 : CI와 DI 모두 개인을 식별하기 위해 사용되는 정보

차이점 : CI는 온라인 주민등록번호, 모든 서비스 내에서 개인별 동일한 값을 가짐
DI는 서비스 식별번호로써, 다양한 서비스에서 개인별 다른 값을 가짐.

- CI와 DI 문제점이 뭘까?

1. 개인의 개인정보인 주민번호를 보호하고자 CI값을 만들었는데, 여러 서비스 내에서 공유가 가능해짐으로써 개인정보 보호의 목적성을 잃을 수 있다.

2. CI와 DI값이 유출되더라도 개인이 변경할 수 있는 값이 아니다.

3. DI는 법적 보호를 받을 수 없다.

4. CI와 DI를 수집할 수 있는 조건을 알아보자

- CI 수집은?

CI는 개인의 고유한 온라인 주민등록번호로써 법적인 보호를 받기에 수집 절차가 까다롭다.

회원가입 약관의 개인정보 수집항목 중 CI 항목이 있어야 하며, 본인인증 설루션에 CI값을 수집한 경우에 가능하다.

- CI 수집하려면 어떻게 해야 하는데?

현재 사용 중인 본인인증 설루션 업체에게 CI 수집을 위해서 어떻게 해야 할까요?라고 묻는다면, 연계정보(C.I) 제공 신청서를 작성해 달라고 한다. 그 이후 본인인증 절차에서 CI 정보를 수집할 수 있다.

CI 제공 신청서

[SNS 회원가입/로그인] 기획자가 소셜 회원가입/로그인 기획시 알아두어야 할 것 2 (feat.개발자에

기획자가 소셜 회원가입/ 로그인 기획시 알아두어야 할 것 2편으로 포스팅으로 돌아왔습니다. 개발자에게 일 잘하는 기획자로써 인정받고 싶다면 1. 사용자 프로필 정보에 필요한 DATA 항목을 정

youngplan.tistory.com

[Figma] 피그마 베리어블 Local variables 에 대해 알아보자 (color, Number, String, Boolean, Modes 설정방법까지)

기획하는뇽뇽씨 — Wed, 20 Dec 2023 15:48:49 +0900

figma local variable

Variable이란?

Variable은 스타일과 같이 색상, 숫자 및 문자열과 같은 다양한 설계 속성에 할당할 수 있는 재사용 가능한 변하는 값이다.

개발을 공부해 본 사람이라면 이미 익숙한 개념일 텐데, 임의의 데이터 값에 '속성이름'을 달아 저장하는 개념이다.

기획단계, 디자인 단계에서 버튼A를 반복적으로 사용하고 Text 값만 변하게 된다고 가정했을 때

매번 새롭게 제작한다면 버튼의 크기, 색상 등이 달라질 가능성이 크고 설계 시에 일관적인 화면을 제공할 수 없다.

그렇기에 변수(Variable)를 설정해서 반복적으로 재사용하는 것이 시스템의 일관성 측면에서 좋다.

피그마에서 저장할 수 있는 변수와 패널

' 숫자, 문자열, 논리형, 색상'으로 총 4가지 데이터 형식을 변수로 저장할 수 있다.

피그마 변수 패널과 저장할수 있는 4가지 형식의 변수

변수 패널은 디자인(우측) 패널에서 Local variable 패널을 열어 변수를 설정할 수 있다.

스타일(Style)과 베리어블(Local variable) 차이점은?

[Style과 Local variable 공통점]

- 디자인 설계 시 재사용이 가능하다.

[Style과 비교하였을 때 Local variable의 차이점]

- 스타일과 달리, 베리어블 (Local variable)을 사용하면 테마 사이에 빠르게 전환이 가능하다.

- 테마 별 다른 디자인을 만들어야 할 때 주로 사용된다.

- Localize and previe, 언어가 다른 경우에 빠른 전환이 가능하다.

- API를 통해 토큰 JSON 형식을 사용하여 변수 내보내기 및 가져오기가 가능하다.

Style과 Local variable 차이

컬렉션(collection)

collection은 연관된 variable의 집합이다. Primitive 색상이나 semantic 색상 혹은 디자인 시스템의 간격(padding) 값과 같은 것들을 그룹핑해서 모아 놓는 것이다. 컬렉션으로 컬러나 숫자, 문자, 불린 과 같은 다양한 유형의 베리어블들을 따로 만들 수 있다.

컬렉션을 생성해 보자

컬렉션생성1

컬렉션을 생성하기 위해서는 디자인 패널 내 Local variable을 열어, Collection 옆 아이콘의 Create collection을 눌러 새로운 컬렉션을 생성한다. 기본 이름은 Collection2로 지정되어 있으며 원하는 이름으로 변경한다.

새로운 컬렉션은 언제 만들까?

1. (Primary & Semantic Color) 컬러를 위한 컬렉션
2. (Dimension& Themes) 다크/ 라이트 모드 혹은 테마를 구분할 수 있는 경우
3. (Brand color & System Color) 브랜드 색상 세트와 시스템 색상을 구분하려는 경우

Variable Type

1) Color variable

color variable은 오브젝트의 단색 채우기 또는 테두리에 적용할 수 있다. Create variable을 선택하고, color Tyep을 선택하여 이름과 컬러 색상을 지정해 준다.

[오브젝트에 color 베리어블 지정하는 방법]

오브젝트를 누르면 우측 디자인 패널의 Fill 영역의 style 아이콘을 누르면 variable을 클릭할 수 있는 패널이 나온다.

color variable 지정 아이콘

오브젝트에 color 베리어블 설정하는 방법

2) Number variable

number variale을 사용하여 너비 및 높이, 간격, 패딩 및 반지름과 같은 치수를 정의할 수 있다.

필자는 버튼의 패딩과 레디우스에 필요한 변수를 만들어 버튼에 지정했다.

[오브젝트에 곡률변수 입력방법]

Number variable 생성과 오브젝트에 속성 지정방법

오브젝트를 선택하여 radius 값을 설정하는 아이콘을 누르면 변수를 선택할 수 있는 패널이 나오는데, 변수를 선택하여 모서리 값을 지정해 준다.

[오브젝트의 가로/세로 padding 변수 입력방법]

오브젝트의 가로/세로 padding 변수 입력방법

1. 버튼 오브젝트의 겉 테마와 '갓생기획' text를 Frame으로 생성한다.

2. 생성한 Frame을 선택하고 Auto layout을 선택한다.

3. 가로/세로 속성값을 변수를 선택하여 지정한다.

3) String variable

String variable은 텍스트 레이어에 적용되며, 반복적인 콘텐츠와 로컬에 도움이 될 수 있다.

[Text variable 활용방법]

프로토타입 인터랙션의 'On click' 이벤트를 선택하고, Set variable 액션을 통해 오브젝트를 클릭했을 때 문자열 변수가 변경되도록 문자열 변수를 설정하여 활용할 수 있다.

4) Boolean variable

boolean variable은 레이어 가시성을 전환하는 데 사용되며 프로토타입에서 매우 잘 활용된다.

예를 들어, 제품이 거의 다 팔렸을 때 가시성 모드로 변경하거나 제품이 sold out일 경우 버튼을 비활성화시키는 등 구매할 수 없도록 가시성 전환에 주로 사용된다.

boolean variable 변수 설정

Modes

Mode를 사용하면 다른 콘텍스트에서 사용할 때 디자인을 변경할 수 있다.

모드는 아래와 같이 활용될 수 있다.

color variable은 light와 dark와 같은 테마의 색상을 전환하는 데 사용되며

string variable은 언어 로컬과 같은 콘텍스트에 사용할 수 있고

number variable은 서로 다른 디바이스 크기에 걸친 공간 변화를 설명할 수 있고

Boolean variable은 제품이 거의 다 팔렸을 때 경고를 표시하는 것과 같이 레이어 가시성을 토글 할 수 있다.

mode 생성방법

첫 번째 칼럼의 속성이름을 Light로 변경하고, 두 번째 속성을 추가하여 이름을 Dark로 설정, 모드에 맞는 변수 컬러(색상변경), 텍스트(언어 변경), 숫자(공간 크기 변경), 불론( 경고 표시)를 설정할 수 있다.

모드 전환하기

1. 모드 적용을 원하는 UI 컴포넌트를 생성하고(Ctrl +Alt + K)

2. 컴포넌트의 인스턴스를 생성한다 Alt + 드래그

3. 우측 디자인 패널의 Layer 설정 아이콘 선택

4. 원하는 모드로 선택하여 변경

출처 - 루씨의 UXUI 디자인 (Youtube)

▼ 함께 보면 좋은 피그마 포스팅 ▼

[Figma] 피그마 기본 컴포넌트와 플러그인 댓글에 대해 알아보자 (유용한 플러그인 추천 best7 )

해당 포스팅은 피그마 사용에 있어 기본 컴포넌트와 플러그인, 댓글기능에 대해 설명해놓았습니다. 기본 컴포넌트는 화면 제작시 유용하게 사용되므로 응용방법까지 익혀두시면 좋을 것 같습

youngplan.tistory.com

[Figma] 피그마 오토 레이아웃에 대해 알아보자 (단축키와 활용방법까지)

youngplan.tistory.com

[Figma] 피그마 기본개념, 화면구조, 기능정리 ch.1 (Move, Scale, Local variable,Local style, Export)

해당 포스팅은 피그마 기본 화면구조와 기능에 대해 정리한 글입니다. 기본 화면구조와 화면구조에 해당하는 Move, Scale, Local variable, Local style, Export 컴포넌트들이 어떤 기능을 하는지에 대해 정

youngplan.tistory.com

[SNS 회원가입/로그인] 기획자가 소셜 회원가입/로그인 기획시 알아두어야 할 것 1 (UI 가이드와 타 서비스 소셜계정 연동)

기획하는뇽뇽씨 — Tue, 19 Dec 2023 17:11:02 +0900

소셜로그인 서비스란?

소셜(SNS) 로그인 서비스는 네이버, 카카오, 구글 등의 서비스에서 사용자 인증 기능을 이용할 수 있도록 하는 서비스로써

별도의 아이디나 비밀번호를 기억할 필요 없이, 소셜(SNS) 아이디로 간편하게 로그인할 수 있는 서비스이다.

소셜 회원가입/ 로그인의 이점

[사용자입장]

- 간편하고 빠른 회원가입이 가능하다.

- 여러가지 개인정보 입력과 본인인증에 대한 번거로움을 제거할 수 있다.

- 하나의 소셜계정 로그인을 통해 안전하게 다른 서비스를 이용할 수 있다.

[소셜 회원가입/ 로그인 제공사 입장]

- 소셜 로그인 기능을 도입한 서비스와 다양한 협업/ B2B 사업을 진행할 수 있다. (결제 연동, 캘린더, 카페 등)

- 사용자가 서비스 이용 시 제공하는 데이터를 통해 사용자 니즈와 감성을 분석할 수 있다.

기획자가 소셜 로그인 기획 시 알아두어야 할 것

(1) 가입 과정에서 정보는 최소한으로 수집

SNS 로그인/회원가입을 기획중인 기획자들에게는 2가지 회원정책으로 나뉠 수 있다.

첫 번째로는 소셜회원가입으로만 회원가입을 할 수 있는 경우

간편하고 사용성이 높아 이탈율이 적은 설계방식이지만, 서비스 자체에서 수집할 수 있는 데이터 항목이 적고, CI와 DI 값을 수집할 수 없다.

두 번째로는 소셜회원가입과 일반 회원가입 정책이 있는 경우

다소 첫번째 방식에 비해 복잡하게 느껴지지만, 서비스 자체에서 수집할 수 있는 데이터 항목이 많아지고 CI와 DI 값을 수집할 수 있다는 장점이 있다. (개인정보 수집정보 내용에 CI값을 수집한다고 포함되어야한다.)

두 번째의 경우와 같이 일반 회원가입 정책이 있는 경우, 사용자가 이탈하지 않도록 하기 위해 최소한의 정보를 수집해야 한다. SNS에서 수집하는 정보인 '이름, 이메일 주소, 성별' 등 사용자 정보에 대해 중복 입력하지 않도록 해야하고 비밀번호 설정을 하지 않도록 해야 한다. 서비스에 따라 선택 항목을 입력받는 경우에도 a, b, c 등 다양한 데이터 항목을 수집하고 입력받고자 한다면, 꼭 필요한 Data항목인지 검토하고, 최소한으로 수집 하는 것이 중요하다.

(2) 회원가입과 로그인에 모두 적용할 수 있도록 할 것

간혹 SNS 회원가입은 일반 회원가입 이후 가능하다고 하는 서비스를 본적이 있을 것이다. 이는 사용자가 이탈할 수 있도록 길을 열어주는 것과 마찬가지로써, 회원가입과 로그인에 소셜 로그인을 모두 적용하고 두 화면이 연결시켜야 한다.

회원가입은 계정존재 여부 체크 후 바로 회원가입을 진행하도록 프로세스를 기획해야 한다.

소셜 회원가입과 소셜로그인 연결

(3) SNS 로그인 UI 가이드

소셜계정 로그인 UI 디자인 시, 버튼의 크기나 위치가 눈에 띄도록 디자인해야한다. 토글버튼과 같이 특정 버튼을 눌렀을 때 SNS 로그인 UI가 표출된다던지, 크기가 너무 작아 사용자들의 눈에 띄지 않는다면 간편 로그인 기능을 만드는 의미가 없지 않을까?

가장 좋은 방법으로는 일반회원 로그인과 SNS 소셜로그인 영역을 분리해서 기획하는것이 가장 좋은 예시이다.

일반 로그인 및 소셜 로그인 영역 분리

위의 화면은 필자가 설계한 화면으로써, 일반로그인, 간편로그인 (네이버, 카카오)와 디지털원패스 로그인 영역을 분리한 화면설계서이다. 디지털 원패스 로그인의 경우, 2023년 7월 이후로 신규 공공기관 웹/앱 구축 사업의 경우 디지털원패스로 로그인/ 회원가입 도입이 필수라 들었고, ( 해당 기능을 급하게 추가하느라 개발 측에서 고생을 했다는 일화..)

다른 서비스는 SNS 회원가입/ 로그인을 어떻게 구현했을까?

(1) 계정 가입 여부를 위한 구분값

- 아이디어스 (idus) : 전화번호로 구분

- notefolio, mango board : 이메일(email)로 구분

(2) 소셜계정 연동

- 아이디어스 (idus)

전화번호로 계정 가입여부를 확인할 수 있는 아이디어스는 처음 가입한 소셜 계정으로만 로그인 할 수 있었다.

만약 카카오 계정으로 로그인 했다면, 네이버, 페이스북, 구글 소셜 계정으로 로그인할 수 없다.

- notefolio, mango board

노트폴리오와 망고보드는 이메일로 계정 가입 여부를 확인했는데, 계정연동 방식과 기능적 측면에서 차이가 있었다.

노트폴리오는 이미 가입된 이메일 계정과 동일한 소셜계정으로 로그인 및 회원가입을 시도할 경우, 연동이 불가능하다는 팝업메시지가 띄워졌다. 소셜계정 연동을 위해서는 1. 동일한 이메일계정의 소셜계정으로 2. 마이페이지에서 연동이 가능하다.

망고보드는 이미 가입된 이메일 계정과 동일한 소셜 계정으로 로그인/ 회원가입을 시도할 경우, 바로 연동처리되며 로그인이 가능했다. 소셜계정 연동을 위해서는 1. 동일한 이메일 계정의 소셜계정인 경우 연동이 가능하다.

	구분값	소셜계정연동 여부	연동된 계정 정보 DATA	최초 회원가입 소셜 계정 탈퇴 여부
notefolio	이메일(email)	△(마이페이지에서 가능)	소셜 아이콘, 최초 회원가입 소셜정보	불가능
mango board	이메일(email)	O(로그인, 마이페이지에서 가능)	소셜 아이콘, 연동 일시, 연동 이메일 정보	가능

계정연동과 관련된 데이터 항목과 기능을 구분해 놓은 표이다.

기획자가 기능 설계와 요구사항, 정책을 어떻게 정하는지에 따라서 소셜 로그인은 다양한 방식으로 구현이 가능하다.

개인적으로는 망고보드가 로그인 시 바로 계정연동이 가능하다는 점에서 사용성 측면에서 우위에 있다고 생각했다.

연동 이메일 정보와 연동일시 정보는 선택정보인것 같지만, 필요에 따라서는 필수정보 값이 될 수 있다.

어떤 정보를 어떻게 보여줄 것인가는 기획자의 기획의도에 따라 천차만별이다.

노트폴리오

망고보드

다음포스팅은

[SNS 회원가입/로그인] 기획자가 소셜 회원가입/ 로그인 기획시 알아두어야 할 것 2

(feat. 개발자에게 일 잘하는 기획자로써 인정받고 싶다면)으로 돌아오겠습니다.

[본인인증] 휴대폰 본인인증 번호로 알림톡을 발송하는 서비스 가능할까? (feat. PASS, Nice평가정보)

기획하는뇽뇽씨 — Wed, 13 Dec 2023 12:46:37 +0900

결론부터 말하자면,

가능하다. 사용자가 휴대폰 본인인증(PASS앱)을 통해 인증받은 번호를 리턴값으로 보내주면 인증받은 번호로 알림톡을 보낼 수 있다.

휴대폰 본인인증과 알림톡

휴대폰 본인인증 번호로 알림톡을 발송하는 이유가뭐야?

사용자의 데이터 입력실수로 인한 알림톡 미발송

알림톡 발송 시점이 서비스 신청 완료 시점이기 때문에, 부정확한 데이터를 입력했더라도 수정할 수 없기에 혼란에 빠지기 쉽다.

그렇기에 인증받은 번호로 알림톡을 발송한다면, 인증받은 본인 휴대폰으로 알림톡을 받을 수 있다.

ABOUT 휴대폰 본인인증

휴대폰 본인인증이란?

본인 명의의 휴대폰인지와 해당 휴대폰을 보유하고 있는지 동시에 확인하는 본인확인 서비스로써,

본인확인 결과로 통신사에 등록된 명의자 정보와 휴대폰번호를 수집할 수 있어, 회원가입 및 본인확인이 필요한 업무에 보편적으로 사용하는 서비스이다.

휴대폰 본인인증은 왜 사용할까?

1. 회원가입
: 본인확인 완료 후 회원가입 시 정확한 사용자 정보를 확인할 수 있고, 중복회원가입을 방지할 수 있다.

2. 아이디/ 비밀번호 찾기
: 아이디/ 비밀번호 찾기와 같이 본인 여부의 명확한 확인이 필요한 경우, 본인확인 후 해당 서비스를 제공하여 고객 개인정보 관리 강화와 더불어 효율적 관리가 가능하다.

3. 성인인증
: 온라인상 성인인증은 법에 따라 방통위에서 지정한 본인확인 수단으로만 인증이 가능하며, 미성년자와 성인사용자 구분이 필요한 경우 반드시 본인확인 서비스를 도입해야 한다.

휴대폰 본인인증 번호로 알림톡을 발송하려면 어떻게 해야할까?-(개발편)

위에서 말했듯이 휴대폰 본인인증 정보로 알림톡을 송출하려면 본인인증한 휴대폰번호를 리턴받으면 된다.

휴대폰번호를 리턴받기 위해서는 NICE 알리미 계약부서에 요청해야 한다.

또한 리턴값 활용에 대한 제한은 없다고한다.

휴대폰 본인인증 번호로 알림톡을 발송하려면 어떻게 해야할까?-(계약편)

NICE 알리미 측에 확인해본 결과, 현재 계약이 '휴대폰 번호를 리턴받도록' 설정이 되어있는지 여쭤보았다.

리턴값이 설정되지 않은경우, 계약팀과 논의해서 계약을 수정하거나 계약진행시 해당 사항을 요청한다면 반영 될수있다.

[Figma] 피그마 오토 레이아웃에 대해 알아보자 (단축키와 활용방법까지)

기획하는뇽뇽씨 — Tue, 12 Dec 2023 17:35:13 +0900

오토레이아웃?

프레임에 자동으로 간격을 걸어주는 기능으로, 프레임을 동적으로 (콘텐츠에 반응하도록) 만들어준다.

주로 Web, 반응형 모바일 작업시에 유용하게 사용되고 작업시 디자이너, 퍼블리셔, 개발자 간의 오류사항을 줄여줄 수 있다.

오토레이아웃 만들기 (단축키)

1. 개체 우클릭 > Add auto layout

2. 우측 탭에서 Auto layout + 버튼 누르기

3. 단축키 : Shift + A

오토레이아웃 해제하기

1. 프레임 선택, 언그룹

2. 우측 오토레이아웃 마이너스

3. 단축키 : Ctrl + Shift +G or Ctrl + 백스페이스

오토레이아웃 패널 활용방법 알려줘!

오토레이아웃 패널

1. 레이아웃 방향 : 자동으로 요소간의 레이아웃을 배치할 방향을 설정하는 기능이다. 반응형에서는 주로 꺾은 아래 화살표 아이콘을 주로 사용한다.

2. 레이아웃 간격 : 요소간 간격을 설정하는 기능이다. 수동으로 입력할 수도 있고, 보통은 자동으로 설정된다.

3. 좌우 마진 (간격) : 요소와 테두리 좌우 마진 간격을 설정하는 기능이다.

4. 상하 마진 (간격) : 요소와 테두리 상하 간격을 설정하는 기능이다.

5. 프레임 내 배치(상하좌우 정렬) : 테두리에서 내부 요소들이 어느위치를 기준으로 오토레이아웃이 제작되는지에 대한 기준을 설정하는 기능이다.

6. 더보기 옵션 : 이외의 다양한 더보기 기능을 확인 할 수 있다.

오토레이아웃 참고 팁

요소를 덩어리 단위로 쪼개어 가장 작은 단위부터 제작한다.

한번에 하나의 방향만 레이아웃이 가능하기 때문에, 조합해서 사용하는 것이 좋다.

오토레이아웃 최소 단위 요소별 설정

위의 피그마에서는 아래와 같은 순서로 오토레이아웃을 진행했다.

1. 작은 단위인 블럭 1 x 3

2. 블럭1 + 블럭2

3. 블럭3 x 2

4. 블럭1 x 2

5. 블럭3 + 블럭1

6. (블럭1 + 블럭2) + (블럭3 + 블럭1)

각 오토레이아웃에 다르게 레이아웃 방향도 테스트해보았다. 위를 참고해서 블럭쌓기 놀이를 통해 오토레이아웃에 대해 이해를 쌓아보는건 어떨까?

다음 포스팅은 오토레이아웃의 응용편으로, 반응형 콘텐츠를 만드는 방법과 Wrap 기능, 앱솔루트 포지션에 대해 포스팅해볼 예정이다.

[Figma] 피그마 기본 컴포넌트와 플러그인 댓글에 대해 알아보자 (유용한 플러그인 추천 best7 )

기획하는뇽뇽씨 — Wed, 6 Dec 2023 16:46:07 +0900

해당 포스팅은 피그마 사용에 있어 기본 컴포넌트와 플러그인, 댓글기능에 대해 설명해놓았습니다. 기본 컴포넌트는 화면 제작시 유용하게 사용되므로 응용방법까지 익혀두시면 좋을 것 같습니다. 아래에는 유용하게 사용되는 플러그인 best 7을 뽑아 사용방법과 함께 작성해 두었습니다.

기본 컴포넌트 (사각형, 선, 화살표, 원, 세모, 별, 이미지)

어디서 사용할 수 있나?

피그마 기본화면(3) - 기본 컴포넌트 (사각형, 선, 화살표, 원형, 삼각형, 별, 사진입력)

응용방법도 알려줘! (Feat. 도넛링 만들기, 파이차트 만들기)

도형 변환 및 응용방법

사각형 변형하기

응용방법은 간단하다. 도형 선택 → 모서리 안쪽의 점을 선택 → 중앙으로 드래그하면 둥근 사각형 제작이 가능하다.

한쪽 모서리 라운드 처리를 위해서는 Alt키를 누르고 점을 드래그하여 라운드를 만든다.

또한 디자인 패널에서 라운드 값을 설정하여 변경할 수도 있다.

원형 변형하기

우측 내부에 있는 점을 선택하여 중앙으로 드래그 하여 파이모양을 만들수 있다.

세개의 점중 중앙 꼭짓점을 선택하여 안쪽으로 드래그 하면 도넛링 모형을 만들 수 있다.

펜, 연필

피그마 기본화면(4) - 펜, 연필

펜 사용방법

펜은 점과 점을 이어 마지막 더블클릭하면 매끄럽게 선이 표현된다. 많이 사용하지 않는 도구이다.

연필 사용방법

도화지에 그림을 그리듯 색상, 펜촉, 굵기 등을 설정하여 그림을 그릴 수 있다. 주로 타이포 그래피에 사용된다.

텍스트 입력

어디서 사용할 수 있어?

피그마 기본화면(5) - 텍스트입력

화면을 설명하거나 화면 내부의 Text를 입력하고싶을때 텍스트를 입력한다.

Text 속성은 폰트, 사이즈, 위아래 간격, text 사이 간격, text 정렬, text 배치방향을 정할 수 있다.

text 색상, 테두리 지정 등 다양한 기능이 제공되어, 타이포그래피에도 적합하다고 할 수 있다.

※기본폰트를 제외한 폰트는 컴퓨터에 설치하여 이용할 수 있다.

컴포넌트, 플러그인

컴포넌트, 플러그인 어디에서 사용해?

피그마 기본화면(6) - 컴포넌트, 플러그인

컴포넌트

원본으로 복사본까지 한 번에 수정할 수 있는 기능으로써 언제든 재사용이 가능한 요소이다.

다시 말해 여러개의 아이템을 하나의 아이템으로 수행할 수 있도록, 공통 요소들에 대해 컴포넌트를 사용하고 동시에 불필요한 반복작업을 줄일 수 있는 기능이다. 컴포넌트와 관련한 포스팅은 다음에 자세히 다루도록 하겠다.

컴포넌트 단축키

[Ctrl + Alt + K or 마우스 우클릭, Create componet]

플러그인

생산성을 올려주는 Figma의 앱으로써, 리소스 > 플러그인에서 검색하고 사용할 수 있다.

유용한 플러그인 추천해줘!

유용한 플러그인 best 7

✔ Icons8 - icons, illustrations, photos

: 무료로 이용 가능한 아이콘, 일러스트 이미지, 사진을 삽입할 수 있는 플러그인이다. 플러그인을 실행하여 원하는 파일을 삽입할 수 있다. 무료지만 퀄리티 좋은 편이다.

icons8 플러그인

✔ Remove BG

: 백그라운드 이미지를 제거할 수 있는 플러그인이다. 사진 선택후 실행하면 배경이미지가 없어진다.

Remove BG 이용방법

[이용 준비단계]

1. 플러그인 Remove BG을 검색하여 다운로드

2. remove.bg website에 들어가 회원가입 (구글 간편회원가입)

3. 회원가입을 마쳤으면 다시 피그마로 돌아오기

4. 피그마의 2번 api 발급 url이동하여 새 API키 버튼 클릭

5. Create API Key 선택하여 진짜 API키 복사 붙여넣기하면 끝

[사용법]

백그라운드 배경을 제거할 이미지를 선택하고, 플러그인 Run을 실행하면 배경 이미지가 제거된다.

✔ Color Palettes

: 컬러 패턴을 추천해주는 플러그인이다. 컴포넌트를 선택하여 컬러 클릭하여 적용해볼 수 있다. 색상 조합이 어려운 디자이너, 기획자에게 유용한 플러그인이다. 강추

color palettes 플러그인

✔ AI Image upscaler

: 캡처 혹은 저해상도 이미지 파일을 높은 고해상도 이미지 파일로 변환해주는 플러그인이다. 이미지를 선택하여 Upscale 배율을 조정하고, Apply 버튼을 눌러 적용시킨다.

AI Image upscaler 플러그인

✔ SkewDat

: 도형 및 텍스트를 왜곡시켜주는 플러그인이다. 도형 및 텍스트를 선택하여 실행하고, 가로와 세로 슬라이더를 조절하여 왜곡 정도를 설정한다. 타이포 그래피에 유용하게 사용할 수 있다.

skewDat 플러그인 사용

✔ Font Replacer

: 원하는 프레임을 선택하여 프레임 안에 들어 있는 서체 정보와 텍스트 레이어 개수를 보여주고, 오른쪽 메뉴에서 변경하고자하는 폰트를 선택하여 변경할 수 있다.

Font Replacer 플러그인

✔ ARC

: Text의 곡률을 조절할 수 있는 플러그인이다. Text 배열을 디자인 할 수 있다. Text를 선택하여 Bend %를 설정하고, 미리보기 기능을 통해 확인하여 적용시킬 수 있다. 적용시킨 Text는 Group을 이룬다.

ARC 플러그인

댓글기능

피그마 기본화면(7) - 댓글기능

프레임 혹은 컴포넌트를 선택하여 댓글을 남길 수 있다. 수정사항 혹은 커뮤니케이션 해야할 주의사항 등을 적어놓거나 컴포넌트에 대한 의견을 남겨놓으면 확인이 용이하여 작업시 빠르게 개선& 적용할 수 있다는 장점이 있다.

[Figma] 피그마 프레임과 섹션, 그룹의 차이점을 알아보자

기획하는뇽뇽씨 — Tue, 5 Dec 2023 17:28:37 +0900

해당 포스팅은 프레임과 섹션, 그룹의 차이점을 설명해 놓은 글입니다. 프레임(Frame)은 화면요소와 화면을 담는 컨테이너이고, 섹션(Section)은 화면들을 담는 단위, 그룹(Group)은 화면을 묶는 단위입니다.

추가적으로 콘스트레인츠(Constraints) 개념까지 함께 정리해놓았습니다.

요약하자면,

프레임, 섹션, 그룹의 차이점

섹션(Section) : 화면을 담는 단위로써 프레임과 화면 요소들을 담을 수 있다. 프레임 내에 담을 수 없다.
프레임(Frame) : 화면요소와 화면을 담는 컨테이너(그룹)이다. 속성을 변경하더라도, 콘텐츠에 영향을 미치지 않는다.
그룹 (Group) : 화면들을 묶는단위로써 컨테이너 역할을 하지 않는다. 속성을 변경하면 콘텐츠에 영향을 미친다.

프레임, 섹션, 그룹 어떻게 사용하는데?

프레임을 그리는 방법 2가지!

1. #Frame 선택 후 화면에 드래그 해서 그리기

2. #Frame 선택 후 오른쪽 디자인 패널에서 프레임 프리셋 사용하기

프레임, 섹션, 그룹 사용법

2번방법을 이용하면, iphone, Android, Tablet, Desktiom Presentation, Watch, papaer, Social media, 등 다양한 프레임 프리셋을 사용할 수 있다. 개발자와 퍼블리셔는 작업시 화면에 맞는 디자인을 작업 할 수 있기에, 프리셋을 사용하여 기획, 디자인 작업시 작업 효율이 높아질 수 있다.

섹션 내부에 프레임(or 그룹) 어떻게 삽입해? 프레임 내부에 그룹 어떻게 삽입해?

옮기고 싶은 요소들 모두 드래그 or Shift로 선택하여 내부로 드래그하면, 파란색 테두리가 생기는 경우는 성공!
빨간색 테두리가 유지되면 삽입 실패!

*Layers 패널에서도 드래그해서 삽입하는 방법도 있다.

프레임, 섹션, 그룹 차이점이 뭐야?

[섹션 ⊃ 프레임 ⊃ 그룹 ]

섹션(Section)

프레임(Frame)

그룹(Group)

	섹션	프레임	그룹
컨테이너역할	O	O	X
속성 변경시 콘텐츠 영향	X	X	O
사이즈 변경시 영향	X	X	O(크기에 맞춰)

프레임 콘스트레인츠 이해

콘스트레인츠가 뭔데?

프레임 안에 든 요소를 원하는 방향으로 고정시켜주는 기능이다.

콘스트레인츠 사용

콘스트레인츠 어떻게 사용해?

요소, 도형, Text를 선택하면 디자인 패널의 Constraints 영역에서 고정하고 싶은 가로, 세로의 방향을 핀을 눌러 설정한다.

설정된 핀의 방향으로 고정되어, 요소 크기와 위치를 변경해도, 고정되어 변경되지 않는다.

콘스트레인츠는 언제 사용해?

상단바 타이틀, 버튼위치 등 컴포넌트를 고정된 위치에 배치하기 위해 자주 사용된다.

▼ 함께 보면 좋은 피그마 콘텐츠▼

[Figma] 피그마 기본개념, 화면구조, 기능정리 ch.1 (Move, Scale, Local variable,Local style, Export)

youngplan.tistory.com

[Figma] 피그마 기본개념, 화면구조, 기능정리 ch.1 (Move, Scale, Local variable,Local style, Export)

기획하는뇽뇽씨 — Thu, 30 Nov 2023 16:22:09 +0900

해당 포스팅은 피그마 기본 화면구조와 기능에 대해 정리한 글입니다.

기본 화면구조와 화면구조에 해당하는 Move, Scale, Local variable, Local style, Export 컴포넌트들이 어떤 기능을 하는지에 대해 정리해 놓았습니다.

기본기와 기본 기능만 잘 활용해도 금방 익숙한 툴이 될 거라고 생각이 듭니다.

피그마 기본개념, 화면구조, 기능정리 CH.1

1. Move, Scale

피그마 기본화면(1) - 이름변경, Move, Scale

1) Arrow 컴포넌트

1-1. Move

피그마에서 컴포넌트를 이동할 때 사용하는 도구이다.
단축키 : V

1-1. Scale

피그마에서 개체의 선, 폰트크기, 둥글기 등 개체의 현재 보여지는 속성 그대로 사이즈를 조절하기 위해 사용하는 기능으로 개체의 선, 폰트 크기가 비율에 맞춰 리사이징이 가능하다.
단축키 : K

2) Project Name

해당 페이지에서는 Login Page라는 이름을 가진 프로젝트로 생성되었다. 변경을 위해서는 제목을 더블클릭하여 이름을 변경할 수 있다.

3) 기본 Design 설정 화면(Style Pannel)

Local variables

Variable : 피그마에서 저장할 수 있는 변수(데이터 형식)로써, 공통적인 컴포넌트의 색상, 숫자, 문자열, 논리형 등에 대해 공통적인 규칙을 변수로 저장하여 디자인 시스템의 일관성을 부여한다.

변수 설정방법 , Local Variable을 클릭하면 해당 화면이 나타난다.

button/background/primary 색상지정

변수 지정 및 사용방법
: 공통적으로 사용할 색상, 숫자, 문자열, 논리형을 설정하여 '이름, 속성 값'을 지정한다.

속성	속성값
색상	색상 지정
숫자	숫자 설정
문자열	문자열 설정
논리형	Y/N 설정(Boolean)

▼자세한 variable에 대한 포스팅은 아래에서 확인 할 수 있다. ▼

[Figma] 피그마 베리어블 Local variables 에 대해 알아보자 (color, Number, String, Boolean, Modes 설정방법까

youngplan.tistory.com

Local style

로컬 스타일은 현재 작업 중인 프로젝트에서 재사용할 만한 스타일을 저장하여, 빠르게 컴포넌트에 스타일을 지정할 수 있는 기능이다.
Local Style 영역을 선택하면 아래와 같은 화면이 나오고, 이름, 설명, 속성값을 지정할 수 있다.

Local Style

저장된 Local style 사용법은 간단하다. 컴포넌트를 선택하면, 스타일 패널에 저장된 Local style이 뜨게 되고, 선택하여 적용시킬 수 있다.

저장된 Local Style  사용하기

Export

Export는 파일을 저장하는 기능이다. 저장시 보일 배율, Suffix(접미어- 동일한 파일명에 다른 배율을 함께 저장하여 비교할 때 옆에 붙는 text), 파일 확장자를 선택한다.
Export 옆 +를 누르게 되면 2x,3x 배율의 List가 추가되고, Export asset을 통해 저장하면 List에 있었던 배율의 파일이 모두 저장되게 된다.

export

[서비스경험디자인기사] 서비스경험디자인 개념정리, 꿀팁 및 노하우 총정리 !

기획하는뇽뇽씨 — Tue, 28 Nov 2023 16:31:53 +0900

안녕하세요. 오늘은 서비스경험디자인기사의 총정리 포스팅을 적어보려합니다.

필자는 2023년 제 4회차 필기, 실기를 한번에 합격했습니다. 저의 개인적인 공부방법의 노하우는 "목차별 정리" 공부방법이었습니다.

(참고로 저는 컴퓨터 공학과 전공 출신 기획자이고, 디자인 및 UI&UX 관련 자격증을 보유하지 않아 스펙 쌓을 겸 시작했던 기사자격증 공부였지만, 현업에서도 적용하고 녹여낼 수 있을 법한 내용들을 공부해보며 유익하고 흥미있었던 공부였습니다.)

"목차별 정리 공부방법"은 각 챕터별 목차를 정리해 키워드 중심으로 공부하는 방식으로, 전체 내용의 흐름을 연결하여 이해하고 암기함과 동시에 세부 키워드를 기억할 수 있다는 장점이 있습니다. 시험을 볼때 '키워드' 중심으로만 공부를 하게되면, 어떤 챕터에 어느 내용이었는지 기억할 수 없기에 '어디에서 봤는데...?'라는 생각한 경험이 있으실 겁니다.

그래서, 필자는 하위 서비스경험디자인기사의 내용을 챕터별로 순서를 정하여 정리했습니다.

아래의 내용을 참고하시어 공부하시면 더욱 효율적인 방법으로 공부할 수 있습니다.

아래의 서비스경험디자인기사 개념정리 총정리 포스팅을 저장하고 공유하여 꼭 합격하시기를 기원하겠습니다.

0. 서비스경험디자인의 이해

[서비스경험디자인기사] 0.서비스경험디자인의 이해 (디자인씽킹, 서비스디자인, 사용자경험디

서비스경험디자인기사 필기, 실기 시험에 핵심정보인 개념 정리를 보다 쉽고, 이해될 수 있도록 정리한 포스팅입니다. 서비스경험디자인의 이해를 주제로 작성된 글이니, 저장하고 시험 볼 때

youngplan.tistory.com

키워드
: 디자인씽킹, 서비스디자인, 사용자경험 디자인, 더블다이아몬드 프로세스

1. 준비하기 Align

[서비스경험디자인기사] 1.준비하기 Align 개념정리 (제안요청서, 사전질의서, 디자인브리프, 알렌

서비스경험디자인 기사 필기, 실기시험에 핵심정보인 개념정리를 보다 쉽고, 이해될 수 있도록 정리한 포스팅입니다. 아래의 내용은 제안요청서, 사전질의서, 디자인브리프, 알렌곡선의 개념을

youngplan.tistory.com

키워드
: 제안요청서, 사전질의서, 디자인브리프, 알렌곡선

2. 발견하기 Discover (1) 환경조사

[서비스경험디자인기사] 2. 발견하기 Discover _ (1) 환경조사 개념정리 (데스크리서치, 2차연구, PEST,

서비스경험디자인 기사 필기, 실시시험에 핵심전보인 개념정리를 보다 쉽고, 이해될 수 있도록 정리한 포스팅입니다. 아래의 내용은 환경조사에 해당하는 데스크리서치, 2차연구, PEST, STEEP, 3C, F

youngplan.tistory.com

키워드
: 데스크리서치, 2차연구, PEST, STEEP, 3C, FAW, 4P, STP, SWOT, 5 Force Analysis 분석

2. 발견하기 Discover (2) 관찰조사

[서비스경험디자인기사] 2. 발견하기 Discover_(2)관찰조사 개념정리 (자문화기술지, 온라인 에스노

서비스경험디자인 기사 필기, 실기시험에 핵심정보인 개념정리를 보다 쉽고, 이해될 수 있도록 정리한 포스팅입니다. 아래의 내용은 관찰조사에 해당하는 자문화기술지, 온라인 에스노그래피,

youngplan.tistory.com

키워드
: 자문화기술지(미스터리 쇼핑, 미스터리 워킹, 서비스사파리, 탐색적 서비스사파리, 다이어리연구, 탐문, 인지적 시찰법, 크라우드 소싱, 행위매핑), 온라인 에스노그래피, 섀도잉, 맥락적인터뷰, 다섯단계의 왜, 심층인터뷰, 포커스그룹인터뷰, 조사윤리

2. 발견하기 Discover (2.1) 관찰조사

[서비스경험디자인기사] 2. 발견하기 Discover_(2.1) 관찰조사 개념정리 (비참여관찰, 모바일에스노

서비스경험디자인 기사 필기, 실기시험에 핵심정보인 개념정리를 보다 쉽고 이해될 수 있도록 정리한 포스팅입니다. [서비스경험디자인기사] 2. 발견하기 Discover_(2)관찰조사 개념정리 (자문화기

youngplan.tistory.com

키워드
: 모바일에스노그래피, 문화적 프로브, 편향, 헤일로효과, 프라이밍효과

3. 정의하기 Define

[서비스경험디자인기사] 3. 정의하기 Define 개념정리 (페르소나, 고객여정지도, 사일로현상, 이해

서비스경험디자인 기사 필기, 실기시험에 핵심정보인 개념정리를 보다 쉽고, 이해될 수 있도록 정리한 포스팅입니다. 아래의 내용은 정의하기 단계에 해당하는 페르소나, 고객여정지도, 이해관

youngplan.tistory.com

키워드
: 페르소나, 고객여정지도, 이해관계자지도, 사일로현상, 친화도분석, 서비스경험디자인원칙

4. 개발하기 Devlop(1,2)

[서비스경험디자인기사] 4.개발하기 Devlop (1,2)개념정리 (공동창작, 퍼실리테이션, 브레인스토밍,

서비스경험디자인 기사 필기, 실기시험에 핵심정보인 개념정리를 보다 쉽고, 이해될 수 있도록 정리한 포스팅입니다. 아래의 내용은 개발하기 단계에 해당하는 공동창작, 퍼실리테이션, 브레인

youngplan.tistory.com

키워드
: 공동창작, 퍼실리테이션, 브레인스토밍, 바디스토밍, 만다라트, 여섯색깔모자기법, 스캠퍼, 서비스터치포인트 매트릭스

4. 개발하기 Devlop(3)

[서비스경험디자인기사] 4. 개발하기(3) 개념정리 (프로토타입, 로우/하이 피델리티, 오즈의마법

서비스경험디자인 기사 필기, 실기시험에 핵심정보인 개념정리를 보다 쉽고 이해될 수 있도록 정리한 포스팅입니다. [서비스경험디자인기사] 4.개발하기 Devlop (1,2)개념정리 (공동창작, 퍼실리테

youngplan.tistory.com

키워드
: 프로토타입, 로우피델리티, 하이피델리티, 오즈의마법사, 서비스스토리보드, 서비스시연, 서비스모형 MVP

5. 전달하기 Deliver (1)

[서비스경험디자인기사] 5. 전달하기 Deliver (1) 개념정리 (프로토타입평가, 파일럿테스트, AEIOU, 정

서비스경험디자인기사 필기, 실기시험에 핵심정보인 개념정리를 보다 쉽고, 이해될 수 있도록 정리한 포스팅입니다. 아래의 내용은 전달하기 단계의 프로토타입 평가에 해당하는 파일럿테스트

youngplan.tistory.com

키워드
: 프로토타입평가, 파일럿테스트, AEIOU, 정성적데이터분석, 정량적데이터분석, 사용성평가, 휴리스틱평가

5. 전달하기 Deliver (2)

[서비스경험디자인기사] 5. 전달하기 Deliver(2) 개념정리 (서비스경험 청사진, 비즈니스모델 캔버

서비스경험디자인기사 필기, 실기시험에 핵심정보인 개념정리를 보다 쉽고 이해 될 수 있도록 정리한 포스팅입니다. [서비스경험디자인기사] 5. 전달하기 Deliver (1) 개념정리 (프로토타입평가,

youngplan.tistory.com

키워드
: 서비스경험 청사진, 비즈니스모델 캔버스, 서비스 스토리보드, 서비스 시나리오, 린캔버스, 가치제안캔버스, 카노모델

6. 완료하기

[서비스경험디자인기사] 6.완료하기 개념정리(대시보드, 정보디자인, 데이터시각화, 인포그래픽,

서비스경험디자인기사 필기, 실기시험에 핵심정보인 개념정리를 보다 쉽고 이해될 수 있도록 정리한 포스팅입니다. 아래의 내용은 전달하기 단계의 프로토타입 평가에 해당하는 대시보드, 정

youngplan.tistory.com

키워드
: 대시보드, 정보디자인, 데이터시각화, 인포그래픽, 트리플바텀라인, ESG 경영, 디자인권, 공지증명제도, BM특허

[서비스경험디자인기사] 6.완료하기 개념정리(대시보드, 정보디자인, 데이터시각화, 인포그래픽, 트리플바텀라인, ESG경영, 디자인권, 공지증명제도, BM특허)

기획하는뇽뇽씨 — Mon, 27 Nov 2023 15:57:42 +0900

서비스경험디자인기사 필기, 실기시험에 핵심정보인 개념정리를 시각화하여 이해하기 쉽게 정리한 포스팅입니다.

아래의 내용은 전달하기 단계의 프로토타입 평가에 해당하는 대시보드, 정보디자인, 데이터시각화, 인포그래픽, 트리플바텀라인, ESG경영, 디자인권, 공지증명제도, BM특허의 개념을 정리하였습니다.

6. 완료하기

개발된 서비스디자인을 돋보이게 하기 위하여 어떻게 설득을 위한 프레젠테이션을 준비해야 할지 사례를 통해 배우고 디자인권리 등 서비스디자인을 보호받는 방법에 대해 알아본다.

6.1 프리젠테이션 및 결과 보고서 작성

6.1.1 시선을 사로잡아라

문서와 용지의 포맷부터 확인 (세로 : 텍스트 중심의 공식화된 문서, 가로: 이미지 중심의 발표용 문서)
제목과 번호 체계를 활용해 대제목, 중제목, 소제목, 그에 따른 세부 내용 등 문서 전개의 흐름 서술
텍스트 중심의 문서는 명조체, PT는 고딕체 사용
보고서의 신뢰도와 정확성을 높이기 위해 출처는 명확히 제시하는 각주 삽입

시선을사로잡는 프리젠테이션

6.1.2 그림으로 표현하라

장황한 설명글 → 표로 정리해 콘텐츠를 구분, 글자 크기와 색상을 활용한 시선의 강약조절
인포그래픽(정보의 시각화) : 꺾은선/ 막대/ 원/ 레이더 그래프/ 스파이더 맵/ 픽토 그래프
다이어그램/ 도해(핵심 개념의 체계화) 활용 : 나열형, 피라미드형, 벤다이어그램형
그림은 한 페이지 또는 하나의 문단에 1개 이상 사용하지 않는 것이 효과적

도해, 인포그래픽

▶ 인포그래픽 특징 비교 ⭐⭐

6.1.3 대시보드

대시보드
: 주요 비즈니스 지표를 전달하기 위해 정보디자인을 사용한다. 대규모 데이터 세트에서 복잡하고 많은 데이터 정보를 하나 이상의 페이지 또는 화면에 실시간으로 전달하여 정해진 시간에 더 많은 정보를 볼 수 있고, 이를 통해 통찰력을 향상할 수 있다는 장점이 있다.

▶ 목적

'비교'를 위해서 막대, 버블차트를 사용한다. 선, 영역, 타임라인, 간트차트는 시간의 흐름에 따른 데이터 변화를 확인하기에 용이하고, 특정 항목이 차지하는 비중을 보기 위해서는 파이차트나 트리맵을 활용하면 좋다.
데이터의 관계를 확인하기 위해서는 산점도 또는 네트워크 시각화 유형으로 표현한다. 지도 시각화 유형은 위치 데이터를 포함한 경우에 사용한다.

▶ 대시보드 디자인 고려사항

구분	내용
순서	대시보드 디자인의 스토리를 논리적으로 표현하기 위해서는 콘텐츠 순서가 명확해야 한다.
계층	정보를 가중치에 따라 계층화하고 보는 사람들이 알아야 할 가장 중요한 정보를 좌측 상단에 배치, 덜 중요한 정보는 우측 하단 방향에 배치하여 시선의 흐름이 자연스럽게 흐르도록 한다. 중요도가 높은 영역은 여백을 주어 다른 콘텐츠와 구분되도록 하고 색이나 폰트를 활용하여 시선을 끌 수 있도록 한다.
콘텍스트	대시보드에서 글자를 적절히 활용하면 사용자가 찾고자 하는 요소와 그 외에 보이는 요소들 사이의 연관 관계를 완벽하게 파악하는 데에 도움이 된다.

데이터 시각화 - 정보 디자인 - 인포그래픽

구분	내용
데이터 시각화	가공되지 않는 크고 작은 전략적 정보들을 인간의 두뇌가 이해하고 처리하기 쉽도록 노드의 형태로 시각화 한 것. 정보형 메시지 도구
정보 시각화	한정된 공간에 많은 정보를 효율적 또는 차별적으로 보여주고자 하거나 목적에 맞게 그래프의 형태로 시각화 한것
정보디자인	사람들이 정보에 맞게 접근하고 효율적으로 전달하기 위해서 차트나 그래프 등을 활용하여 데이터를 의미 있게 시각화 한 것
인포그래픽	데이터, 정보, 지식을 시각화한 것으로 수집한 정보를 분석, 가공하고 패턴이나 트렌드를 빠르게 인지할 수 있도록 스토리텔링과 시각 능력을 강화하는 그래픽을 적극적으로 활용하여 표현한것.

데이비드 맥캔들리스의 좋은 시각화의 핵심조건
: 정보 디자인에는 정보의 시각화와 인포그래픽이 혼재되어 있다. 인포그래픽과 정보 시각화는 정보 전달과 사용자의 이해를 넘어 태도나 행동 변화를 유도하는 설득형 메시지 형태를 가지고 있다.

데이비드 맥캔들리스

인포그래픽의 장점 : 흥미 유발 / 정보 습득 시간 절감/ 기억 지속 시간 연장 / 훌륭한 커뮤니케이션 도구

6.1.4 보고서 작성의 노하우 (논리구성- 프레임- 정보가시화)

1. 전체 보고서의 논리를 구성할 때는 읽는 사람 즉, 의사결정자의 입장에서 듣고자 하는 내용에 맞춰 순서를 정하는 것이 중요하다.

▶ 논리구성을 위한 6가지 방법!

1) 피라미드 구조를 활용하여 종속 관계를 명확히 한다.

2) 문장을 쓰고 문단을 쓸 때 '1 문단 1 아이디어'를 원칙으로 한다.

3) 강조점은 처음에 위치시키는 것이 좋다. (두괄식 서술)

4) 현상과 문제, 문제와 근거의 논리에 맞추어 귀납과 연역의 논리를 잘 활용해야 한다.

5) 장황하게 늘어놓지 말고, 요점을 분명히 해야 한다.

6) 의도를 빨리 알아챌 수 있도록 직접적으로 설명한다.

2. 보고서를 작성할 때 전체 내용의 흐름을 파악하기 위해서는 프레임 설정을 위한 여러 가지의 유형을 익혀두는 것이 필요하다.

1) 내용을 시각화하여 추상적 모델로 설명하는 모델 설정의 방법

2) 테마나 비유, 이야기를 논리에 덧씌워 이해를 돕는 스토리설정의 방법

스토리 전개를 위해서는 발단, 전개, 결말의 간단한 구조를 구성하는 것이 핵심이다.

이는 보고서 작성에서 설명한 서론 why- 본론 what - 결론 how의 3단 구성을 설정하여 각각에 해당하는 내용을 체계화하고, 프레임을 설정하도록 한다.

3. 정보 가시화를 위해 단순화, 스토리, 이해도와 같은 내용적 측면과 배포, 프린트, 가독성, 쉬운 작성과 같은 형식적 측면을 모두 고려해 효과적으로 정보가 전달될 수 있도록 하는 것이 필요하다.

원칙	내용
단순화	줄일 수 있는 것은 최대한 줄여야 한다.
스토리	논리와 맥락을 담고 있어야 한다.
완전한 이해	읽는 것만으로 완전히 이해되어야 한다.
배포	쉽게 배포할 수 있어야 한다.
프린트	출력 결과물의 색 구분이 있어야 한다.
가독성	검토자에 맞추어 글자를 적절하게 해야한다.
쉬운 작성	간단하게 작성할 수 있어야 한다.

6.1.5 서비스 평가 측정 - Triple Bottom Line (TBL)

⭐ 서비스 평가 측정 - Triple Bottom Line (TBL)
: 기업들이 지속 가능성을 위해 지켜야 할 요구조건 (3가지 기본 원칙)
1. 기업의 이익 관점인 경제적 관점 (Economic Value)
2. 그 기업이 얼마나 사회적으로 책임감이 있는지를 보여주는 사회 자본 (Social Equity)
3. 기업이 얼마나 환경에 대한 책임감이 있는지 (Ecosystem Quality)

▶ ⭐ TBL을 흔히 3P(Profit 이윤, People 사람, Planet 지구)라고 부른다.

TBL

경제적 보텀라인 : 기업의 목적인 이윤( Profit ) 창출에 집중하고, 기업의 이익뿐만이 아니라 내/외부 이해관계자를 포괄하는 차원에서의 성과측정 (ex. 거버넌스)
사회적 보텀라인 : 사람( People )에 주목하고 모든 직원과 노동자, 지역사회와 관련한 성과를 측정
환경정 보텀라인 : 기업의 경영활동 과정이 얼마나 지구( Planet )와 관련하여 환경적으로 지속 가능한지를 보여줌

TBL을 이용한 우버의 예

⭐ TBLD (Triple Bottom Line by Design)
: 경제적 가치, 사회적 자본, 환경적 품질을 개선시켜 기업의 지속 가능성 목표를 발전시키고 기업 경쟁력을 향상할 수 있다. 기업 전략과 디자인 프로세스가 경영의 차원에서 전략적으로 활용될 때, 3가지 요소인 사회, 경제, 환경적 가치에 대한 목표가 이루어지고 그 경쟁력이 강화된다.

* TBLD는 정책, 프로세스, 서비스 및 제품 등이 조직을 활성화하는데 도움을 줄 수 있으며, 생태계와 커뮤니티는 이익을 얻을 수 있어 가치를 더할 수 있도록 해준다.

6.1.6 ESG 경영(Environmental 환경, Social 사회, Governance 지배구조)

⭐ ESG 경영(Environmental 환경, Social 사회, Governance 지배구조)
: 기업의 비재무적 성과를 측정하는 지표.
: 기업이 환경보호와 사회적 약자 보호에 힘쓰고, 사회를 위한 배려 등 법과 윤리를 준수하는 활동 등에 도전하고 변화를 꾀해야 한다.

ESG 경영

▶ ESG와 CSR(Corporate Social Responsibility)의 차이 ⭐⭐

CSR은 사회적 책임을 완수하기 위한 활동으로 비즈니스를 책임감 있게 만드는 것이라면, ESG는 그 노력을 측정 가능하도록 하게 한다.

구분	ESG(비재무적 성과 측정 지표)	CSR(기업의 사회적 책임)
의미/목적	기업 활동 전반에 친환경, 사회적 책임, 지배구조 개선 등을 도입, 지속 가능한 발전 도모	기업의 사회적 책임을 의미 사회에 기여하고자 하는 목적으로 진해되는 기업의 부가 활동
실행방법	기업 경영, 재무 활동에 ESG 요소를 연동	봉사, 기부 및 사회공헌 프로그램 등을 운영하며 가치 실현
단기적 효과	주주, 잠재적 투자자, 투자 매체에 영향, ESG 현황을 지수로 발표	소비자, NGO, 임직원 등에 긍정적 이미지 부여, 충성도 향상 및 기업 이미지 상승 효과
장기적 효과	기업의 재무 안전성으로 이루어짐	기업의 평판 향상에 도움, 매출증대에도 기여

ESG 모범 규준

6.2 디자인 권리 및 사후관리

지식재산권
저작권	산업재산권
	특허권	실용신안권	*디자인권	상표권
	어떠한 발명을 독점적으로 이용할 수 있는 권리	일련의 창작성을 가지고 있어 보호받아 마땅한 사항에 대한 독점적·배타적 권리	디자인에 대해 특정인에게 주어지는 독점권	식별과 분별이 가능하고 상표에 대한 독점을 가지는 권리

6.2.1 디자인권

⭐ 디자인권
: 서비스디자인 과정에서 얻은 디자인권리는 출원 이전에 그 권리를 보호받을 수 있도록 공지증명제도를 운영하고 있다. 공지증명제도는 타인이 창작물을 모방하지 못하도록 창작 사실을 증명해 주는 권리 보호 제도이다.
: 디자인 초기 창작물의 내용과 시기에 대한 법적 보호 조치로 디자인권 취득 전에 디자이너의 권리를 보호하고 디자인 산업 공정거래 환경을 조성하기 위해 특허청과 한국디자인진흥원이 마련한 제도이다.

▶ 공지증명의 장점

디자인 등록 출원 전, 디자인 창작 사실(창작자, 시기)을 대외적으로 공지
디자인 개발 과정 중 개발된 수십 개의 디자인이 공지등록된 경우, 모방디자인의 출원등록 방지
디자인권 등록으로 권리화되지 않은 디자인이라도 경쟁업체의 모방 방지와 이에 대한 분쟁대응

▶ 디자인 등록과 디자인 공지증명 비교

구분	디자인 등록	디자인공지증명
목적	독점 배타적인 디자인권 발생	공지사실 증명
처리기간	출원 후 6개월 내외	1-3일
권리범위	동일 또는 유사한 디자인을 실시할 권리를 득점 (디자인 보호법 제 92조)	독점 배타적 권리 없음. 등록 후 12개월 이내 디자인을 출원할 경우 디자인권(재산권) 확보가 가능함
신청절차	출원인이 출원 수수료 납부와 함께 디자인 등록 출원서를 제출, 실체 심사를 거쳐 등록 결정 후 설정 등록료 납부를 통해 디자인권이 발생함.	디자인을 파악할 수 있는 간단한 도면과 신청서만을 제출함. 실체 심사 과정이 없으므로 절차가 간단함
권리보호기간	존속기간 20년	부정경쟁방지법의 경우 창작일로부터 3년

6.2.2 저작권

저작권
: 저작자가 저작물을 스스로 이용하거나 다른 사람이 이용할 수 있도록 허락함으로써 경제적 이익을 올릴 수 있는 재산권으로서 복제권, 공연권, 공중송신권, 전시권, 배포권, 대여권, 2차적 저작물작성권이 저작권에 해당한다.
: 디자인권 외에 서비스디자인의 결과물을 보호받는 다른 방법은 저작권을 활용하는 방법이다. 저작권은 디자인권과 달리 신규성이 요구되지 않고 물품성이 요구되지 않아 심벌마크, 캐릭터 디자인 등도 저작권 범으로 보호받을 수 있다.

구분	디자인권등록	저작권등록
등록대상	디자인	저작물
요건	공업상 이용가능성 신규성 창작성	문학 학술 예술의 범위 창작성 사상이나 감정의 표현
권리발생시점	등록 시점(방식주의)	창작시점(무방식주의)
보호기간	등록한 때로부터 20년	저작자 사망후 70년

6.2.3 BM(Business Method, 영업방법) 특허

⭐ BM(Business Method, 영업방법) 특허
: 영업방법 등 사업 아이디어를 컴퓨터, 인터넷 등의 정보통신 기술을 이용하여 구현한 새로운 비즈니스 시스템 또는 방법과 관련된 발명에 대해 특허심사를 거쳐 허여 한 것이다.

영업 방법이 BM발명이 되는 방법

▶BM 발명의 특허 요건

: 사업아이디어에 정보시스템 (하드웨어, 컴퓨터, 인터네스 통신기술)을 결합한 형태로, 인간의 판단 행위를 배제한 비즈니스 모델, 프로세스 모델과 데이터 모델 등이 결합된 형태여야 한다. ※ 특허권의 존속기간은 출원일로부터 20년

기준	내용
신규성	기존 것과는 다른 객관적으로 새로운 것이어야 한다.
진보성	객관적으로 새로울 뿐만 아니라 자연적 진보를 뛰어 넘어 고도성을 가진 발명이어야 한다.
선출원	특허청에 먼저 출원한 자가 특허를 받을 수 있다. (동일한 발명에 대해 2개 이상의 권리 부여x)
구체적 특허 여부	신규 기술적 수단과 결합한 경우, 비즈니스 방법은 새롭지만 기술적 수단에 신규성을 결여한 경우, 비즈니스적 측면과 기술적 수단의 양측면이 모두 신규성이 있는 경우 등 상세히 살펴야 한다.

▶BM 특허의 대상

' 자연법칙을 이용한 기술적 사상의 창작으로서 고도한 것'을 발명으로 정의하고 있고, 금융투자, 결제방법, 분석평가방법, 판매방법 등과 같은 영업 방법도 발명의 조건에 해당이 되면 BM 발명이 된다.

소프트웨어에 의한 정보처리가 하드웨어 자원을 이용하여 구체적으로 실현되는지가 중요한 판단 기준이 되며, 인터넷, 컴퓨터 등 IT기술을 시초로 영업방벙을 구현하기 위한 시계열 데이터 (일정한 시간 동안, 수집된 일련의 순차적으로 정해진 데이터 셋의 집합)의 처리과정이 구체적으로 제시된 경우에 특허의 대상으로 인정하고 있다.

▶BM 특허의 대상이 아닌 경우

순수 영업 방법 자체
추상적인 아이디어, 인위적인 결정, 인간의 정신활동, 오프라인상의 인간의 행위를 포함하는 경우
소프트웨어에 의한 정보처리가 하드웨어를 이용해 구체적으로 실현되고 있지 않은 경우
온라인상의 행위와 오프라인상의 행위가 결합된 경우
컴퓨터 프로그램 자체
컴퓨터 프로그램 리스트, 데이터 구조 등 정보의 단순한 제시
수학 알고리즘 또는 수학 공식, 경제 법칙, 금융 법칙, 게임 규칙 그 자체
발명의 과제를 해결하기 위한 구체적 수단이 결여된 미완성 발명

긴 글 읽어주셔서 감사합니다.

다음 포스팅에서는 서비스경험디자인 2023년 4회 차 실기, 필기 합격후기 포스팅으로 찾아올게요.

▼ 서비스경험디자인기사 다른 글▼

[서비스경험디자인기사] 0.서비스경험디자인의 이해 (디자인씽킹, 서비스디자인, 사용자경험디

youngplan.tistory.com

[서비스경험디자인기사] 1.준비하기 Align 개념정리 (제안요청서, 사전질의서, 디자인브리프, 알렌

youngplan.tistory.com

[서비스경험디자인기사] 2. 발견하기 Discover _ (1) 환경조사 개념정리 (데스크리서치, 2차연구, PEST,

youngplan.tistory.com

[서비스경험디자인기사] 2. 발견하기 Discover(2) 관찰조사 개념정리 (자문화기술지, 온라인 에스노

서비스경험디자인 기사 필기, 실기시험에 핵심정보인 개념정리를 시각화하여, 이해하기 쉽게 정리한 포스팅입니다. 아래의 내용은 관찰조사에 해당하는 자문화기술지, 온라인 에스노그래피,

youngplan.tistory.com

[서비스경험디자인기사] 2. 발견하기 Discover (3) 관찰조사 개념정리 (비참여관찰, 모바일에스노그

서비스경험디자인 기사 필기, 실기시험에 핵심정보인 개념정리를 시각화하여 이해하기 쉽게 정리한 포스팅입니다. [서비스경험디자인기사] 2. 발견하기 Discover(2) 관찰조사 개념정리 (자문화기

youngplan.tistory.com

[서비스경험디자인기사] 3. 정의하기 Define 개념정리 (페르소나, 고객여정지도, 사일로현상, 이해

youngplan.tistory.com

[서비스경험디자인기사] 4.개발하기 Devlop (1,2)개념정리 (공동창작, 퍼실리테이션, 브레인스토밍,

youngplan.tistory.com

[서비스경험디자인기사] 4. 개발하기(3) 개념정리 (프로토타입, 로우/하이 피델리티, 오즈의마법

youngplan.tistory.com

[서비스경험디자인기사] 5. 전달하기 Deliver (1) 개념정리 (프로토타입평가, 파일럿테스트, AEIOU, 정

youngplan.tistory.com

[서비스경험디자인기사] 5. 전달하기 Deliver(2) 개념정리 (서비스경험 청사진, 비즈니스모델 캔버

youngplan.tistory.com

[서비스경험디자인기사] 5. 전달하기 Deliver(2) 개념정리 (서비스경험 청사진, 비즈니스모델 캔버스, 서비스 스토리보드, 서비스 시나리오, 린캔버스, 가치제안캔버스, 카노모델 )

기획하는뇽뇽씨 — Sat, 25 Nov 2023 11:05:04 +0900

서비스경험디자인기사 필기, 실기시험에 핵심정보인 개념정리를 시각화하여 쉽게 정리한 포스팅입니다.

[서비스경험디자인기사] 5. 전달하기 Deliver (1) 개념정리 (프로토타입평가, 파일럿테스트, AEIOU, 정

youngplan.tistory.com

위의 포스팅은 개발하기 단계의 아이데이션, 서비스경험 구조화 및 설계에 관한 내용으로 아래의 내용과 연결되어 있으므로 참고하시면 좋겠습니다. 아래 내용은 개발하기 단계의 서비스경험디자인 모델 개발에 해당하는 서비스경험청사진, 비즈니스모델 캔버스, 서비스 스토리보드, 서비스 시나리오, 린캔버스, 가치제안캔버스, 카노모델 개념을 정리하였습니다.

5.2 서비스경험디자인 모델개발

서비스경험디자인 모델이란, 실행 가능한 수준의 서비스와 경험을 도식화하여 프로젝트를 통해 얻은 전략들을 실제 개발에 적용하기 위한 콘셉트를 정의하고 실현 가능한 디자인 방향을 수립하는 과정이다.

5.2.1 서비스 요구사항 재정의 및 전략 도출

비즈니스 측면에서 '서비스 가치 검토'란 기업의 입장에서 현실적인 여건들과 각각의 서비스 경험 가치가 적합한지를 판단하는 것으로, 주로 기업의 비즈니스 목표, 할당된 가용 자원, 가치 사슬 (기업의 프로세스, 문화, 조직), 가치 네트워크 (현재 고객이나 공급처)와 부합하는지 검토한다.

검토가 진행된 이후에는 서비스 가치 중 가장 우선시해야 할 하나의 가치에 집중하고, 나머지 다른 가치들을 재배열 하는 서비스 전략 단계를 진행한다.

전략	내용
창조전략	- 신기술을 통해 기존에 없던 것을 창조하거나 새로운 시작을 알리는 것 - 성공을 보장받기 어려우나 파급 효과는 크다
확대전략	- 기존의 서비스나 제품에 새로운 가치를 추가하여 사용자의 경험을 확대시키는 전략
틈새전략	- 기존 서비스나 제품에서 틈새 가치를 발견해서 그 공간에 새로운 시장을 만들어 내는 전략 새로운 시장의 발굴에는 어려움이 있지만, 파급효과는 크다.
재정전략	기존에 존재하는 서비스나 제품의 특성을 새로운 채널에 맞게 변화시키는 전략

5.2.2 서비스 경험 청사진 (Blueprint) ⭐⭐

⭐ 서비스경험청사진(Blueprint)
: 고객 및 이해관계자들이 서비스를 구현하고 실행하기 위해 무엇을 준비하고 실행해야 하는지 눈으로 확인할 수 있게 제시하고 점검하는 활동이다.
: 핵심 서비스 프로세스의 특성을 한눈에 알아보기 쉬운 방식으로 가시화시켜 서비스 전달 체계, 시스템 구조 등 전체를 혁신하기 위해 사용되는 방법이다.
: 즉, 청사진을 만드는 기준으로 고객을 두고 시간에 따라 어떻게 활동하고 경험하며, 서비스 요소들은 그들에게 어떻게 제공되는지에 집중해 작성한다.

가전제품 소매업체의 서비스 청사진 예시

✔ 서비스가 제공되지 위해 필요한 고객과 직접 상호작용하는 서비스 제공자의 행동, 사람, *물리적 증거들의 접점들을 표시하는 가시화영역 (Frontstage, 전방영역)과 고객과 직접 상호작용 하진 않지만 고객에게 전달되는 서비스 접점들을 위한 제공자의 활동과 사람, 물리적 증거를 표시하는 비가시화 영역(Backstage, 후방영역)으로 나뉜다.

* 물리적 증거 : 서비스가 제공되는 다양한 접점 중에서 서비스의 수행이나 지원하는 모든 유형적인 요소

고객은 이를 통해 구매 전 서비스의 가치를 측정하고, 소비기간이나 소비 후의 서비스에 대한 만족을 평가한다.
책자, 명함, 브로슈어, 웹페이지, 청구서, 사무용품 등

▶ 구성요소 ⭐

구성요소	내용
서비스 스케이프	고객이 서비스를 경험하는 유·무형의 장소 및 공간으로 물리적, 시간적, 심적 공간 등으로 다양하게 나타난다.
고객 여정	서비스 프로세스에서 관찰되는 고객의 행동과 과정을 표현
터치포인트	고객과 서비스의 모든 접점으로 특히 물리적 증거라 부르는 유형의 서비스 증거 요소를 적절히 디자인해 서비스 경험을 충실히 전달해야 한다.
상호작용선	고객과 대면 서비스 제공자를 구분하고 상호작용을 나타내는 가상의 선
전방영역 서비스 제공자	고객과 직접 만나게 되는 서비스 제공자의 활동 (대면)
가시선	볼 수 있는 모든 것들의 경계라는 의미로서, 서비스디자인에서는 서비스가 고객에게 보여지는 부분과 보이지 않고 내부적으로 운영되는 부분을 구분하는 가상의 선이자 사용자가 경험하는 모든 것의 경계선을 의미한다.
후방영역 서비스 제공자	고객과 만나지 않으므로 고객은 확인 할 수 없는 서비스 제공자의 활동 (비대면)
내부 상호작용선	비대면 서비스 제공자와 지원 프로세스를 구분하고 상호작용을 나타내는 가상의 선
지원 프로세스	서비스를 제공하기 위해 필요한 요소. 고객의 입장에서는 보이지 않고 거리가 있지만 원활한 서비스 운영과 제공을 위해 중요한 부분이다.

5.2.3 비즈니스 모델 캔버스 ⭐⭐

⭐ 비즈니스 모델 캔버스
: 새로운 비즈니스 모델 개발을 위한 '전략적 관리 템플릿' 이다. 제품이나 서비스의 가치 제안, 인프라, 고객, 재정 등을 시각적 차트 위에 제공하여 기업의 활동을 조정할 수 있는 잠재적인 절충안을 제안한다.

비즈니스 모델 캔버스

* 비용구조는 비용중심과 가치중심으로 나뉜다. 비용중심은 모든 비용을 최소화 하는 데 중점을 두고, 가치 중심은 비용에 덜 신경을 쓰는 대신 제품 및 서비스에 대한 가치 창출에 중점을 둔다.

고정비용 : 급여, 임대료 등 고정적으로 지출되는 비용
변동비용 : 상품이나 서비스의 생산량에 따라 달라지는 비용
규모의 경제 : 주문 또는 생산량이 늘어남에 따라 비용이 감소함
범위의 경제 : 제품과 직접적인 관련이 있는 다른 비즈니스를 통합하여 비용 절감

5.2.4 서비스 제공자 행동양식

서비스시각화
: 개발된 서비스를 평가 또는 실행하기 위한 가이드 제공을 목적으로 하기 때문에 서비스 전반에 대해 이해하기 쉬워야 하고 최대한 실제 상황과 흡사하게 재현하는 것이 중요하다. 그렇기에 최종 결과물인 서비스 접점 실행 방법을 명확한 가이드라인과 매뉴얼로 제공해야 한다.

전략	내용
서비스 설명서	서비스디자인 프로젝트의 범위와 구체적인 서비스에 대해 작성된 문서
서비스 목업	제안된 서비스를 시각적으로 묘사하는 모형
무드보드& 필름	서비스가 지닌 가치들을 언어적으로 표현하기 힘들 때 시각적으로 구성해 놓은것. 무드필름은 무드보드의 업그레이드 된 단계로, 오디오 요소와 영상 기법을 도입하여 서비스 분위기나 서비스 경험에 구체적인 상상력을 구축할 수 있도록 도와줌. (서비스 콘셉트 발표시 유용하게 사용됨)
서비스 증거/ 접점 디자인	서비스와 고객이 어떻게 상호작용해야 하는지에 대해 이해할 수 있도록 돕는 방법 (카드, 웹사이트, 스크린숏, 제품모형, 주변환경 및 시설에 대한 이미지 등을 보여줌)
서비스 스토리보드	서비스에 대한 이해도를 높이고, 서비스가 지닌 많은 양의 정보를 효과적으로 전달하는 방법 각 서비스 접점의 징후와 그들 간의 관계를 보여줌으로써 프로세스나 시스템을 보여줄 때 시각적으로 중요한 요소나 단계들을 가시화 함
서비스 시나리오	가상으로 만들어진 스토리, 서비스 제공의 특성을 분석하기 위한 방법. 서비스의 전체적인 스토리를 한눈에 볼 수 있기 때문에 서비스 청사진의 역할을 하며 서비스에 대한 최종 설계 가이드라인으로 평가와 검토, 이해관계자들 간의 소통의 수단으로 활용 (서비스 스토리보드, UI 명세서, 개발 명세서, 와이어프레임, 서비스 고객여정지도, 콘텐츠 인벤토리 포함)

5.2.5 서비스 구현

서비스디자인에서의 구현은 조직의 절차와 프로세스의 관리를 변화시킬 수 있을 뿐아니라 제품 개발과정 안에서의 소프트웨어 개발 또는 하드웨어 구조, 건축 등의 환경과 건물의 설계 변경을 위한 관리 구조 등을 변경시킬 수 있다.

KPI (Key Performance Indicator, 핵심성과지표) 는 다양한 자료로부터 성과를 나타내도록 정보화 하는 방법을 의미한다.

5.2.6 린 캔버스 (LeanCanvas) ⭐⭐

⭐ 린 캔버스 LeanCanvas
: 시장을 빠르게 검증하고 아이디어를 시뮬레이션 하는 것을 목적으로 한다. 고객들이 느끼는 문제점들과 가설을 반복, 검증하면서 제안된 해결안들이 시장에서 비즈니스 관점으로 충분한 설득력이 있는지를 확인하는 방법으로, 비즈니스 모델을 수립하기 전 틈새시장을 찾아내는 데 유용한 도구로 활용되기도 한다.

에쉬모리아가 비즈니스 모델 캔버스를 활용하여 만든 비즈니스 계획 플랫폼 ⭐⭐

변경 전 린 캔버스

변경 후 린캔버스

비교	비즈니스 모델 캔버스	린 캔버스
목적	- 신규 및 기존 서비스의 개선에 활용 - 어떻게 가치를 창출하고 어떻게 고객에게 전달하는가에 대한 것으로 제품이나 서비스의 핵심을 파악하는 데 용이	- 스타트업, 신규사업에 활용 - 고객 니즈를 파악하고 가설을 세워, 시장을 검증하는 반복 작업으로 빠르게 사업 과정을 시뮬레이션 하는데 용이
중점 요소	- 전략 중심의 사업 계획에 중점 - 전체 비즈니스의 고객 세그먼트, 채널 및 고객관계에 중점	- [고객-문제-해결] 관계에 중점 - 스타트업은 제품/ 서비스를 론칭하지 않았기 때문에 고객 세그먼트에 크게 중점을 두지 않음
접근법	- 핵심자원과 핵심활동을 중심으로 예상되는 비즈니스 수익흐름을 시각화 - 현재 상태를 유지하기 위해 양적/질적 측면에서 가치제안에 중점을 둠	- 문제, 제안된 솔루션, 솔루션을 달성하기 위한 채널, 관련 비용 및 예쌍되는 수익원 설계 - 제안된 교유 가치가 경쟁우위에 있는지에 대한 평가와 더 나은 기반 마련을 위해 활용
응용 및 활용	- 사업에 대한 이해, 창의성을 촉진, 토론 및 건설적인 분석에 응용 - 이해관계자들과의 브레인스토밍 워크숍이나 상품기획 단계에서 활용	- 간단한 문제 해결지향적인 접근 방식으로 창업가가 단계별로 개발할 수 있도록 함 - 소규모 팀이나 1인 디자이너가 쉽고 빠른 검증이 필요할 때 유용

5.2.7 가치 제안 캔버스 (Vlaue Proposition Canvas)

⭐ 가치제안 캔버스
: 고객(세그먼트/ 세분화) 프로필과 가치(제안) 맵의 두 부분으로 이루어져 있다.
: 가치(제안) 맵에서는 고객을 유인하기 위해 해당 고객에게 부합하는 가치를 어떤 식으로 창조할 것인지를 기술하고, 고객 프로필은 고객을 관찰하고 확인한 일련의 고객 특성들에 대해 명확한 이해를 돕는 부분이다. 이 두가지 부분이 교차하는 중간 지점에서 제품/ 서비스의 적합성에 도달하게 된다.

애드리브(Ad-Lib) 프로토타입

가치제안캔버스

ex) 우리 서비스는 (경쟁사의 가치제안과 달리) 고객들의 불만을 줄이고, 이러한 혜택을 늘리게 해줌으로써 어떠한 활동을 하고싶어하는 고객군에게 유익하다.

가치제안 캔버스로 구체화 하기 전, 설명이 가능한 문장 형태의 대안적 프로토타입 방법
가치제안 아이디어를 빠르고 간단하게 파악하여, 어떤 방향으로 가치를 창출하려고 하느지 가능성을 즉시 확인할 수 있으므로 여러 개를 만들어서 아이디어를 발전시킬 수 있는 효율적인 방법
애드리브 프로토타입을 통해 가치제안 캔버스 구체화

▶ 가치제안 캔버스 제작 순서 ⭐⭐

고객 프로필을 정확하게 정의 > 만들어진 가치를 시각화 > 제품 - 시장의 적합성 달성

가치제안캔버스 제작 순서

가치제안캔버스의 핵심은 고객의 극심한 불안과 혜택을 제품이나 서비스를 통해 해소해주는 것으로 서비스 전과 후의 차이가 뚜렷해야 한다. 또한 시각화 도구로서 공유언어로 조직 내 여러 부서들의 공동창작을 유도하고, 비즈니스에 부합하는 가치를 정확히 파악할 수 있도록 도움을 줄 수 있다. 이처럼 변화하는 시장 상황 속에서 지속적으로 성과를 측정하면서 가치를 창출하는, 제품과 서비스의 끝없는 개선 활동이라는 것을 명심해야 한다.

5.2.8 카노모델 Kano Model

⭐⭐ 카노모델
: 제품이나 서비스를 기획할 때 그 구성요소에 대해 소비자가 기대하는 것의 충족, 불충족이라는 객관적 관계와 소비자의 만족, 불만족이라는 주관적 관계 사이의 상호 관계를 5가지 품질 요소로 설정하여 설명하는 프레임워크이다.

카노모델

어떤 제품의 특성을 더하거나 향상시킬 때 혹은 어떤 요소를 제거할 때 사용자의 만족도가 증가하는지를 연구하고 이를 시각화하였다. (카노 모델의 y축은 감정적 반응, x축은 기능의 구현 수준 표시)

▶ 품질을 느끼는 주요 3가지 요소 : 고객 요구사항

Basic(불만족 요인, 기본적인 요구사항) : 당연히 있을 것으로 생각
Performance (만족요인, 가변적 요구사항) : 더 많이 제공될수록 더 만족하는 범주
Excitment (감동요인, 잠재적 요구사항) : 기대 이상의 특성 또는 매력적으로 느끼는 것

▶ 5가지 감정 반응 유형

: 각각의 요소들이 의미하는 내용에서 중요한 부분은 '시간의 흐름에 따라 변화 (매력적요소 → 일원적요소 →당연적요소) 하는 품질요소'이다. 즉, 사용자가 즐거움을 느끼는 매력적인 기능은 시간이 지나면 당연시되는 꼭 필요한 기능이 된다.

유형	정의
매력적 품질요소	충족이 되었을 경우 만족감을 제공하지만, 충족이 되지 않더라도 크게 불만족이 없는 품질요소
일차원적 품질요소	충족할 때는 만족감을 주지만, 충족되지 않을 때에는 불만족으로 이어지는 품질요소
당연적 품질요소	아무리 충족된다고 해도 당연하기 때문에 부족하거나 기준에 미치지 못하면 불만족하는 품질요소
무차별(부가적인) 품질요소	만족하는 것과 만족하지 못하는 것 사이에 품질의 차이가 느껴지지 않는 품질요소 사용자가 사용하지 않는 기능인 경우가 대부분이며, 주로 불필요한 요소를 찾아낼 때 유용하게 사용됨.
역품질요소	제품이나 서비스에 원치 않는 기능으로 고객이 기대한 것과 반대인 품질 요소

▶ 카노모델을 이용한 분석법

: 카노모델은 사용자들의 의견을 측정할 수 있도록 어느 정도 표준화된 질문의 형태를 제시하고 있다.

질문항목과 응답항목 질문지의 예시

질문항목/ 응답항목		마음에 든다	당연하다	상관없다	마음에 안 들지만 상관없다	마음에 안든다
A 긍정질문	"ㅇㅇㅇ 기능이 있다면 어떤 생각이 드는가"
B 부정질문	"ㅇㅇㅇ 기능이 없다면 어떤 생각이 드는가"

카노모델 5가지 품질요소 도출

A 긍정 질문 응답		B 부정 질문 응답		품질요소
마음에 든다	+	당연하다	→	매력적 품질요소 (Attractive)
상관없다	+	마음에 안든다	→	일차원적 품질요소 (One-Dimensional)
마음에 들지만 상관 없다	+	마음에 안든다	→	당연적 품질요소 (Must-be)
상관 없다	+	상관없다	→	무차별적 품질요소 (Indifferent)
마음에 안 든다	+	마음에 안들지만 상관없다	→	역품질요소 (Reverse)

카노모델 Matrix 분석⭐⭐

고객요구		B : 부정적인 질문 응답
고객요구		마음에 든다	당연하다	상관없다	마음에 안들지만 상관없다	마음에 안든다
A 긍정적인 질문응답	마음에 든다	Q	A	A	A	O
	당연하다	R	I	I	I	M
	상관없다	R	I	I	I	M
	마음에 안들지만 상관없다	R	I	I	I	M
	마음에 안든다	R	R	R	R	Q

* Q (Questionable-의심스러운 답) : 설문을 이해하지 못했거나 또는 응답자가 품질에 대한 이해도가 낮은 것이 원인이 될 수 있다.

▶ 카노모델의 장점

우선순위를 결정하는 데 도움이 된다. 고객에게 더 큰 만족을 주는 제품과 서비스를 제공할 확률이 높아진다.
특정 기능이 왜 고객에게 더 중요한지 알 수 있도록 함으로써 불필요한 개발시간을 줄여준다.

긴 글 읽어주셔서 감사합니다.

다음 포스팅에서는 서비스경험디자인 6. 완료하기 단계의 포스팅으로 찾아올게요.

▼ 서비스경험디자인기사 다른 글▼

[서비스경험디자인기사] 0.서비스경험디자인의 이해 (디자인씽킹, 서비스디자인, 사용자경험디

youngplan.tistory.com

[서비스경험디자인기사] 1.준비하기 Align 개념정리 (제안요청서, 사전질의서, 디자인브리프, 알렌

youngplan.tistory.com

[서비스경험디자인기사] 2. 발견하기 Discover _ (1) 환경조사 개념정리 (데스크리서치, 2차연구, PEST,

youngplan.tistory.com

[서비스경험디자인기사] 2. 발견하기 Discover(2) 관찰조사 개념정리 (자문화기술지, 온라인 에스노

youngplan.tistory.com

[서비스경험디자인기사] 2. 발견하기 Discover (3) 관찰조사 개념정리 (비참여관찰, 모바일에스노그

youngplan.tistory.com

[서비스경험디자인기사] 3. 정의하기 Define 개념정리 (페르소나, 고객여정지도, 사일로현상, 이해

youngplan.tistory.com

[서비스경험디자인기사] 4.개발하기 Devlop (1,2)개념정리 (공동창작, 퍼실리테이션, 브레인스토밍,

youngplan.tistory.com

[서비스경험디자인기사] 4. 개발하기(3) 개념정리 (프로토타입, 로우/하이 피델리티, 오즈의마법

youngplan.tistory.com

[서비스경험디자인기사] 5. 전달하기 Deliver (1) 개념정리 (프로토타입평가, 파일럿테스트, AEIOU, 정

youngplan.tistory.com

[서비스경험디자인기사] 5. 전달하기 Deliver (1) 개념정리 (프로토타입평가, 파일럿테스트, AEIOU, 정성적데이터분석, 정량적데이터분석, 사용성평가, 휴리스틱평가)

기획하는뇽뇽씨 — Fri, 24 Nov 2023 13:20:44 +0900

서비스경험디자인기사 필기, 실기시험에 핵심정보인 개념정리를 보다 쉽고, 이해될 수 있도록 정리한 포스팅입니다.

아래의 내용은 전달하기 단계의 프로토타입 평가에 해당하는 파일럿테스트, AEIOU, 정성적데이터분석, 정량적데이터분석, 사용성평가, 휴리스틱평가의 개념을 정리하였습니다.

5. 전달하기 Deliver

서비스디자인의 Deliver(전달) 과정은 앞선 아이디어들에 대한 다양한 의견을 수렴하여 서비스경험디자인 과정동안 만들었던 콘셉트와 제안들을 명료하게 전달하는 과정이다.

5.1 프로토타입 평가

서비스 디자인 중반부 프로토타이핑 - 아이디어 전개과정에서 이루어지는 낮은 충실도(Lo-Fi)로 신속하게 제작되면서 이해관계자들 간의 활발한 상호작용을 통해 서비스 콘셉트를 검토하고 테스트하며 발전시키는데 목표
전달(Deliver) 과정 프로토타이핑 - 충실도가 높으며 (Hi-Fi) 시간이 걸리더라도 상세하게 서비스를 테스트 할 수 있도록 정교한 작업, 고객 반응 및 시장 반응을 최종적으로 확인하여 평가하기 위한 목적

5.1.1 프로토타입 평가 목표

프로토타입 평가는
제안된 서비스가 초기의 기획 의도와 가치를 제대로 구현했는지 확인함과 동시에 사용자와 이해관계자들로부터 평가를 받음으로써 실제 구현단계에 들어가기 전에 품질과 성능을 확인하기 위한 것이다.

	프로토타입 평가목표	목적
이해	제품과 서비스에 대한 고객의 핵심 문제와 개발단계에서 인지하지 못하는 다양한 문제를 다룰 수 있다.(Lo-Fi)	- 다른 대안의 선택 - 고객 플로우에 대한 이해 - 전략에 대한 이해
소통	추상적인 해결책을 물리적 매체 혹은 디지털 미디어를 통해 명료하게 드러내므로, 모호하고 일반화된 생각들을 구체적인 오브젝트로 바꿀 수 있다.	- 디자이너와 소통 - 이해관계자와의 소통 - 투자자와의 소통
평가와 개선	문제가 제대로 해결되고 있는지 사용자 평가를 통해 확인 받고자 하며, 이 평가가 이해관계자들의 합의 안에서 서비스 설계의 고도화를 진행하게 된다.	- 고객/사용자 평가 - 가설검증(사용성, 가치 제안, 비즈니스 전략을 위한 내용으로 구성) - 고객과의 직접적인 상호작용
지지와 옹호	고객의 통찰력을 활용하므로 고객이 보여주는 사용자경험의 변화들을 적극적으로 지원할 수 있다. 또한 팀원들 또는 이해관계자들의 평가에도 활용된다.	- 인사이트를 통해 실제 서비스/ 제품에 적용 - 팀원들/ 이해관계자 간의 관계성 향상

5.1.2 프로토타입 평가 과정

프로토타입 평가 방법은 프로토타입의 형식, 일정과 예산, 목적, 대상자에 따라 달라질 수 있다.
평가는 방법과 대상, 형태, 진행에 따라 내용이 달라지기에 프로토타입에 대한 반응을 볼 것인가, 프로토타입에 대한 문제점을 진단할 것인가에 따라 목적을 명확하게 정의하는 것이 필요하다.

1. 평가를 위한 사전준비

평가 계획
진행자 및 참여자 선정
평가 공간 및 기록물 준비
동의서 및 사전, 사후 질문지 준비

2. ⭐파일럿 테스트
: 정식 평가를 진행하기 앞서 준비된 프로토타입과 평가의 목적이 서로 부합한가를 확인하기 위해 진행한다.

사용성평가에서의 파일럿 테스트 (동시 혹은 순차적으로 진행)

목적	효과	비고
기술체크	최소인원과 최소 시간 설정이 필요함, 제품 생산 시 품질보증 엔지니어가 사용하는 에지 케이스를 돌려보기 위하여 사용하는 체크리스트와 비슷함	* 에지 케이스 (edge case) 극단적인 상황에서 발생하는 문제나 상황
사용성 체크	참여자 평가 시, 평가하고자 하는 과업을 제대로 이해하는지, 과업을 진행하기 위해 내비게이션을 할 수 있는지 등을 확인하는 과정으로, 2-3명의 인원이 2-3시간 정도의 과정을 거침	가이드를 포함한 평가에 대한 소개, 사전질문지, 일반질문과 과업들, 참여자가 접하게 될 서비스, 평가의 전반적인 흐름과 수행시간, 평가 결험에 대한 전반적인 만족도 등
데이터 체크	대규모 인원을 대상으로 참여자 수에 비례하여 예행연습을 수행하는 단계. 데이터의 질적인 면과 데이터의 '분별'에 더 집중함.	오류를 범하는 이유 - 시간이슈, 다른 답변/경로, 기술적 결함, 해석의 오류 등

3. 프로토타입 평가 실행
: 평가 진행 시에는 진행자, 부진행자, 기록자, 참여자를 도와주는 사람, 기록장치 담당자, 평가 장소 담당자 등으로 나누어 진행한다.

프로토타입 평가 실행 방법

프로토타입 평가 실행방법

5.1.3 프로토타입 평가 결과 분석

프로토타입 평가 후 생성된 미가공 데이터를 취합한 수 데이터를 분류하고 분석하여 최종보고서를 통해 이해관계자들에게 배포하고 보완한다. 프로토타입 평가 데이터는 관찰과 인터뷰 등을 통해 얻은 정성적 데이터와 사용성 평가 등으로 얻은 정량적 데이터로 나뉜다.

1. 정성적 데이터 분석 (관찰 및 인터뷰)

정성적 데이터
: 대부분 인터뷰나 관찰 등을 통해 나온 주관적 데이터로, 참여자들의 특정한 심리속성을 이해하기 위해 분석적 도구로 사용된다. (언어적 표현, 비언어적 표현, 행동, 맥락 등)

분석방법 : 데이터 실체화 (⭐친화도지도, 리서치 윌) → 데이터분류 (⭐*AEIOU 등) → 데이터분석 (⭐고객여정지도, 서비스 터치포인트 매트릭스) →이슈 사항 도출 및 작성
*AEIOU : 요소별 행동 측면에서 관찰조사 데이터를 분류하여 작성한 후 이에따른 통찰 등 한눈에 알아보기 쉽도록 정리한 기록지이다.

Activity 활동 : 사람들은 어떤 행동을 하며 목적과 과정은 무엇인가요?
Environment 환경 : 활동이 일어나는 시간·공간적 환경, 분위기는 어떤가요?
Interaction 상호작용 : 사람 간 또는 사람과 환경 사이 어떤 상호작용이 있나요?
Object 대상 : 어떤 사물과 도구를 사용하며 활동에 어떤 영향을 주나요?
User 사용자 : 관찰환경 내 누가 있고, 역할, 관계, 행동 등은 어떤가요?

2. 정량적 데이터 분석(사용자 평가)

정량적 데이터
: 사용성 평가 등 실증연구에서 진행된 평가 결과로 변수 또는 수량, 상호간의 관계를 드러내는 숫자 데이터 등이 포함된다.

A. 정량데이터 준비하기

분류	내용	비고
성공데이터	성공변수를 기록하는 방법, 텍스트 데이터를 숫자로 바꾸는 방법	ex) "1"은 성공, "0"은 실패를 의미하는 것으로 빈도분석, 교차분석, 카이제곱분석 같은 기본적인 통계함수 수행을 위해 필요하다.
시간변수	과업을 진행하면서 걸린 시간을 표시하는 것
자가보고변수	자가 보고 변수의 척도가 긍정에서 부정으로, 혹은 부정에서 긍정으로 바뀐 경우와 같이 평가 태도가 달라지게 한 변수들을 나열하는 것이 유용하다.	전반적인 만족도, 사용용이성에 대한 평가, 과업에 대한 신뢰와 같은 자가 보고 변수들은 따로 변환 또는 기록할 필요가 없다.
클릭 스트림 데이터	참여자들이 *과업을 수행하는 동안 어떻게 이동했는지 보여주는 상세한 로그기록**	로그(Log) 정보기술에서 발생되는 모든 행위와 이벤트 정보를 시간에 따라 남기는 기록 데이터*를 의미한다. 일반적으로 방문한 화면, 화면 별 소요시간, 이동 경로 등을 보여줌으로써 서비스를 얼마나 쉽게 이용했는지, 어떤 화면이 얼마나 혼란을 주었는지, 어떤 화면과 기능이 목표에 도착할 때까지 중요한 역할을 했는지에 대한 내용을 제공한다.

B. 정량데이터 분석하기

데이터 경향을 파악하고 과업, 조건, 평가 참여자 간 차이점을 알아봄으로써 디자인상의 사용성/ 유용성/ 효과성 등의 이슈를 식별하거나, 디자인 간 또는 버전 간 차이를 비교해야 한다. 정량적인 데이터는 빈도수를 합산하거나 평균, 표준편차 등을 구해서 그래프로 나타낼 수 있다.

분류	내용(기준)
과업성과 데이터	참여자의 행동을 대변한다. (과업 성공 여부, 시간, 효율성)
자가보고 데이터	참여자의 반응을 나타내는 것으로 개별적인 과업과 세션 수준에서 수집된 것이다. (평가척도, 선호대상, 순위, 코멘트, 추가답변)
클릭 스트림 데이터	사용자의 니즈와 페인포인트를 확인해 볼 수 있다.

C. 핵심이슈 도출하기

대부분의 정량적 평가에는 디자인에 대한 사용성 이슈를 식별하거나 디자인 대안을 비교하는 활동을 통해 핵심이슈를 도출하는 과정이 포함된다.

분류	내용
문제 과업에 대한 초점	- 낮은 과업 성공률, 가장 긴 시간, 제일 낮은 과업의 용이성 등을 통해 문제가 되는 과업을 추출 * 클릭 스트림 데이터를 이용하면 과업을 실패한 참여자의 이동 경로를 찾아낼 수 있으므로 문제가 되는 지점에 대한 인사이트를 제공 받을 수 있다.
오류 분석	사용성 이슈가 오류를 만들어내고, 오류가 사용성을 만들어 내기 때문에 참여자가 오류를 일으켰을때, 사용성 이슈를 식별하는 데 도움을 준다.
코멘트 분석	과업별 참여자, 사용자들의 의견들 간에 숨어 있는 공통 주제를 찾아내고, 참여자가 지적한 근본적인 사용성 이슈를 발견하는 것이 중요하다.

▶ 사용성 평가 척도

시스템 성능 측정과 사용자 성능 측정이 포함되어 있기 때문에 경쟁사들과의 평가, 출시 전 의사결정이 가능하다.
(시스템 응답시간, 발생 에러 수, 과업을 완료하기까지 소요되는 시간, 과업 성공률, 사용자 만족도 평가 등이 포함되는 평가 척도)

유용성 : 참여자들이 특정 목표를 달성하기까지의 정확성과 완전성
효율성 : 사용자들이 원하는 목표를 달성하기 위해 정확성과 완전성에 기울이는 자원
만족도 : 사용에 대한 편리성 및 수용성

5.1.4 프로토타입 보완 및 문서화

프로토타입은 평가와 보완의 반복적인 과정을 진행하면서 최적화된 프로토타입을 제작한다.

프로토타입 보완 및 문서화

▶ 핵심사항 공유

: 보고서를 만들기 전에 문제 해결 방법과 평가를 통해 확인된 기회들을 극대화 하기 위한 여러 변경 사항에 대해 이해관계자로부터 승인을 받기 위해 이슈사항, 개선사항, 해결책, 권고사항들을 공유한다.

▶ 평가결과 문서화

: 보고서 개요/ 참여자에 대한 정보/ 보고서 해석 방법/ 명확한 핵심 사항 및 다음 단계

5.1.5 사용성 평가(Usability Test)

실제 대상 고객과 사용자를 불러와서 직접 사용하는 상황을 제공하고 주어진 과업과 단계를 수행하도록 요청함으로써 실제 의견을 듣고 사용하는 모습을 관찰한다.
정확도, 효율성, 시간, 에러 발생률 등 수치적인 측정을 통해 프로토타입에 대한 사용자들이 느끼는 사용성 품질을 정량적으로 평가한다.

유형	탐구형	평가형	비교형
방식	- 와이어프레임 - Lo-Fidelity 프로토타입	- Mid, Hi-Fidelity 프로토타입	- 두 가지 이상의 다양한 제품과 서비스 비교
목적	- 콘셉트 이해도 확인 - 제품 사용 시 사용자의 멘탈 모형이 어떻게 작동하는지 알아내기 위해 사용	- 앱이나 웹 사이트의 효율성 평가 - 사용자들의 반응 관찰 - 시스템상 에러 수집	- 게릴라 테스트 - 불특정다수를 대상으로 무작위로 대상자를 선정하여 평가받는 방식 - 구체적인 사용성 보다는 고객의 호응도/ 선호도 측정

▶ 일반 사용성 평가

일반 사용성 평가

1. 실험실 사용성 평가 (대면테스트, 평가자와 사용자가 동시에 같은 장소에서 상호작용)
: 평가를 진행하기 위해서는 스크립트, 프로토콜 문서가 사전에 작성되어야 하며, 그 안에 들어가는 구성은 소개, 사전인터뷰 내용, 과업목록, 사후 인터뷰 내용을 포함하고 있다.

2. 사용성 평가 (원격으로 사용자에게 일련의 도전과 과업을 부여하고 질의응답)
: 원격 사용성 평가는 평가자와 개발자, 참여자가 처한 물리적인 한계를 극복하게 하고, 동시에 참여자의 평소 작업 및 기술의 맥락 안에서 평가를 진행하여 더 자연스러운 결과를 얻을 수 있다는 이점이 있다.

동기식 원격 사용성 평가	진행자가 평가를 진행하는 실시간 커뮤니케이션 방식
비동기식 원격 사용성 평가	진행자 없이 참여자와 진행자/평가자가 서로 다른 시간대에 평가를 하는 방법 평가 진행 순서 : 과업 소개 > 사전 질문 준비 > 파일럿 테스트 수행 > 과업/ 평가 수행 후 만족도 조사*

3. 전문가 평가
: 제안된 서비스나 프로토타입의 사용성 문제를 확인하기 위해 사용성 원칙, 인지심리학의 원리를 이용하여 전문가의 시각으로 검사하는 과정이다.

4. ⭐휴리스틱 평가
: 가장 일반적인 품질측정 방법으로 서비스의 성능과 품질이 적절한지를 평가하는 발견적 조사방법이다.

서비스 디자이너, 서비스 경험 디자이너, 사용성 전문가, 사용자 인터페이스 전무나, 정보 구조 전문가 등 전문가들이 서비스 품질과 가치의 관점에서 전문적인 지식과 경험을 기반에 두고 평가하며, 전문가의 지식과 경험, 노하우로 빠르게 서비스를 평가하여 문제점 및 개선 방향을 제시 할 수 있다.
(*휴리스틱이란 시간이나 정보가 불충분할 때 사용자가 합리적인 판단을 할 수 없거나, 굳이 체계적인 판단을 할 필요가 없는 상황에서 신속하게 사용하는 어림짐작의 기술을 의미한다.)

휴리스틱 평가

⭐제이콥 닐슨이 정리한 휴리스틱의 기준

✔ 시스템 상태의 가시성

✔ 시스템과 현실 세계의 일치

✔ 사용자 제어 및 자유

✔ 일관성 및 표준

✔ 오류 방지

✔ 회상보다 인정

✔ 사용의 유연성과 효율성

✔ 미학적이고 미니멀한 디자인

✔ 사용자 오류 인식, 진단 및 복구

✔ 도움말 및 문서

긴 글 읽어주셔서 감사합니다.

다음 포스팅에서는 서비스경험디자인 전달하기 단계의 모델 개발 방법 포스팅으로 찾아올게요.

▼서비스경험디자인기사 개념정리 다른 글▼

[서비스경험디자인기사] 0.서비스경험디자인의 이해 (디자인씽킹, 서비스디자인, 사용자경험디

youngplan.tistory.com

[서비스경험디자인기사] 1.준비하기 Align 개념정리 (제안요청서, 사전질의서, 디자인브리프, 알렌

youngplan.tistory.com

[서비스경험디자인기사] 2. 발견하기 Discover _ (1) 환경조사 개념정리 (데스크리서치, 2차연구, PEST,

youngplan.tistory.com

[서비스경험디자인기사] 2. 발견하기 Discover(2) 관찰조사 개념정리 (자문화기술지, 온라인 에스노

youngplan.tistory.com

[서비스경험디자인기사] 2. 발견하기 Discover (3) 관찰조사 개념정리 (비참여관찰, 모바일에스노그

youngplan.tistory.com

[서비스경험디자인기사] 3. 정의하기 Define 개념정리 (페르소나, 고객여정지도, 사일로현상, 이해

youngplan.tistory.com

[서비스경험디자인기사] 4.개발하기 Devlop (1,2)개념정리 (공동창작, 퍼실리테이션, 브레인스토밍,

youngplan.tistory.com

[서비스경험디자인기사] 4. 개발하기(3) 개념정리 (프로토타입, 로우/하이 피델리티, 오즈의마법

youngplan.tistory.com

[서비스경험디자인기사] 4. 개발하기 Devlop (2) 개념정리 (프로토타입, 로우/하이 피델리티, 오즈의마법사, 서비스 스토리보드, 서비스시연, 서비스모형, MVP)

기획하는뇽뇽씨 — Thu, 23 Nov 2023 15:03:44 +0900

서비스경험디자인 기사 필기, 실기시험에 핵심정보인 개념정리를 시각화하여 이해하기 쉽게 정리한 포스팅입니다.

[서비스경험디자인기사] 4.개발하기 Devlop (1,2)개념정리 (공동창작, 퍼실리테이션, 브레인스토밍,

youngplan.tistory.com

위의 포스팅은 개발하기 단계의 아이데이션, 서비스경험 구조화 및 설계에 관한 내용으로 아래의 내용과 연결되어 있으므로 참고하시면 좋겠습니다. 아래 내용은 개발하기 단계의 프로토타입 개발에 해당하는 프로토타입, 로우/하이 피델리티, 오즈의 마법사, 서비스 스토리보드, 서비스시연, 서비스모형, MVP 개념을 정리하였습니다.

4.3 프로토타입 개발

4.3.1 프로토타입에 대한 이해

프로토타입
: 최종제품 / 서비스의 특징을 재현하여 확인하고 평가한 후 수정 보완하는 반복적 과정을 통해 더 나은 최종 결과물이 나오도록 한다.

목적 : 새로운 아이디어 생성/ (다양한 이해관계자 간) 의사소통 / 평가 및 검증을 위한 도구

Product Prototyping	UI/UX Prototyping	Service Design Prototyping
디자인 대상 제품의 목업(Mock-up)을 만드는 것으로 제품의 외관, 사용성 등을 종합적으로 확인하고 테스트하기 위해 사용된다.		물리적 제품이나 화면 등, 서비스 이해관계자들이 개발된 서비스 컨셉 시나리오 대로 행동하는 과정을 통해 서비스의 컨셉을 확인하고 검증할 수 있다.
제품의 디자인을 설계적으로 평가해볼 수 있으며, 렌더링 등 평면상에서 파악하기 어려운 문제점을 보다 정확하게 파악할 수 있다.	화면(스크린)과 사람과의 상호작용을 확인하고 테스트 할 수 있다.	사용자가 서비스를 경험하는 연속적인 시간을 테스트하는 것이며, 실제 모든 서비스 경험을 테스트 하는 것을 말한다.

4.3.2 서비스 프로토타이핑의 이해

서비스 경험 프로토타이핑
: 다양한 이해관계자의 생각과 창의적 의견을 적극적으로 반영하고 발전시켜 더 가치 있는 경험을 고객에게 제공하기 위한 노력의 과정이다.

생각을 구체화하여 앞으로 이루어질 상황을 예측, 자연스러운 피드백 유도로 커뮤니케이션을 활성화
콘셉트로 정리된 해결 방안을 직관적으로 판단할 수 있는 물리적 형태로 변환 (그림, 만화, 이야기, 스토리보드, 실물 형태의 목업, 역할극)

▶ 진행순서

프로토타입을 어떤 형태로 전달할지 콘셉트, 일정, 예산 등을 논의해 정한다.
고객여정과 서비스 콘셉트를 프로토타입에 어떻게 반영할지 정리한다.
서비스를 현실화하는 데 필요한 소품을 만들고 공간을 구성한다.
프로젝트 목적에 맞는 참여자를 모집해 서비스와 서비스 접점이 어떤 경험을 만드는지 체험하고 평가한다.
참여자들의 피드백 내용을 분석해 개선이 필요한 부분을 찾고 수정한다.

4.3.3 프로토타입의 유형 분류 ⭐

분류	세부분류	내용
최종결과물과 유사성에 따른 분류	로우 피델리티	- 최종 제품과 기본적인 속성, 즉 크기와 무게 등의 유사성이 낮은 모델 - 전통적인 디자인 프로세스 (스케치, 스토리보드, 와이어프레임 등) - 간단히 작업해 프로젝트의 방향성을 확인*
최종결과물과 유사성에 따른 분류	하이 피델리티	- 후기 서비스 디자인 프로토타이핑에 해당 (충실도가 높은 모델) - 시제품에 가깝게 구현하여 완성된 서비스 콘셉트를 효과적으로 전달하고 검증
프로토타입의 기능 범위 및 정도에 따른 분류	수평적 프로토타입	- 세부적이지는 않지만 다양한 기능과 콘셉트를 포함하여 최종 결과물을 전반적으로 예상해 볼 수 있는 프로토타입 (넓게)
프로토타입의 기능 범위 및 정도에 따른 분류	수직적 프로토타입	- 몇몇의 소수 기능들을 세부적인 수준까지 구현하여 보다 정밀한 상황을 예측, 검증할 수 있는 프로토타입
디자인 대상에 따른 분류	하드웨어 중심	- 가구, 생활용품 등 자체적 인터랙션이 거의 없는 디자인 과정 - 스케치, 컴퓨터를 활용한 3D 모델링, 제품모형 등 전통적인 하드웨어 중심의 프로토타이핑
디자인 대상에 따른 분류	소프트웨어 중심	- 멀티미디어 타이틀, 웹사이트, 게임 등 소프트웨어 중심의 프로토타이핑

4.3.4 서비스경험 프로토타입 방법 ⭐⭐

서비스 개발과 테스트 목적으로 고객 여정이 반영된 경험을 제공해 고객의 반응을 관찰하고 서비스를 검증하는 활동이다. 마치 실제 상황처럼 서비스를 경험할 수 있게 구현하는 것이다.

▶ 활용시기 및 완성도에 따른 프로토타이핑 방법 ⭐⭐

프로토타입방법

디자인 초기 단계 : 아이데이션을 위한 Lo-fi(Low-Fidelity) 프로토타이핑 방법 활용
디자인 후기 단계 : 평가를 목적으로 한 Hi-fi(High-Fidelity) 프로토타이핑 방법 적용

▶ 프로토타입 방법론 분류

페이퍼 프로토타이핑 (Paper Protyping)	- 종이와 펜으로 제작과 피드백을 하는 활동 - 실행이 쉽고 빠르며, 피드백 반영이 용이함
비디오 프로토타이핑 (Video Prototyping)	- 서비스 스토리보드를 영상물의 형태로 제작 - 3막 구조 (설정-전개, 대립-해결)
디지털-인터랙티브 프로토타이핑 (Digital Interactive Prototyping)	- 디지털 기반의 전문 소프트웨어를 활용해 프로토타입 제작 - 간단히 작업해 프로젝트의 방향성을 확인할 수 있는 툴 (Lo-Fi Prototype) - 명령어와 조건문을 통해 완성도를 높여 더욱 실제에 가까운 모습을 보이고 반응을 살필 수 있는 툴 (Hi-Fi Prototype)
하드웨어 프로토타이핑 (Hardware Prototyping)	- 피지컬 컴퓨팅(임베디드 디바이스)과 디지털 제작 (물리 디자인)을 도입하여 동작하는 사물로 구현 - 최종 결과물의 생산을 위한 투자나 일정들의 요소를 세부적으로 예측할 수 있는 장점
⭐오즈의 마법사 (Wizard of OZ, WOZ)	- 보이지 않는 공간에 마법사 역할을 하는 사람이 상주하여, 각 수행업무마다 상황에 필요한 프로토타이핑을 신속하게 제공함으로써 시스템이나 서비스의 기능 수행 - 퍼실리테이터 ↔ 사용자 ↔전문가 (마법사) - 아직 완성되지 않은 시스템을 설계하거나 프로그램의 인터페이스를 설계하고자 할때, 혹은 현실적으로 불가능한 기술이나 상황이 발생한 경우에 시스템의 목적과 기능에 대한 시나리오를 기반으로 프로토타이핑 진행 (실제 구현하기 어려운 인공지능 프로젝트의 평가) → 퍼실리테이터, 전문가는 두개의 컴퓨터 시스템 역할을 담당
⭐서비스 스토리보드 (Service Storyboard)	- 시나리오를 기반으로 스케치나 사진 등의 이미지를 활용해 사용자가 서비스를 활용하는 과정을 구현 (어떤 사건의 특정 상황을 그림이나 사진을 이용해 시각화) - 화면 중심의 설계사양서를 의미하는 웹프로젝트에서의 스토리보드는 와이어프레임을 기반으로 표현 - 3막 구조 (설정-전개,대립-해결)
⭐서비스시연 (Service Staging)	- 연극 리허설처럼 상황극 형태로 시연해 보면서 시나리오와 프로토타입을 실제로 경험해 보는 방법 - 참여자들은 서비스에 등장하는 고객, 직원, 관리자 등의 역할을 서로 바꾸어 가며 연기하는 역할극의 과정을 수행하며 서비스 콘셉트를 체험하고 어떤 문제점이 생길 수 있는지 경험한다.
⭐서비스모형 (Desktop Walkthrough)	- 책상 위에서 서비스 환경을 작은 모형으로 구현해 실제처럼 재현하는 방법 - 레고나 종이 인형과 같은 작은 모형으로 프로토타입을 만들고 페르소나를 토대로 만든 캐릭터로 상호작용을 시뮬레이션에 활용
⭐MVP : 최소존속제품/ 최소실행제품 (Minimum Viable Product)	- MVP의 속성은 만들고, 측정하고, 학습하는 과정을 반복적으로 수행하는 것이다. - (Minimum : 시간과 자원을 최소환으로 투자해 핵심 기능 위주로 구현, Viable : 고객에게 가치를 보여주고, 사업 가설 검증)

▶ 프로토타이핑의 필요성과 가치

창의성 극대화
커뮤니케이션 오류의 최소화
시간, 노력, 비용의 최소화

긴 글 읽어주셔서 감사합니다.

다음 포스팅에서는 05. 전달하기 Deliver (1) 프로토타입 평가 포스팅 내용으로 찾아올게요.

▼서비스경험디자인기사 개념정리 다른 글▼

[서비스경험디자인기사] 0.서비스경험디자인의 이해 (디자인씽킹, 서비스디자인, 사용자경험디

youngplan.tistory.com

[서비스경험디자인기사] 1.준비하기 Align 개념정리 (제안요청서, 사전질의서, 디자인브리프, 알렌

youngplan.tistory.com

[서비스경험디자인기사] 2. 발견하기 Discover _ (1) 환경조사 개념정리 (데스크리서치, 2차연구, PEST,

youngplan.tistory.com

[서비스경험디자인기사] 2. 발견하기 Discover(2) 관찰조사 개념정리 (자문화기술지, 온라인 에스노

youngplan.tistory.com

[서비스경험디자인기사] 2. 발견하기 Discover (3) 관찰조사 개념정리 (비참여관찰, 모바일에스노그

youngplan.tistory.com

[서비스경험디자인기사] 3. 정의하기 Define 개념정리 (페르소나, 고객여정지도, 사일로현상, 이해

youngplan.tistory.com

[서비스경험디자인기사] 4.개발하기 Devlop (1,2)개념정리 (공동창작, 퍼실리테이션, 브레인스토밍,

youngplan.tistory.com

[서비스경험디자인기사] 4.개발하기 Devlop (1)개념정리 (공동창작, 퍼실리테이션, 브레인스토밍, 바디스토밍, 만다라트, 여섯색깔 모자기법, 스캠퍼, 서비스 터치포인트 매트릭스)

기획하는뇽뇽씨 — Thu, 23 Nov 2023 11:16:57 +0900

서비스경험디자인 기사 필기, 실기시험에 핵심정보인 개념정리를 시각화하여 이해하기 쉽게 정리한 포스팅입니다.

아래의 내용은 개발하기 단계에 해당하는 공동창작, 퍼실리테이션, 브레인스토밍, 바디스토밍, 만다라트, 여섯 색깔 모자기법, 스캠퍼, 서비스 터치포인트 매트릭스 개념을 정리하였습니다.

4. 개발하기 Devlop

아이디어를 발전시키기 위한 워크숍, 공동창작 진행방법과 서비스 디자인을 발전시키기 위한 프로토타입, 서비스 시나리오 개발 등에 대하여 알아본다.

4.1 아이디어 또는 해결책을 모색하는 단계 : 아이데이션 (ideation)

아이데이션(ideation)
: 아이디어 그 자체가 아닌 아이디어 도출과정, 즉 새로운 아이디어 생성, 발전, 커뮤니케이션 등의 과정
: 다양한 이해관계자와의 공동창작(Co-creation), 퍼실리테이션(Facilitation)의 중요성, 시각적 사고 등이 중요하게 고려된다.

4.1.1 공동창작(Co-creation) 관점의 접근

공동창작(Co-creation) ⭐
: 한 개인이 아닌 두 사람 이상의 집단 활동에서 나타나는 창의성
: 모두 동등한 위치에서 함께 창조적인 활동을 하거나 문제 해결을 위해 창조적으로 접근하는 방법을 의미

▶ 공동디자인 워크숍 Co-design workshop

공동디자인 : 공동창작의 개념을 디자인 과정에 적용
사용자를 비롯한 이해관계자들을 디자인 과정에 적극적으로 참여시켜 결과를 도출하는 방법

▶ 진행단계

워크숍의 목적과 참가자 선정하기
사전 과제로 주제에 대해 미리 생각하도록 하기
경험을 공유하고 상호 이해하기(공감대 형성)
아이디어 생각해 내기
아이디어 발표하고 토론하기
워크숍 결과 해석 및 요약하기

4.1.2 퍼실리테이션(Facilitation)의 중요성

퍼실리테이터(Facilitator, 촉진자/매개자) ⭐
: 워크숍의 진행을 맡는 사회자 역할과 더불어, 참여자들이 문제를 해결하도록 돕는데 집중한다.

▶ 퍼실리테이터의 역할

참여자들의 경험이 적극적으로 반영될 수 있게 다양한 시도 장려, 서로의 아이디어를 발전시킬 수 있도록 유도
사람들이 자유롭게 의견을 내고 충분한 논의를 거쳐 해결책을 이끌어 낼 수 있도록 중립적인 입장 유지
누구에게나 익숙하고 쉬운 시각화 방법 고려
다양한 이해관계자들이 모여 단기간에 아이디어를 도출하기 때문에 문제점을 최소화하기 위한 마인드셋 필요

4.1.3 아이데이션 진행 과정

분석활동에서 찾아낸 통찰과 디자인 원칙 등에 근거하여 아이디어를 생성하고 확장, 구체화한 후 정리
진행 과정 : 아이데이션 활동 준비 > 아이디어 리서치 > 우선순위 선정 > 콘셉트 스케치 및 시나리오 작업 과정 등

✍ [아이데이션 1단계] 기회 영역 만들기
: 문제점을 해결할 수 있도록 미래 지향적, 생산적인 방향으로 아이디어를 재구성, 기회영역으로 만들어 주는 단계

분류	HMW기법 (How Might We)	'만약에' 기법(What if?)
정의	- 우리가 어떻게 ~를 해결할 수 있을까?에 대한 질문 - 문제 해결에 중심을 두는 방법	- 만약에 ~라면 어떨까?에 대한 질문 - 미래의 시나리오 상상에 중심을 두는 방법 - 공정에 잠재하고 있는 위험요소에 의해 야기될 수 있는 사고를 사전에 예상·질문을 통하여 확인·예측하여 공정의 위험성 및 사고의 영향을 최소화하기 위한 대책을 제시하는 방법
작성방법	1. 사용자 여정별 Pain Point를 정리하여 인사이트 도출 2. HMW 형식으로 Pain Point를 디자인 솔루션이 나올 수 있는 질문형으로 바꿔서 접근 3. 디자인 콘셉트에 해당하는 솔루션 방향으로 구체화	1. 방법을 적용할 기존 제품이나, 개념, 아이디어 선택 2. What if를 기반으로 한 질문을 통해 아이디어 도출 3. 질문에 근거한 가능한 많은 아이디어를 만듦 4. 분석 후 우선순위 지정 5. 프로토타입을 할 수 있는 아이디어를 선택

✍ [아이데이션 2단계] 해결책 도출하기 (아이데이션 방법론) ⭐⭐

브레인스토밍 Brainstorming	- 하나의 주제에 대해 참가자들이 자유롭게 의견을 제시하면서 아이디어를 만들어 내는 토론 형식의 아이디어 개발 기법 - * 역브레인스토밍 : 이미 만들어 놓은 아이디어에서 생길수 있는 문제점을 비판하기 위해 사용하는 방법 (브레인스토밍과 비슷, 아이디어 평가에 주로 사용) - 7원칙 (아이디어 판단보류/ 엉뚱한 아이디어 장려/ 다른사람의 아이디어를 기반으로 발전/ 주제에 집중/ 시각적인 표 활용/ 한번에 한가지씩 이야기/ 질보다 양 추구)
바디스토밍 Bodystorming	- 연극 기법을 활용하여 사용자의 경험을 몸으로 직접 표현하는 체험형 브레인스토밍 방법 - 서비스의 접점이 특정한 제품이나 사물일 경우, 간단한 소품을 활용하여 아이디어를 구상할 수 있으며 시각적으로 확인하고 체험하며 새로운 인사이트를 발견하는 방법론
브레인라이팅 BrainWriting	- 침묵의 브레인스토밍으로 불리며, 글로 대화하는 아이디어 확산 방법이다. 발언에 소극적인 사람들의 참여를 유발 할 수 있으며, 모든 사람들이 참여할 수 있는 아이디어 발산 기법이다. - 635 기법이라 부르며, 6명의 참여자가 각자 3개의 아이디어, 5분 내 작성하기를 기준으로 진행된다. - 불필요한 논쟁을 줄여주며, 말보다 글에 집중해 많은 양의 아이디어를 생성할 수 있다.
만다라트 (Mandal-Art)	- 3X3 매트릭스를 사용하여 인간의 두뇌활동을 극대화하는 구조화된 아이디어 발상 기법 - Manda(본질의 깨달음) + la(달성, 성취) + Art(기술)의 합성어 =본질을 깨닫는 기술, 목적을 달성하는 기술 - 가장 큰 주제를 세우고 이에 대한 해결점, 아이디어, 생각들을 확산해 나가는 형태
여섯색깔 모자기법 (Six Thinking Hats)	- 의미가 다른 6개의 모자를 활용하여 습관적인 사고의 스타일을 벗어나서 다른 관점으로 해결책을 바라볼 수 있도록 하는 방법론 - 하나의 아이디어, 주제에 대한 다양한 관점으로 바라보게 함으로써 창의적인 문제 해결을 돕는 기법
스캠퍼 (SCAMPER)	- 아이디어 발상 과정에서 문제상황을 해결하기 위해서 기존 내용을 세분화하거나 특징에 대한 체크리스트를 만들어 비교 확인하며 혁신적인 아이디어를 놓치지 않기 위한 방법론 (10개 단어의 약자) - 서비스 개선을 위한 아이디어가 필요할 때, 체크리스트를 활용하여 7가지 키워드를 기준으로 생각한 후, 그 결과에 대해 구체적인 아이디어를 도출해 보는 순서로 진행 할 수 있다.

✍ [아이데이션 3단계] 우선순위를 선정하고 구체화하기

우선순위 지도	- 사용자의 혜택 수준에 대비하여 실행가능 여부를 근거로 아이디어 지도에 반영 - 일반적으로 구현이 쉽고, 혜택이 높은 아이디어를 우선으로 실행
아이디어 스케치	-아이디어 시트에는 기본적으로 아이디어 제목, 요약, 스케치, 기능, 구현 방법 등의 내용으로 구성한다. 이 과정에서 고객의 니즈를 해결해 줄수 있는 차별화된 아이디어인지 한번 더 점검하며, 아이디어 구현을 위해 고려해야 할 기본 내용들을 검토

✍ [아이데이션 4단계] 콘셉트 도출하기

선정된 아이디어는 구체적인 형태와 전달방법을 반영해 콘셉트로 제안된다.
(*콘셉트 : 제품이나 서비스가 사용자에게 어떤 경험을 제공할 수 있는지 전반적으로 설명)

콘셉트도출

통합성 : 특정 콘셉트가 서비스의 특징을 얼마나 조화롭고 통합적으로 설명할 수 있는가?
차별성 : 기존의 서비스나 다른 서비스와 비교할 때 무엇이 다르고 이를 얼마나 잘 부각시키고 있는가?
사용자 집중성 : 해당 서비스 콘셉트가 사용자에게 제공하려는 것이 사용자의 욕구와 요구에 집중되어 있는가?

A. 콘셉트 브리프

콘셉트의 특성을 요약하여 한두 장으로 정리한 것, 어떤 서비스를 만들어 나갈 것인지 다양한 이해관계자들과 간단하고 직관적으로 커뮤니케이션할 수 있도록 도와주는 도구 (하나의 요약된 페이지)

콘셉트브리프 형식예시

분류	내용
서비스 가치 제안	- 고객이 상품이나 서비스를 구매하는 이유에 대해 제시하는 것으로 서비스를 통해 고객이 얻을 수 있는 가치를 정의하고 제시하는것 - 원칙 : 공감시키다 / 차별화하다/ 각인시키다 - 종류 : 새로운, 가격, 성능, 비용/리스크 절감, 접근성, 편리성/유용성, 고객 맞춤형, 디자인, 브랜드 지위, 사회적 인정 등 포함
서비스 콘셉트 스케치	- 최종 서비스 콘셉트를 시각화·실체화하여 서비스제공물에 대한 아이디어를 구체화 하는 과정 - 잠재 사용자들에게 제공되는 서비스 가치와 특징을 강조하여 표현 (아이디어의 시각화) - 인사이트를 명확하게 정리, 빠른 소통, 효과적인 커뮤니케이션 활용
콘셉트 시나리오	- 고객이 현실 상황에서 콘셉트를 어떻게 사용할지 보여주는 과정 (구상 스토리) - 가상의 사용자가 이용하게 될 서비스의 전달과정을 생생하고 구체적으로 묘사 - 상황과 문제점, 제안하는 아이디어를 통해 변화된 상황을 이야기가 되도록 글로 작성 - 콘셉트의 내용 및 고객의 서비스 활용 맥락(콘텍스트)를 확인

B. 페르소나 기반 서비스 시나리오

페르소나가 앞으로 디자인될 제품이나 서비스를 가지고 미래에 어떻게 행동할지에 대한 상세한 그림을 구상
페르소나 관점에서 작성하므로 사용자의 시점에서 체계적으로 그들의 경험을 이해할 수 있도록 구성

적용순서	내용
1. 정황 시나리오	- 페르소나의 시각으로 이상적인 경험의 순서를 기술하는 것 - 사용자의 니즈를 만족시키는 과정을 넓은 시야에서 바라본 큰 그림을 제시 (첫 단계에서 사용)
2. 주요 경로 시나리오	- 맥락 시나리오에서 크게 잡힌 경험의 흐름을 사용자가 제품이나 서비스를 활용하는 과정에 집중해서 치밀하게 기술하는 것 - 제품의 기능과 정보를 모두 결정했다면 디자인 설계도를 제작
3. 검증 시나리오	- 맥락 시나리오와 주요경로 시나리오에서 제안된 해결안에서 다양하게 나타날 수 있는 문제점을 집중적으로 짚어보고 어떻게 하면 그것을 피할 수 있는지, 혹은 해결할 수 있는지 미리 예측할 수 있도록 검증하는 것 (다양한 상황의 문제점을 포괄할 수 있도록 점검 시나리오를 활용) - 주요 이해관계자를 참여시켜서 조언을 구하는 것이 중요

4.2 서비스경험 구조화 및 설계

4.2.1 서비스 접점과 구성요소

서비스 접점(Service Touch Point) ⭐⭐
: 고객이 기업과 서비스를 만나는 과정에서 거치는 물리적, 인적 상호작용, 커뮤니케이션 등의 모든 것을 말한다.

실제 대면하게 되는 직원으로부터 제공받는 웹사이트를 통한 가상의 인터랙션이나 실제 매장에서의 물리적 체험들에 이르기까지 다양한 형태

서비스접점

서비스 터치포인트 매트릭스 (Touch Point Matrix) ⭐
: 고객이 브랜드와 접촉할 수 있는 모든 장소와 경험 여정의 목록을 작성하여 고객의 접점을 파악하기 위한 도구다.

서비스경험 여정지도에서 사용자의 여정별 접점을 모두 찾아내고, 페르소나 별 접촉 경로와 만족도를 분석하는 방법이다. (* 터치포인트 = Moment of Truth, MOT : 진실의 순간, 사용자가 받아들이거나 거절하는 의사결정의 순간)

서비스터치포인트 매트릭스

4.2.2 서비스 설계 : 콘셉트의 가시화

서비스의 흐름을 가시화하기 위해서는 최종 사용자에게 제공되는 *고객 가치가 어떻게 전달되는지, 그리고 그 가치를 전달하는 이해관계자들에게는 어떤 혜택이 제공되는지가 통합적으로 고려되어야 한다.

서비스 가치 흐름도(System map) ⭐
: 여러 가지 추상적 콘셉트들 사이의 관계를 보여주는 다이어그램으로 시스템을 묘사하여 서비스 솔루션의 구현을 설명하기 위한 툴이다.
: 서비스 제공 조직의 관점에서, 제공(서비스) 시스템의 주요 '행위자'를 개략적으로 나타낸 것이다. 행위자는 사용자, 직원, 부서 및 외부 제공업체를 포함한 조직의 내부 조직 및 외부 조직으로 구성

서비스 가치흐름도(시스템 맵)

→ 서비스의 흐름과 구조에 좀 더 집중하며, 현재와 미래의 서비스 흐름을 식별하는데 유용하다.

긴 글 읽어주셔서 감사합니다.

다음 포스팅에서는 03. 개발하기 Devlop의 프로토타입 개발 포스팅으로 찾아올게요.

▼서비스경험디자인기사 개념정리 다른 글▼

[서비스경험디자인기사] 0.서비스경험디자인의 이해 (디자인씽킹, 서비스디자인, 사용자경험디

youngplan.tistory.com

[서비스경험디자인기사] 1.준비하기 Align 개념정리 (제안요청서, 사전질의서, 디자인브리프, 알렌

youngplan.tistory.com

[서비스경험디자인기사] 2. 발견하기 Discover (1) 환경조사 개념정리 (데스크리서치, 2차연구, PEST, S

서비스경험디자인 기사 필기, 실시시험에 핵심정보인 개념정리를 시각화하여, 이해하기 쉽게 정리한 포스팅입니다. 아래의 내용은 환경조사에 해당하는 데스크리서치, 2차연구, PEST, STEEP, 3C, FAW

youngplan.tistory.com

[서비스경험디자인기사] 2. 발견하기 Discover(2) 관찰조사 개념정리 (자문화기술지, 온라인 에스노

youngplan.tistory.com

[서비스경험디자인기사] 2. 발견하기 Discover (3) 관찰조사 개념정리 (비참여관찰, 모바일에스노그

youngplan.tistory.com

[서비스경험디자인기사] 3. 정의하기 Define 개념정리 (페르소나, 고객여정지도, 사일로현상, 이해

youngplan.tistory.com

[서비스경험디자인기사] 3. 정의하기 Define 개념정리 (페르소나, 고객여정지도, 사일로현상, 이해관계자지도, 친화도분석, 서비스경험디자인원칙)

기획하는뇽뇽씨 — Wed, 22 Nov 2023 13:17:09 +0900

서비스경험디자인 기사 필기, 실기시험에 핵심정보인 개념정리를 시각화하여 이해하기 쉽게 정리한 포스팅입니다.

아래의 내용은 정의하기 단계에 해당하는 페르소나, 고객여정지도, 이해관계자지도, 사일로현상, 친화도분석, 서비스경험디자인원칙 개념을 정리하였습니다.

3. 정의하기 Define

기초 데스크 리서치, 환경조사방법과 이해관계자 분석, 설문, 인터뷰, 관찰 등 서비스디자인 조사방법에 대해 알아본다.

3.1 서비스경험디자인 요구사항 파악

3.1.1 페르소나 (Persona)

페르소나
: 어떤 제품 혹은 서비스를 사용할 만한 목표 인구 집단 안에 있는 다양한 사용자 유형들을 대표하는 가상의 인물이다. (앨런 쿠퍼 도입)

특정상황과 환경 속에서 어떤 인물이 어떻게 행동할 것인지 예측하기 위해 실제 사용자 자료를 바탕으로 개인의 개성을 부여하여 창출
공통의 니즈와 행동 패턴을 지닌 사용자 집단 대표

금융 서비스 개선을 위한 페르소나 예시

▶ 페르소나 설정방법

행동 변수를 파악한다.
사용자 조사 참가자와 행동 변수의 관계도를 그린다.
중요한 행동 패턴을 검토한다.
특성과 목표를 설정한다.
상세 설명을 작성한다.
페르소나의 종류를 결정한다.

페르소나 도출 과정 예시

페르소나 구성요소

분류	내용
인구통계학적 구성 요소	나이, 성별, 가족 구성, 소득, 직업/지위, 교육, 지역, 인종 등
심리학적 구성 요소	성격, 태도, 관심사, 라이프스타일(제품이나 서비스의 이용, 활동, 취미 등) 등
형태적 구성 요소	동기, 목표, 추구가치, 사용 문제점, 구매 및 사용 프로세스, 멘탈모델 등

3.1.2 고객여정지도 (customer Journey Map)

고객여정지도
: 서비스를 이용하기 전, 중, 후까지 전체 과정을 시각화하여 보여주는 방법이다.

고객여정지도는 프레임워크를 기반으로 사용자 조사정보를 매핑하는 방식으로 작성한다.
사용자가 서비스를 이용하는 과정에서 무엇을 생각하고, 무엇을 하고, 어떻게 느끼는지 시간의 흐름에 따라 작성하며, 각각의 과정에서 사용자가 서비스 제공자와 인터랙션하는 모든 수단(*서비스 접점)을 보여준다.

금융서비스 개선을 위한 고객여정지도 예시

▶ 고객여정지도 구성요소

단계(Phases)	고객 행동의 주요 과정
생각(Thinking)	궁금증, 의도, 동기
행동(Doing)	실제 행동
감정(Feeling)	긍정적/ 부정적 감정
서비스 접점(Touch Points)	행동과 연관된 모든 인터페이스
강점(Strengths)	서비스 과정의 긍정적 측면
약점(Weaknesses)	서비스 과정의 부정적 측면
기회 영역(Opportunity Area)	서비스 과정의 개선사항

⭐서비스 접점(Touch Point)	서비스를 경험하는 과정에서 서비스를 구현하는 매체로서 사용자와 인터랙션이 일어나는 모든 물리적, 인적, 커뮤니케이션 대상을 의미
⭐물리적 증거(Physical Evidence)	서비스 접점 중에서 서비스의 수행이나 소통을 지원하는 모든 유형적인 요소를 의미한다.
⭐서비스 스케이프(Servicescape)	서비스가 수행되고 제공되며 소비되는 물리적 시설, 서비스 차별화의 수단이며 서비스 수행을 지원하는 역할 (외관설계, 주차장, 조정, 입구, 보행공간 외부속성 ↔ 설계, 배치, 공조, 음악, 향, 조명, 실내 장식과 같은 내부속성)
⭐감정 곡선(Emotional Curve)	고객여정지도를 작성할 때, 고객 감정의 흐름을 시각화 한 선

▶ 고객여정지도 목적

서비스 이해관계자가 사용자에게 공감하는데에 목적을 둔다.
내부 이해관계자들의 의사소통 수단 및 문제해결 도구
사용자가 서비스를 이용할 때 느끼는 불펀함과 니즈를 명확하게 파악하고, 비즈니스에 긍정적 영향과 부정적 영향을 미치는 영역을 이해하는데 목적을 둔다.
이해관계자가 자신의 업무와 책임에만 몰두하는 사일로(Silo) 현상을 극복하고 함께 협력하는 관계로 발전

3.1.3 이해관계자지도

이해관계자지도
: 서비스를 기획하고 제공하고 사용하는 데 관여하는 다양한 사람들을 의미한다.
: 이해관계자 집단의 다양한 니즈를 파악하여 총체적 관점에서 디자인하는 것을 목적으로 작성

에드워드 프리먼의 이해관계자 이론 다이어그램

내부 이해관계자 : 경영자 / 관리자/ 전방 영역의 직원/ 후방 영역의 직원 등
외부 이해관계자 : 고객/ 파트너/ 경쟁자/ 컨설턴트/ 민간단체/ 정부/ 언론 등

▶ 작성방법

이해관계자 목록을 작성한다.
서비스와의 관련성과 유형에 따라(직접적 & 간접적) 이해관계자를 매핑한다.
가치의 흐름을 파악한다.
가치의 흐름도를 그린다.

▶ 구성요소

직접적 이해관계자 & 간접적 이해관계자
이해관계자의 유형
관계 구성
가치 흐름

▶ 목적

시스템적 관점에서 서비스를 분석함으로써 전체 서비스의 정황 및 이해관계자의 상호 관계에 대한 심도 깊은 이해
다양한 이해관계자 집단의 요구사항을 파악하여 지속 가능한 서비스 기획 가능
이해관계자 간 가치 흐름과 상호작용 과정에서 발생하는 문제점 발생, 해결가능
이해관계자 간의 이해 상충에 의한 충돌이 발생할 경우 효과적으로 조정
이해관계자가 함께 공동창작 하여 작동방식을 새롭게 정렬함으로써 서비스 개선 가능

3.1.4 친화도 분석(Affinity diagram)

친화도 분석
: 사용자 조사를 통해 도출한 사실과 인사이트를 유사성에 따라 의미 있게 분류하는 방법으로 고객의 다양한 니즈 중 핵심이 되는 니즈를 선정하여 서비스의 방향성을 구체화하는 과정이다.

관찰 활동에서 확보한 정보를 연관성에 따라 분류하고 그룹 지어보며 패턴을 찾아내는 활동이다. 패턴은 인사이트의 기반이 된다는 점에서 중요하다.
어피니티 다이어그램을 통해 계층 구조를 만들면서 흩어져 있던 정보 속에서 더 본질적인 내용을 확인할 수 있으며, 이 과정에서 새로운 인사이트가 도출된다.

친화도 분석 예시

▶ 작성방법 (* 귀납적 방법으로 구조화/ 상향식 접근법)

사용자 조사 내용을 포스트잇에 기록한다.
포스트잇의 내용을 유사성에 따라 그룹핑한다.
그룹별로 적절한 주제를 정한다.
전체 그룹을 구조화하여 정리한다.

▶ 친화도 분석 목적

사용자 조사를 통해 수집한 사실과 통찰을 구체화하고 의미 있게 분류, 사용자 조사 데이터를 기반으로 디자인을 진행할 수 있도록 가이드 역할

* 공감지도, 고객여정지도, 경험지도, 서비스 청사진 비교

	공감지도	고객여정지도	경험지도	서비스 청사진
정의	특정 타입의 사용자에 관한 마인드 셋에 대한 이해로 팀원들과 같은 생각을 공유하고, 의사결정을 돕기 위한 도구로 사용	제품이나 서비스에 대해 목적을 달성하고자 하는 프로세스를 시각화 한 것으로 사용자의 needs와 pain point를 이해하고 설명하는데 사용	일반적인 사람들이 처음부터 끝까지 특정 목적을 달성하기 위해 수행한 전체 경험을 시각화한 것으로 일반적인 사람들의 행동을 이해하는 데에 사용	특정 사용자 여정의 접점과 직접적으로 관련있는 사람 혹은 물건, 프로세스 등 서비스의 구성요소 간의 관계를 시각화 한것
기본 구성요소 및 특징	- Says, Thinks, Dose, Feels - 특정 과업에 대한 사용자의 관점, 태도, 행동 등 반역 및 시각화 - 시간순, 순차적 시각화 X - 각각의 페르소나 또는 사용자 유형에 하나의 공감 지도를 생성 (1:1맵핑)	- Phases, Actions, Thoughts, Mindsets/ Emotions - 특정 과정에 대해 상호작용하는 접점을 바탕으로 사용자의 전체적인 경험, 마인드 셋, 생각, 감정 등의 관점 반영 - 시간순, 순차적 시각화 O - 각각의 페르소나 또는 사용자유형에 하나의 고객여정지도 생성(1:1맵핑)	-Phases, Actions, Thoughts, Mindsets/Emotions - 특정서비스 및 제품에 국한 되지 않고, 일반 적인 사람들의 관점, 태도와 행동 등을 반영 - 시간순, 순차적 시각화 O - 고객여정지도의 콘셉트를 일반화	- Customer Actions, Front stage Actions, Backstage Actions, Support Processes - 조직의 관점에서 기술하고, 서비스 제공자 또는 직원 (지원과정)에 집중하여 시각화 - 시간순, 계층적 시각화 O - 고객에 대한 상세한 표현은 생략되는 경우가 많음
사용이유	- 사용자에 대한 공감형성 - 사용자 유형에 대한 충분한 이해	- 사용자의 불편함, 즐거움을 유발하는 접점을 정확히 찾기 위함 - 고객여정을 조직 전체에 공유하고 이해시키기 위함 - 여정의 주요접점에 대한 조직의 권한부여·업무분담	- 제품이나 서비스와 무관한 기본적이고 일반적인 경험에 대한 이해를 위해 - 사람들의 일반적인 행동을 이해하기 위함	- 조직 내·외부의 이해관계자가 효과적으로 커뮤니케이션 하기위함 - 서비스제공방식에 대한 이해와 조직 전체 공유, 협력, 조직 내부 문제점 파악 및 기회요소 파악
사용시기	- 디자인의 시작단계 - 사용자 인터뷰 후 리서치 내용 분류 및 정리단계	- 개발 프로세스 전체에서 내 외부 이해관계자들 간의 공유용으로 어느 단계에서나 사용 가능	- 고객여정지도를 만들기 전 사람들의 일반적인 행동을 이해하기 위해	-고객여정지도를 만든 후 제작 - 서비스 프로세스 개선을 위한 조직변경 전에 제작

* 인지맵, 콘셉트맵, 마인드맵 비교

인지맵, 콘셉트맵, 마인드맵

	인지맵	콘셉트맵	마인드맵
정의	프로세스나 동적 생태계, 콘셉트에 대한 사용자의 멘털 모델을 시각적으로 표현한 기법	마인드맵의 복잡한 버전 여러 콘셉트(주제)를 단어나 문장으로 연결하여 관계를 파악하는 기법	생각을 면확한 계층 구조와 형식으로 확장시켜 시각화한 사고력 향상 방법(트리구조)
디자인활용	고객 인터뷰 시 활용	체계적인 해결안 제시를 위해 활용	앱의 구조를 간단하게 설계 시 활용

3.2 서비스경험디자인 원칙수립

3.2.1 서비스경험디자인 원칙

사용자에게 최선의 가치를 제공하고 있는가?
통합적 관점을 견지하고 있는가?
혁신적 서비스를 지향하고 있는가?

서비스경험디자인 원칙 수립 시 고려사항 5가지

사용자에게 긍정적인 경험을 제공하는가?
서비스디자인의 목표에 부합하는가?
아이디어 개발에 도움이 되는가?
차별화되고 혁신적인 전략 방향을 제시하는가?
지속 가능한 가치를 제공하는가?

긴 글 읽어주셔서 감사합니다.

다음은 서비스경험디자인 실행방법의 04. 개발하기 Devlop 방법 포스팅으로 찾아올게요.

▼서비스경험디자인기사 개념정리 다른 글 ▼

[서비스경험디자인기사] 0.서비스경험디자인의 이해 (디자인씽킹, 서비스디자인, 사용자경험디

youngplan.tistory.com

[서비스경험디자인기사] 1.준비하기 Align 개념정리 (제안요청서, 사전질의서, 디자인브리프, 알렌

youngplan.tistory.com

[서비스경험디자인기사] 2. 발견하기 Discover _ (1) 환경조사 개념정리 (데스크리서치, 2차연구, PEST,

youngplan.tistory.com

[서비스경험디자인기사] 2. 발견하기 Discover(2) 관찰조사 개념정리 (자문화기술지, 온라인 에스노

youngplan.tistory.com

[서비스경험디자인기사] 2. 발견하기 Discover (3) 관찰조사 개념정리 (비참여관찰, 모바일에스노그

youngplan.tistory.com

[서비스경험디자인기사] 2. 발견하기 Discover (3) 관찰조사 개념정리 (비참여관찰, 모바일에스노그래피, 문화적프로브, 편향, 헤일로효과, 프라이밍효과)

기획하는뇽뇽씨 — Mon, 20 Nov 2023 15:55:05 +0900

서비스경험디자인 기사 필기, 실기시험에 핵심정보인 개념정리를 시각화하여 이해하기 쉽게 정리한 포스팅입니다.

[서비스경험디자인기사] 2. 발견하기 Discover(2) 관찰조사 개념정리 (자문화기술지, 온라인 에스노

youngplan.tistory.com

위의 포스팅은 관찰조사 중 자가기록연구와 참여자연구에 관한 내용과 아래 포스팅 내용과 연결되어 있으므로 참고하시면 좋겠습니다. 아래 내용은 관찰조사의 비참여 관찰에 해당하는 모바일에스노그래피, 문화적 프로브, 편향, 헤일로효과, 프라이밍효과 개념을 정리하였습니다.

2. 발견하기 Discover _(3) 관찰조사

2.2 서비스경험디자인 관찰조사

사용자 유형의 행동 관찰 및 서비스 사용상의 문제점을 발견하기 위한 조사 방법을 알아본다.

2.2.3 비참여자연구(Non-Participant Approach)

A. 비참여관찰(Non-Participant Observation)

비참여관찰 (몰래 관찰하기, *fly on thr wall)
: 연구자가 제3자 입장에서 조사 대상 집단 혹은 연구 참가자를 관찰하여 데이터를 수집하는 방법이다. 관찰환경에서 자신을 드러내지 않고 최대한 주의를 끌지 않으면서 지켜본다.
* 말 그대로 벽에 붙은 파리가 되는 것이다. 관찰 환경에서 가능한 자신을 드러내지 않고 최대한 주의를 끌지 않으면서 지켜본다. 구석진 위치에 자를 잡고 한 자리에서 3-4시간 정도를 바라보는 것을 추천한다.

수행방법 : 질문 정의 > 계획 및 준비 > 수행 > 후속작업
통화 모니터링 (Call Monitoring) : 주로 콜센터에서 상담원과 고객 간의 대화를 조사하기 위해 사용된다.

B. 모바일 에스노그래피(Mobile Ethnography)

모바일 에스노그래피
: 기술을 활용하여 실시간 고객 경험의 의미를 문서화, 분석 및 도출하는 질적 연구 방법으로 참여자에게 스마트폰을 제공해 그들이 시간과 장소에 관계없이 서비스 접점(Touch Point)에서 사용자 중심의 정보를 수집하도록 하는 방법이다. (자문화 기술지 방법 중 하나이다.)

수행방법 : 연구 문제 구체화 > 계획 및 준비 > 프로젝트 준비 및 참가자 초대 > 데이터 수집 > 후속작업
연구방법

비디오에스노그래피	고정된 카메라를 통해 그들의 행태를 촬영해 관찰하는 방법이다. (조사자가 직접 촬영할 수도 있고, 카메라를 이용해 관찰자 없이 자연스러운 환경에서 진행한다.)
영상 에스노그래피	녹화를 위한 가이드라인을 만들어 허락을 받을 후 비디오를 녹화하고 추후 분석에 활용한다.

C. 문화적 프로브(Cultural Probes)

문화적 프로브
: 사용자 관점에 대한 깊이 있는 통찰을 얻기 위한 과업 기반 인사이트 활동으로 정해진 기간에 참여자들이 간단한 일기 같은 것을 작성하도록 하며, 연구자가 현장에 직접 가지 않고서도 그에 대한 통찰을 얻는 방법이다.
* 연구자는 참여자에게 간단한 지시문과 개인의 실제 생활에 대한 정보(음성, 문자, 사진, 동영상 등)를 모으기 위한 패키지 (카메라, 스크립트)를 제공하여 기록하도록 한다. 사용자 참여를 원칙으로 하며, 참여자들에게 충분한 시간을 제공하고 디자인에 영감을 주는 자료를 직접 창출한다.

수행방법 : 연구 문제 구체화 > 인터뷰 대상자 선정 > 계획 및 준비 > 문화적 프로브 패키지 전달 > 후속작업

문화적프로브

D. 편향(Biases) : 비이성적 행동의 법칙

편향의 유형 ⭐

분류	내용
확증 편향	어떤 계획을 세울 때 혹은 자신의 신념이나 생각에 대한 증거 정보를 찾고 수집할 때 주로 발동되며, 이미 정해놓은 생각에 대해 그 생각이 이성적이고 과학적으로 도출된 것이라고 나 자신을 설득하기 위해 자신의 생각과 일치하는 증거에만 주목하는 것이다.
확신 편향	누군가 어떤 의견을 열성적인 어조와 몸동작, 생생한 비유, 재미난 일화를 곁들여 자신 있게 확신을 가지고 이야기하면, 그 내용을 면밀히 검토했기 때문이라고 믿게된다. 확신 편향을 가진 사람들을 스스로를 설득하기 위해 조금은 불확실한 내용에 대해 목소리나 몸짓을 강조하여 이야기하는 경향이 있다.
겉모습 편향	사람들은 본질적인 것이 아닌 겉으로 드러나는 '보이는 것'을 믿는 경향이 있다. 리서치를 수행할 때, 겉모습에 편향되어 인터뷰를 치우치지 않도록 하는것이 중요하다.
집단 편향	특별한 환경의 영향이나 방침, 타인으로부터 어떤 말을 듣지 않았음에도 자신도 모르게 마법처럼 타인의 의견과 일치하는 현상을 의미한다.
탓하기 편향	내가 저지른 실수를 들여다보는 것이 불편하여 겉으로만 빠르게 자신의 잘못이라고 결론지어 버리고 속으로는 다른 사람이나 환경, 혹은 순간적 오판을 탓하는 편향이다.
우월성 편향	자신은 남들과는 다르고 다른 사람들보다 더 이성적이고 윤리적이라고 믿는 현상이다. 자신의 잘못은 보지 못하고 잘못한 일들을 쉽게 정당화하며 남들의 비이성적인 행동만 잘 보는 경향이있다.

사용자 리서치와 설문 응답 편향(Survey Response Biases)

: 사용자 리서치를 수행하다 보면 사용자가 본인의 생각을 드러내는 대신 경험과 편견, 사회적 신념, 태도에 따라 응답을 변경하거나 또는 질문지의 순서나 형식에 따라 결과가 왜곡되어 편향된 결과를 얻게 되는 경우가 발생한다.

분류	내용
동조 편향	설문 조사를 실시할 때 습관적으로 상대방의 생각에 동조하고, 모든 질문에 동의하는 경향
사회적 선망 편향	사회적 통념 가치를 묻는 질문에 대하여 통념적 사회규범에 바람직하다고 생각하는 가치에 맞게 왜곡하여 표현하는 경향
최신 편향	전체의 경험, 또는 과정의 경험보다 최신/ 최근경험에 더 큰 비중을 두는 경향
잘못된 합의 효과	'허위 일치성 편향'으로 자신의 의견이나 판단이 주위 사람들과 같을 것이라고 착각하는 경향
헤일로효과/ 후광효과	- 자신이 주목한 긍정적(또는 부정적) 특징에 영향을 받아 다른 부분도 동일하게 긍정적(또는 부정적)으로 판단하게 되는 현상 - 긍정적, 부정적 측면에 모두 영향을 미치는데, 사용자가 제품이나 서비스의 한 측면을 만족했다면 다른 나머지 부분에 대해서도 긍정적인 평가를 할 가능성이 크다.
프라이밍효과/ 점화효과	- 시간적으로 먼저 제시된 자극(프라임, Prime)이 나중에 제시된 자극(표적, Target)의 처리에 영향을 주는 현상이다. 사물, 사건, 관념, 개념 등과 같은 자극은 그와 연관된 자극이나 정보 및 다양한 정신적 요소들이 발현되는 데 일시적 또는 지속적으로 영향을 미친다. - 암묵기억(과거의 어떤 경험이나 학습 등에 의해 뇌에 저장되어 있다가 무의식적으로 나타나는 기억)에 저장되어 있던 심리적 요소들이 연관 자극에 의해 촉발되어 무의식적으로 작동하는 것이다.

프라이밍 디자인에 적용 가능한 요소

프라이밍/ 점화효과	디자인에 적용할 수 있는 요소
감각적 인지 점화 (시각, 시각 자극으로 나타나는 효과)	버튼 링크, 색상, 모양, 패턴, 배경, 로고, 스케치
개념적인 점화 (의미적인 부분을 기초로 나타나는 효과)	알림, 제목, 제안, 아이콘, 이미지, 미리보기, 표시자, 도구 설명

긴 글 읽어주셔서 감사합니다.

다음은 서비스경험디자인 03. 정의하기 Define 개념정리 포스팅으로 찾아올게요.

▼서비스경험디자인기사 개념정리 다른 글▼

[서비스경험디자인기사] 0.서비스경험디자인의 이해 (디자인씽킹, 서비스디자인, 사용자경험디

youngplan.tistory.com

[서비스경험디자인기사] 1.준비하기 Align 개념정리 (제안요청서, 사전질의서, 디자인브리프, 알렌

youngplan.tistory.com

[서비스경험디자인기사] 2. 발견하기 Discover _ (1) 환경조사 개념정리 (데스크리서치, 2차연구, PEST,

youngplan.tistory.com

[서비스경험디자인기사] 2. 발견하기 Discover(2) 관찰조사 개념정리 (자문화기술지, 온라인 에스노

youngplan.tistory.com

[서비스경험디자인기사] 2. 발견하기 Discover(2) 관찰조사 개념정리 (자문화기술지, 온라인 에스노그래피, 섀도잉, 맥락적 인터뷰, 다섯단계의 왜, 심층인터뷰, 포커스그룹인터뷰, 조사윤리)

기획하는뇽뇽씨 — Mon, 20 Nov 2023 14:55:57 +0900

서비스경험디자인 기사 필기, 실기시험에 핵심정보인 개념정리를 시각화하여, 이해하기 쉽게 정리한 포스팅입니다.

아래의 내용은 관찰조사에 해당하는 자문화기술지, 온라인 에스노그래피, 섀도잉, 맥락적 인터뷰, 다섯 단계의 왜, 심층인터뷰, 포커스그룹인터뷰, 조사윤리 개념을 정리하였습니다.

2. 발견하기 Discover_(2) 관찰조사

2.2 서비스경험디자인 관찰조사

사용자 유형의 행동 관찰 및 서비스 사용상의 문제점을 발견하기 위한 조사 방법을 알아본다.

2.2.1 자가기록연구 (Self-ethnograhpic)

자가기록연구(Self-ethnograhpic)
: 연구원이 특정 경험에 대해 직접 탐색하고 필드노트, 오디오 기록, 비디오, 사진 등을 이용하여 스스로 문서화하는 방법 ( 자전적 이야기를 더 넓은 문화적, 정치적, 사회적 의미 혹은 이해와 연결하는 질적연구의 한 형태)

A. 자문화 기술지/ 자기민족지학 ⭐⭐

미스터리 쇼핑	연구원은 고객으로 행동하여 구매 프로세스 또는 특정 고객경험을 따르고, 그 경험에 대해 자체 문서화 한다.
미스터리 워킹	제한된 시간에 회사의 직원으로 위장하여 에스노그래피 연구를 수행하는 것이다.
서비스사파리	한 무리의 사람들이 특정경험에 대한 에스노그래피 연구수행을 통해 사용자의 요구와 문제점을 발견한다. 한 명은 직접 체험하는 역할을 수행하고, 다른 한명은 이를 관찰하고 기록한다. 최소 2명이상으로 구성하여 실제환경에서 체험한다.
탐색적 서비스사파리	서비스 경험에 대한 좋고 나쁜 예시를 탐색하고 수집하기 위해 수행하는 방법이다. 다소 광범위하게 이루어지는 반면, 연구에서 집중할 대상을 결정하는데 도움이 되기도 한다.
다이어리 연구	참가자가 장기간에 걸쳐 주제에 대한 자신의 경험을 기술하는 추적연구이다.
탐문	추적의 한 형태로서 대상자의 활동장소에 가서 그 행동에 대한 질문을 던지는 것이다.
인지적 시찰법	제공하는 프로세스와 제품 또는 서비스를 사용자가 쉽게 인지하고 사용하는지 평가하는 방법 실제 제품이 만들어지기 전에 시나리오 레벨이나 기획 단계에서 수행 특정 과업의 시작과 완료 단계까지를 내부 인력이 참여해서 가상으로 화이트 보드에 채워가면서 플로우를 점검해나가는 과정
크라우드 소싱	대중과 아웃소싱의 합성어로서, 기업 활동 일부 과정에 대중을 참여시켜 물건을 새로 만들 때, 서비스 개선 시 참신한 아이디어와 실질적인 의견을 들을 수 있다.
행위매핑	특정 시간에 특정 환경에서 행동을 관찰하고 기록하는데 사용되는 연구 도구이다.

* 에스노그래피(Ethnography) : 사용자 행동의 맥락과 그들의 잠재적 욕구를 파악하기 위한 현장 관찰 도구로, 관찰하는 사람들과의 공감을 통해 디자인 영감을 얻는 관찰방법이다.

서비스사파리 예시사진

B. 온라인 에스노그래피

온라인 에스노그래피
: 온라인 커뮤니티에서 사람들이 상호작용하는 방식을 조사하는 접근방법으로 사이버, 가상, 혹은 디지털 에스노그래피라고도 한다.

수행방법 : 질문정의 > 계획 및 준비 > 수행 > 후속작업
결과물 : 문서(인용, 스크립트, 현장메모), 스크린 숏, 녹음(스크린 캐스트 또는 오디오 녹음)

자문화 기술지	연구자가 커뮤니티의 일부가 되어 자신의 경험을 기록
비참가 온라인 에스노그래피	연구자가 온라인 커뮤니티를 관찰
참가자 온라인 에스노그래피	연구자가 특정 참가자로 참가하여 그들의 온라인 활동을 탐색

2.2.2 참여자연구 (Participant Approach)

A. 참여관찰 (Participant Observation)

참여관찰
: 사람들의 상황과 행동을 제대로 이해하기 위해 직접 어떤 활동이나 환경, 문화 하위문화 등의 일원이 되어 참여해 보는 몰입적이며 민족지학적인 방법이다.
(연구집단과 함께 생활하며 그들의 사회생활을 관찰하고 삶에 대한 직접적인 설명을 들으며 그 집단의 문화에 대해 배우는 방법)

▶ 참여관찰유형

비참여 (Non-Participatory)	사람들이나 연구 분야와의 접촉이 없음
수동적 참여 (Passive Participation)	연구원은 방관자 역할만 함
적당한 참여 (Moderate Participation)	연구원은 "내부자"와 "외부자" 역할 사이의 균형을 유지함
적극적인 참여 (Active Participation)	완전한 이해를 위해 연구원이 기술과 관습을 완전히 포용하여 그룹의 일원이 됨
완전한 참여 (Complete Participation)	사전에 연구원이 연구 모집단에 완전히 융합되어 있음 (연구 대상인 특정 모집단의 구성원이 연구원인 경우)

▶ 참여관찰 연구방법

일상의 하루	특정 기간동안 고객의 일상생활을 이해하기 위한 사용자 참여 관찰방법이다.
함께 작업하기 (Work-along)	함께 일하면서 내부 프로세스를 이해하기 위해 직원들을 관찰하는 방법이다.
⭐섀도잉 (Shadowing)	고객의 행동을 관찰하고 프로세스와 경험을 이해하기 위해 연구원이 그림자처럼 그들의 삶에 물리적인 공간을 따라다니며 행동, 감정, 환경과의 상호작용, 생활 모습, 사용 패턴 등을 관찰하는 조사방법이다. (규칙이나 한도 내에서 관찰 대상에게 질문할 수 있다.) Ch. 피어 쉐도잉 Peer Shadowing : 주로 가족이나 친구 등 지인이 관찰자가 되어 조사하는 방법

B. 맥락적 인터뷰 (Contextual Interview)

맥락적 인터뷰
: 연구의 질문과 관련된 상황적 맥락에서 고객이나 직원 또는 기타 이해관계자와 수행하는 인터뷰이다. 연구자는 인터뷰를 진행하면서 에스노그래피 기법으로 특정 행동을 관찰하고 조사할 수 있다.
: 맥락적 인터뷰는 현장에서 진행하기 때문에 연구자가 환경을 관찰할 수 있고 인터뷰 대상자가 환경의 요소를 지적할 수 있다는 장점이 있다. 또한 인터뷰 대상자의 특정 행동에 대한 근본적인 동기를 더 깊이 이해하기 위해 * 다섯 단계의 '왜' (5 Whys Method)와 같은 방법을 사용하기도 한다.

사용목적 : 특정 그룹의 사람들을 더 잘 이해하기 위해 사용된다. 페르소나를 구축할 때 그들의 요구, 감정, 기대 및 환경을 이해하기 위해 사용하거나 서비스 가치 흐름도를 구축할 때 특정 행위자 간에 이슈를 발견하기 위해 사용한다.
수행방법 : 연구 문제 구체화 > 인터뷰 대상자 선정 > 계획 및 준비 > 수행 > 후속작업
결과물 : 문서 (기록, 현장 노트), 오디오 녹음, 사진, 비디오, 기타 수집 자료

⭐ 다섯 단계의 '왜'(5 Whys method)

특정 상황을 이해하기 위해 '왜'라는 질문을 반복하고, 여기에서 사람들의 숨겨진 니즈를 찾고 문제의 본질을 확인해 해결책까지 파악하는 방법이다.
사용방법 : 1️⃣ 해결해야 할 문제를 간결하게 적는다. 2️⃣ 그 아래에 왜 해결해야 하는지 작성해본다. 3️⃣ 앞서 작성한 내용을 왜 해야하는지 다시 적어본다. 4️⃣ 문제의 본질에 도달할 때까지 이를 반복한다.

▶인터뷰 형식 (3가지)

표준화 면접	구조화 면접 또는 통제화 면접이라고도 한다. 질문의 내용, 형식, 순서 등에 대하여 사전에 작성한 일정에 따라 인터뷰를 수행하는 것이다.
비표준화 면접	비구조화면접 혹은 비통제화 면접이라고도 한다. 질문의 내용, 형식, 순서 등을 미리 정하지 않고 상황에 따라 자유롭게 인터뷰를 수행하는 것이다.
준표준화 면접	표준화 면접과 비표준화 면접을 결합한 형태로 중요한 사항은 표준화 하고, 그 밖의 사항은 비표준화 하는 방법이다. 주제와 내용 등은 표준화 하여 인터뷰 지침을 작성하고 해당 지침의 범주 안에서 질문 순서나 형식은 면접자의 재량으로 융통성있게 진행한다.

▶질문 형식 (2가지)

개방형 질문	- 조사자가 표본에 대한 정보를 가지고 있지 않거나 문제 핵심을 파악하고자 하는 연구의 초기 단계에서 유용하지만, 응답자에게 심적 부담을 주고 응답의 해석에 대한 편견이 개입될 소지가 있다. - 마법 지팡이 질문, 참여자의 마음을 열어 자연스럽게 아이디어를 도출하는데 효과적이다.
폐쇄형 질문	객관식 질문 또는 선택형 질문이라고도 한다. 이분법적 질문과 다항 선택형 질문으로 나눌 수 있으며, 다항 선택형 질문에는 리커트 척도, 평가 척도, 체크리스트, 순위 유형 등이 있다.

리커트 척도 : 설문조사 등에 사용되는 검사 응답 척도의 하나로, 제시 질문에 5개 단계별로 얼마나 동의하는지를 확인하는 설문기법이다. (특정대상, 개념 등에 대한 개인의 신념, 태도 측정 기법) ( ex. 매우 동의/ 동의 / 보통 / 비동의 /매우 비동의 )

C. 심층인터뷰 (In-depth Interview)

심층인터뷰
: 구조화, 반구조화 또는 비구조화 방식으로 수행할 수 있다. 인터뷰 질문은 일반적이고 광범위한 질문에서 시작하여 참가자가 인터뷰에 익숙해져 조사자와 인터뷰 대상자 간의 친밀감 (라포 Rapport) 을 형성한 다음에는 연구 질문과 관련된 주제에 대해 좀 더 구체적이고 자세하게 접근하는 "깔때기" 방식으로 구성된다.

D. 포커스 그룹 인터뷰 (Focus Group Interview)

포커스 그룹 인터뷰
: 제품의 대상 시장에 맞는 사용자 그룹을 인구 통계 자료를 바탕으로 선정한 뒤, *퍼실리테이터와 함께 모여 토론하는 것이다. 주로 시장조사를 할 때 이용하며, 주의 깊게 모집한 참가자 집단을 통해 제품 서비스, 마케팅 캠페인, 브랜드 등에 대한 의견, 느낌, 태도를 측정하는 정성적 연구 방법이다.

▶ FGI 유형

언포커스 그룹 인터뷰

주제에 대해 일반적인 사용자의 시각에서 벗어난 관점의 의견을 얻기 위해 주관이 뚜렷하고 독특한 사람들을 중심으로 모집해 진행한다.
* 전문가를 포함해 서비스에 대한 극단적 인식을 갖고 있거나 확실한 흥미가 있거나 또는 제품을 전혀 사용해보지 않은 극단적 사람들을 대상으로 인터뷰를 통해 다양한 관점과 생각을 발견한다.

전문가 인터뷰

해당 분야의 전문가와 함께하는 인터뷰로써 특정 트렌드 유형에 초점을 맞춤 * 구조적 방식의 대화를 진행 할 수 있다.

퍼실리테이터 (Facilitator) : 효과적인 공동창작을 위해 워크숍 참여자가 원하는 바를 달성할 수 있도록 촉진하고 돕는 사람
구조적 인터뷰 : 양적 조사를 위한 면접 방법 중 하나로 사전에 치밀한 계획을 세워서 질문이나 순서를 정한 계획에 따라 면접을 진행하는 방법이다.

E. 인터뷰 가이드라인

인터뷰 수행 시 고려할 요소
: 신뢰 구축, 명확한 언어 사용, 폐쇄형/유도 질문 회피, 듣기, 의역, 다섯 단계의 왜(5 Whys), 인터뷰 질문 계획

F. 설문

설문
: 정량적 조사 기법으로 주제에 관한 사람들의 행동, 태도를 이해하기 위해 조사 초기에 사용한다.

G. 조사윤리 (IRB, Institutional Review Board)

조사윤리
: 사람을 대상으로 하는 모든 연구는 조사윤리 심의가 필요하다.

사람대상연구	사용자 조사를 위한 윤리적인 리서치 가이드라인
임상실험	대상자들로부터 동의서를 얻는다.
대면 설문조사, 행동관찰, 신체검사	연구의 이익과 위험요소에 대해 설명한다.
비대면으로 개인 정보를 사용하는 경우	대상자의 개인 정보를 보호한다.
인체 유래물을 직접 조사·분석하는 경우	대상자들의 시간을 보상한다.
	연구자는 인간 대상 연구와 관련된 사항을 기록·보관하여야 한다.
	대상자가 요구한다면, 그에게 얻은 데이터와 리서치 결과를 제공해야한다.

긴 글 읽어주셔서 감사합니다.

다음은 서비스경험디자인 실행방법의 02. 발견하기 Discover 단계의 (2) 관찰조사 방법 중, 비참여자 관찰 방법에 포스팅으로 찾아올게요.

▼서비스경험디자인기사 개념정리 다른 글▼

[서비스경험디자인기사] 0.서비스경험디자인의 이해 (디자인씽킹, 서비스디자인, 사용자경험디

youngplan.tistory.com

[서비스경험디자인기사] 1.준비하기 Align 개념정리 (제안요청서, 사전질의서, 디자인브리프, 알렌

youngplan.tistory.com

[서비스경험디자인기사] 2. 발견하기 Discover _ (1) 환경조사 개념정리 (데스크리서치, 2차연구, PEST,

youngplan.tistory.com

[서비스경험디자인기사] 2. 발견하기 Discover (1) 환경조사 개념정리 (데스크리서치, 2차연구, PEST, STEEP, 3C, FAW, 4P, STP, SWOT, 5 Force Analysis 분석)

기획하는뇽뇽씨 — Fri, 17 Nov 2023 16:28:44 +0900

서비스경험디자인 기사 필기, 실시시험에 핵심정보인 개념정리를 시각화하여, 이해하기 쉽게 정리한 포스팅입니다.

아래의 내용은 환경조사에 해당하는 데스크리서치, 2차연구, PEST, STEEP, 3C, FAW, 4P, STP, SWOT, 5 Force Analysis 분석 개념을 정리하였습니다.

2. 발견하기 Discover _(1) 환경조사

기초 데스크리서치, 환경조사 방법에 대해 알아본다.

2.1 서비스경험디자인 환경조사

2.1.1 데스크리서치

데스크 리서치( Desk Research)
: 관찰조사를 하기에 앞서 관련 문헌을 연구하거나 인터넷 검색 등을 통해서 정보를 수집, 분석하는 작업

목적 : 대상 서비스와 관련된 외부 상황( 트렌드, 시장·정책 환경 변화)로부터 서비스의 내부상황(조직, 협업구조, 서비스 시스템)에 이르기까지 광범위한 이해를 바탕으로 맥락적 상황을 파악
수행과정 : 수행계획 수립> 자료리서치 > 자료정리 > 자료공유
구성요소
○ 서비스배경
○ 제공되고 있는 서비스 상황(사용자 반응, 결과, 영향 등)
○ 중요한 이해관계자
○ 제공되는 서비스에 영향을 주는 기술
○ 새롭게 등장하고 있는 서비스 접점( 모바일 애플리케이션, SNS등)
○ 경쟁구도, 경쟁 서비스 또는 제품

사전조사
: 실제 연구나 현장 작업을 시작하기 위한 준비 작업, 연구 수행 과정에 필요한 '올바른 질문을 찾기 위한 과정'

목적
○ 연구와 관련한 산업, 조직, 경쟁사 혹은 유사경험에 대한 학습
○ 팀 구성원, 동료, 사용자, 고객 또는 이해관계자 등 다양한 관점을 학습
○ 연구와 관련한 잠재적인 인터뷰 대상 인지

2차 연구(Secondary Research)
: 2차 데이터(시장조사 보고서, 추세분석, 학술조사 등을 포함한 정성적/ 정량적 자료 포함)를 사용하는 조사방법으로 2차 연구는 기존 데이터를 요약, 대조, 종합연구의 전반적인 효율성을 높인다.

목적
○ 주제 또는 연구 질문에 대한 연구가 이미 존재하는지 확인
○ 연구질문을 보다 정확하게 공식화
○ 적합한 데이터 수집, 시각화, 종합 방법을 결정

2.1.2 환경조사

A. 거시적 환경조사

: 기업에서 통제 불가능 한 요인들( 정치, 경제, 사회 문화, 기술적 환경 요인)을 파악하여 전략 수립

1️⃣ ⭐ PEST 분석법 (Political 정치, Economic 경제, Social 사회, Technology issue 기술)
: 거시적 환경 분석 및 전략 수립을 위한 목적으로 기업이 시장조사나 전략 분석을 할 경우 혹은 거시경제적 관점에서 의사결정을 내려야 할 때 사용하는 기법이다.

⭐ PEST 확장판, PESTEL 분석 : PEST에 Environment(환경)과 Legal(법률) 2가지 요소를 추가

2️⃣ ⭐ STEEP 분석법 (Social 사회, Technology 기술, Economic 경제, Environment 환경, Political trend 정치)
: 미래에 대한 대응방향을 모색하기 위해 다섯 가지 영역의 변화를 종합적으로 고려하여 문제를 분석하는 시스템적 접근방법이다.

B. 미시적 환경조사

: 기업이 속한 산업 내에 존재하는 마케팅 환경 주체들을 분석하는 것 (경쟁자, 고객, 기업, 핵심 역량, 이해관계자, 협력자)

1️⃣ ⭐3C 분석법(Company 회사, Customer 고객, Competitor 경쟁사)
: 자사, 고객, 경쟁사로 기준을 두어 현 상황 및 행동을 분석하고 예측하여 전략을 도출해 내는 방법

4C분석 ( Company 회사, Customer 고객, Competitor 경쟁사, Channel 채널 또는 Circumstance 환경)

2️⃣ ⭐FAW 분석법(Force at Work)
: 기업 경영에 영향을 미치는 경제, 규제, 시장, 국제 관계의 4가지 외부 환경 측면을 분석하여 기업의 경영활동에 영향을 미치는 정황들을 객관화하고, 이를 통해 경영 환경 및 발전 방향까지 도출해내는 방법이다.

3️⃣ ⭐ 4P, 마케팅 믹스 분석(Product 상품, Price 가격, Place 장소, Promotion 촉진)

4Cs(Consumer/Customer 소비자, Coast 기회비용, Convenience 편의성, Communication 커뮤니케이션)
: cf. 3C의 확장 개념과는 의미가 다른 4C가 있는데, 4P에서 전환된 4C의 개념이다. 기존 마케팅 분석은 기업의 입장이었으나 오늘날 고객 입장에서 바라보는 관점으로의 변화를 의미한다.

4Cs

4️⃣ ⭐ STP 분석 (Segmentation 세분화, Targeting 표적시장, Positioning 포지셔닝)
: 3C 분석을 통해 기업의 마케팅 환경을 분석한 이후
1) 제품의 시장을 몇 개의 시장으로 세분화하고
2) 세분화된 시장을 평가하여 표적 시장을 선정한 이후
3) 각 제품에 대한 포지셔닝을 파악하여 제품에 대한 경쟁 우위를 가져가기 위한 프로세스이다.

구성요소
○ 시장 세분화 기준과 변수(인구통계학적/ 지리적/ 심리적/ 행위적 변수)
○ 타깃 전략(차별화/ 비차별화/ 집중화 전략)
○ 포지셔닝 맵(Positioning Map 지각도 맵) : 소비자가 인식하고 있는 자사 제품과 경쟁 제품을 2차원이나 3차원 그래프 상에 표시한 것

C. 유사경쟁 환경 및 서비스 조사

1️⃣ ⭐ SWOT 분석(Strength 강점, Weakness 약점, Opportunity 기회, Threat 위협)

외부요인 \| 내부요인	Strength 강점	Weakness 약점
Opportunity 기회	SO전략 기회로부터 이익을 얻기 위해 강점을 이용하는 전략	WO전략 약점을 극복하면서 기회를 살리는 전략
Threat 위협	ST전략 위협을 회피하기 위해 강점을 이용하는 전략	WT전략 약점을 최소화 하고 위협을 회피하는 전략

강점과 약점 : 조직 내부요인
기회와 위협 : 커뮤니티 또는 사회작 세력에서 비롯된 외부요인

2️⃣ ⭐ 5 Force Analysis 마이클 포터의 산업구조분석 모델
: 산업 내 경쟁을 결정하는 요인들을 공급자, 신규 진입자, 대체재, 구매자, 기존 경쟁자 5가지 관점으로 분석하여 경쟁의 강도를 알아내고 그에 따른 수익성을 예상하는 방법이다.

5 Force Analysis 마이클 포터의 산업구조분석 모델

구성요소	내용
신규 진입자의 위협	수익성이 있고 진입장벽이 낮은 산업은 경쟁 심화로 인해 이익 저하가 예상, 진입장벽을 높여야 한다.
공급자의 협상력	협상력이 높은 공급업체는 고가 혹은 저품질의 원자재를 제공, 구매 기업 이익에 직접적인 영향 끼침
구매자의 교섭력	구매자가 협상력이 강하면 공급자로부터 저가 혹은 고품질을 요구할 수 있는 권한을 가지고, 생산자의 이익이 낮아진다.
대체재의 위협	구매자가 매력적인 가격이나 양질의 대체품을 쉽게 찾을 수 있어 다른 제품이나 서비스로 전환할 수 있을때 기업의 수익성은 감소한다.
산업 내 경쟁자	기존 경쟁업체 간의 경쟁은 산업이 얼마나 경쟁력과 수익성이 있는지를 결정하는 주요 요인이다.

긴 글 읽어주셔서 감사합니다.

다음은 서비스경험디자인 실행방법의 02. 발견하기 Discover 단계의 (2) 관찰조사방법 개념정리 포스팅으로 찾아올게요.

▼ 서비스경험디자인기사 개념정리 다른 글 ▼

[서비스경험디자인기사] 0.서비스경험디자인의 이해 (디자인씽킹, 서비스디자인, 사용자경험디

youngplan.tistory.com

[서비스경험디자인기사] 1.준비하기 Align 개념정리 (제안요청서, 사전질의서, 디자인브리프, 알렌

youngplan.tistory.com

[서비스경험디자인기사] 1.준비하기 Align 개념정리 (제안요청서, 사전질의서, 디자인브리프, 알렌곡선)

기획하는뇽뇽씨 — Fri, 17 Nov 2023 13:51:39 +0900

서비스경험디자인 기사 필기, 실기시험에 핵심정보인 개념정리를 시각화하여, 이해하기 쉽게 정리한 포스팅입니다.

아래의 내용은 제안요청서, 사전질의서, 디자인브리프, 알렌곡선의 개념을 정리하였습니다.

서비스경험디자인을 어떻게 실행하는가?

1. 준비하기 Align

서비스 디자인의 요구사항을 파악하고 수행 계획을 수립하는 방법을 알아본다.

1.1 서비스경험디자인 요구사항 파악

제안요청서 (RFP: Request for Proposal)
발주자가 특정 과제의 수행에 필요한 요구사항을 체계적으로 정리하여 제시함으로써 제안자가 제안서를 작성하는 데 도움을 주기 위한 문서

포함 내용 : 제목/ 목적, 목표/ 과업내용/ 기대성과/ 수행기간/ 예산/ 참가자격/ 제출서류목록/ 제안요청사항/ 평가기준

사전질의서(RFI : Request for information)
발주자가 제안요청서를 작성하기 전 또는 제안자가 제안서 작성 등 과제 수행에 필요한 정보를 상호 간에 요청하는 정보 요청서

디자인 브리프(Design Brief)
디자인 팀이 의뢰자와 협의하여 만드는 문서

포함 내용: 프로젝트명/ 목표 시장 의뢰사 및 산업의 특성/ 디자인 과제의 성격과 목표/ 결과물의 범위/ 일정/ 예산/ 디자인 팀의 경력과 팀 구성 등 기재

제안요청 타당성 검토
제안요청서 상의 평가기준에서 우수한 평가를 받을 수 있는지 판단하기 위한 기준

포함 내용 : 참가 자격여부/ 자격기준 등 절대적 기준, 유사실적/ 참여인력/ 기업 경영상태의 객관적인 기준, 사업수행의 전문성, 수행방안의 적합성, 경쟁 우위 등의 주관적인 기준

요구사항 문서의 실패
요구사항 문서는 소프트웨어 개발 분야에서 개발을 요청하는 고객이나 사용자의 요구사항을 문서화한 것이다.
이러한 문서는 향후 일어날 모든 사태를 예측하고, 업무의 우선순위가 바뀌지 않는다는 가정하에서 출발하지만 현실은 이러한 전제에 맞지 않아 원활하지 않는 의사소통, 협업부족, 이해부족을 초래할 수 있다.

폭포수 모델 : 분석, 설계, 개발/구현, 시험, 운영 및 유지보수 등 전 과정을 순차적으로 접근하는 개발모델이다.
애자일 프로세스 : 소프트웨어 개발사 내 부서 간 커뮤니케이션을 전제로 하는 방법론
린 프로세스 : 스타트업이 처한 역동적인 비즈니스 환경을 전제로 하는 경향

1.2 서비스경험디자인 수행계획 수립

견적서 산출 및 프로젝트 계획수립

검토사항 : 혁신성의 정도, 결과물의 유형, 가용할 수 있는 자원, 권한 및 제한점, 기술적인 이슈, 이해관계자 등

혁신성의 정도
과제를 통해 개선할 대산에 대한 혁신의 범위 (완전히 새롭거나 부분적이고 표피적인 변화) 파악

상품기획 기본형 프로세스

1. 기회도출	2. 아이데이션& 콘셉트 빌딩	3. 시각화	4. 사업화
산업 경쟁 분석	아이디어 개발	디자인	사업화 검토
트렌드 분석	콘셉트 작성 및 선정
사용자 분석
기회 영역 정의

결과물의 유형

물리적 제품 : 3D 모델링 설계/랜더링
디지털 제품 : Sketch, Adobe XD, Figma 등의 사용자 인터페이스(UI)

→ 프로토타이핑 설계, 서비스, 통합 시스템 등 결과물의 유형에 따라 테스트 방법이 달라지게 된다.

자원

인적자원, 물리적 자원, 예산(용역비용) 등

권한 및 제안

프로젝트 진행팀의 권한과 제한에 따라 디자인 프로젝트의 범위가 정해지며, 그에 따라 프로젝트 내용과 방식이 형향을 받는다.
기술적인 이슈/ 이해관계자 조사/ 프로젝트 과업 내용과 진행방법/ 프로젝트 팀의 구성

계약서 체결

한국디자인 진흥원은 4가지 종류의 디자인 용역 표준 계약서를 제공하여 디자인 전문회사를 지원하고 있다.
표준 계약서 본문에는 계약명, 계약기간, 계약금액, 지급방법, 용역의 결과물, 결과물의 지식재산권, 특약사항의 계약 내용과 계약의 양 주체인 발주기업과 디자인기업, 첨부 서류 목록이 기재되어 있다.

프로젝트 진행 공간

협업을 위한 프로젝트 공간을 설계할 때, 커뮤니케이션이라는 측면에서 알렌 곡선이 자주 인용된다.
알렌 곡선 Allen Curve : 거리가 멀수록 의사소통 빈도가 줄어들어 거리가 15m가 넘으면 일주일 내 의사소통 가능성은 5% 미만으로 떨어진다.

긴 글 읽어주셔서 감사합니다.

다음은 서비스경험디자인 실행방법의 02. 발견하기 Discover 단계의 개념정리 포스팅으로 찾아올게요.

▼ 서비스경험디자인기사 개념정리 다른 글 ▼

[서비스경험디자인기사] 0.서비스경험디자인의 이해 (디자인씽킹, 서비스디자인, 사용자경험디

youngplan.tistory.com

[서비스경험디자인기사] 0.서비스경험디자인의 이해 (디자인씽킹, 서비스디자인, 사용자경험디자인, 더블다이아몬드 프로세스 정의) 개념정리

기획하는뇽뇽씨 — Thu, 16 Nov 2023 17:40:38 +0900

서비스경험디자인기사 필기, 실기 시험에 핵심정보인 개념 정리를 보다 쉽고, 이해될 수 있도록 정리한 포스팅입니다.

서비스경험디자인의 이해를 주제로 작성된 글이니, 저장하고 시험 볼 때 반복적으로 암기하시면 좋겠습니다.

아래의 내용은 디자인씽킹, 서비스디자인, 사용자경험 디자인, 더블다이아몬드 프로세스의 개념을 정리하였습니다.

서비스경험디자인은 무엇인가?

A. 서비스경험디자인의 이해

01. 디자인 씽킹의 정의

❓ 디자인씽킹(Design Thinking)은
디자이너가 생각하는 방식으로 문제를 창의적으로 해결하는 과정이다.

활용방안

다양한 상황과 맥락에서 문제를 찾고 해결하는 접근으로 활용
기업의 혁신을 위한 도구로써 비즈니스 전 영역에서 활용

디자인씽킹에 대한 3가지 관점

1. 혁신 방법론으로서의 디자인씽킹

디자인씽킹을 하나의 '방법론(Methodoloy)로 보는 관점이다.
창의성 + 영감 + 프로토타이핑을 활용 = 감정적, 기능적으로 의미 있는 아이디어 발굴

2. 사고방식으로서의 디자인씽킹

디자인씽킹을 인간이 가진 인지 능력의 유형 중 하나로 보는 관점으로 디자이너 개개인이 문제를 해결하기 위해 사고하는 방법에 집중한다.

3. 마인드셋으로서의 디자인씽킹

디자인씽킹을 문제를 대하는 태도나 자세에 집중하여 이해하는 과정이다.

02. 서비스 디자인의 정의

❓ 서비스디자인(Service Design)은
서비스를 개발하고 혁신하기 위한 과정 전반에서 행해지는 디자인 활동을 포괄적으로 일컫는 개념이다.

활용방안

서비스 사용자를 이해하기 위한 접근 방법에서부터 디자인 방법이나 도구 사용, 서비스 시스템과 프로세스 디자인에 이르기까지 다양한 활동으로 활용

서비스디자인 이해를 위한 3가지 관점

1. 스킬로서의 서비스디자인 : Service Design as a skillset

사용자 조사, 공동 디자인(co-design), 시각화를 위한 도구(사용자 고객 여정지도, 서비스 청사진) 활용 시 디자이너가 가진 스킬에 중점을 두는 것

2. 체계적인 프로세스로서의 서비스디자인 : Service Design as a systematic process

디자이너와 서비스 조직이 밀접하게 공동창작하면서 디자이너가 공동의 프로세스를 이끌며 진행하는 방식
조직 문화에 맞는 체계적인 디자인 프로세스의 적용을 통해 변화를 이끌어 내는 것

3. 접근방식으로서의 서비스디자인 : Service Design as an approach

서비스디자인 조직이 가지고 있는 변화와 혁신을 위한 접근 방식에 대해 높이 평가하는 관점

03. 사용자 경험(UX) 디자인의 정의

❓사용자 경험(UX: Uesr Experience) 디자인은
사용자가 제품 및 시스템을 사용할 때 의미 있고 적절한 경험을 할 수 있도록 경험 전반을 디자인하는 분야이다.
* 브랜딩, 디자인, 사용성 및 기능의 측면과 제품을 획득하고 통합하는 전체 프로세스 디자인 측면을 포함

학계와 산업에서의 정의

학계에서의 논의	HCI(Human-computer Interaction) 및 인터랙션 디자인 분야에서부터 시작되어 현재 디자인, 마케팅 등의 분야에서 널리 사용되고 있다.
산업에서의 논의	사용자 인터페이스(UI: User Interface) 디자인이나 사용성(Usability)과 같은 용어와 번갈아 사용된다. (브랜딩, 디자인 사용성 및 기능 측면을 포함한 제품을 구입하고 통합하는 전체 프로세스를 다룸)

사용자 경험디자인 이해를 위한 3가지 관점

1. 사용동기에 중심을 둔 사용자 경험디자인

사용자들이 제품을 사용하려는 동기와 관련된 다양한 측면이 강조된다. 사용자가 제품을 왜 사용하려고 하는지, 사용이유는 어떤 작업을 위해 이루어지는지 등에 대한 이해와 관련된다.
주로 사용자 경험디자인 프로세스의 초기 단계에서 제품이나 서비스의 사용과 관련한 상황과 맥락에 대한 이해를 높이 하는데 중요한 관점이다.

2. 사용성에 중심을 둔 사용자 경험디자인

제품이나 서비스의 사용을 통해 사용자가 할 수 있는 일, 하고자 하는 일을 가능하게 하는 기능 제공에 중점을 둔다.
어떤 제품이나 서비스의 사용 동기에 대한 깊이 있는 이해를 바탕으로 파악한 사용자의 요구에 따라 그에 맞는 기능을 개발하고 제공하는 것과 관련된다.

3. 접근성에 중심을 둔 사용자 경험디자인

제품이나 서비스가 얼마나 접근하게 용이하고 심미적으로 만족스러운가에 중점을 둔다.
디자이너가 의도한 대로 사용자 경험이 이루어지기 위해서 제품이나 서비스가 어떻게 전달되고 의미 있는 경험을 형성하는지에 대한 고려가 중요하다.

B. 서비스경험디자인 프로세스

01. 더블 다이아몬드 프로세스

❓ 더블 다이아몬드 프로세스 모델은
발견하기(Discover), 정의하기(Define), 개발하기(Develop), 전달하기(Deliver)의 4단계로 구성되어 있으며, 각 디자인 단계는 확산-수렴-확산-수렴의 성격을 지닌다.

더블 다이아몬드 프로세스모델

02. 프로세스 정의

발견하기(Discover)	다양한 리서지 기법을 이용하여 새로운 아이디어를 수집·탐구 하여 문제를 찾아내고 기회나 필요를 발견
정의하기(Define)	발견하기 단계에서 얻은 조사 결과나 아이디어들을 분석하여 핵심적이고 중요한 디자인 문제 파악, 분석도구를 통해 체계적으로 정의
개발하기(Develop)	디자인 브리프를 기반으로 반복적인 디자인 프로세스를 진행, 서비스 콘셉을 개발하고 테스트하여 구체적인 서비스 결과물로 발전
전달하기(Deilver)	서비스나 제품의 프로토타입이 최종 테스트 과정을 거쳐 평가되고 발견된 문제점이나 개선점들이 해결된 후 최종 결과물 도출

현재까지 긴 글 읽어주셔서 감사합니다.

다음은 서비스경험디자인 실행방법의 01. 준비하기 Align 단계의 개념정리 포스팅으로 찾아올게요.

'갓생기획' 소개글

기획하는뇽뇽씨 — Wed, 15 Nov 2023 15:28:28 +0900

갓생기획 블로그에 놀러 오신 모든 분들 반가워요!

앞으로 갓생기획에서 다뤄볼 콘텐츠에 대해 소개합니다.

주제 1. #서비스기획

주로 다루게 될 콘텐츠는 저의 직업과 관련된 글이에요.

주니어기획자로써 배우고, 정리하고, 회고하며

글을 읽는 모든 분들께 유익한 정보를 알리고자 합니다.

주제 2. #자격증

주로 자격증 시험 후기와 자격증 공부 콘텐츠를

정리하여 작성할 예정입니다.

최근에 취득한 자격증은 ADsP, 서비스경험 디자인기사이고

앞으로 GA 자격증 관련 준비를 진행할 예정이에요.

주제 3. #Tool #공부기록

Noiton, Figma, Slag 등 다양한 Tool에 대해 공부하고 기록합니다.