프로덕트 디자이너 역할과 디자인 기초 - 부트캠프 2일차 강의노트 및 리뷰

#1.강의기록

1) 프로덕트 디자이너?

• 디자인 = 문제 해결 과정
  • 결과물을 예쁘게 만드는 예술적 행위와는 다름
  • 예술은 내가 무엇을 표현하고 싶은가
  • 디자인은 사용자가 무엇을 필요로 하는가
• ux/ui디자인 vs. 프로덕트디자인
  • ux/ux : 사용자의 편리한 경험, 제품 특정부분 경험 디자인, 사용자가 ‘어떻게’ 사용할 것인가, 조금 더 디자인적인 부분이 큼
  • 프로덕트디자인 : 사용성, 비즈니스 성공, 제품의 방향성, 제품 전체의 성공과 성장, 무엇을 만들고 왜 해야 하는가, 조금 더 기획자적인 부분이 큼
  • → 프로덕트 디자인은 전체적인 프로세스를 이해하고, 비즈니스와 사용자 모두를 고려하는 종합적인 시각 필요
• 디자인 과정은 불확실하고 복잡한 문제의 복잡성을 덜어내고 명확한 솔루션을 찾아가는 것
• 디자인 역할의 확장
  1. graphic 시각적 소통의 단계
     • 기호, 심볼 등을 통해 메세지를 사용자에게 전달
  2. industrial 물리적 제품과 사물 설계
     • 제품의 형태와 기능을 설계하며 사용자의 생활 양식을 직접적으로 변화시키는 단계
     • ux의 시선을 물리적으로 표현하는 단계
  3. interaction 상호작용 및 ux디자인
     • 사용자와 제품 간의 인터랙션을 설계하며, 총체적인 사용자 경험을 관리
     • 인터랙션을 시간순으로 엮어서 평가하고 개선하는 과정도 포함
     • 온보딩, 리텐션 등 서비스 플로우 전체 설계
     • IA*, 사용자 테스트, 데이터 등을 활용해 사용자에 대한 정보 확인하여 인터랙션을 반복적으로 조정
       
       • IA : 정보 구조 또는 정보 설계(Information Architecture). 서비스 안에 있는 정보들(메뉴, 페이지, 기능 등)을 어떻게 구조화하고 배치할지 정리하는 설계. 사용자가 “어디에 무엇이 있는지”를 직관적으로 이해하고, 원하는 정보를 빠르게 찾을 수 있게 만드는 것이 핵심 목적
  4. system 시스템 설계
     • 단일 제품을 넘어 비즈니스 모델, 서비스 생태계, 사회적 시스템 등 전반적인 시스템 전체를 디자인
     • 데이터나 플로우 등을 설계
     • 옴니채널* 시스템 : 앱, 웹, 오프라인, 고객센터 등 다양한 채널을 하나의 통합된 경험을 제공하는 것을 목표
       • 옴니채널 : 옴니채널(Omni Channel)은 라틴어의 모든 것을 뜻하는 ‘옴니(Omni)’ 와 제품의 유통경로를 의미하는 ‘채널(Channel)’이 합성된 단어
• 사용자가 전반적인 사용 과정에서 어떤 경험을 하게 되는지를 설계하는 것이 프로덕트 디자이너. SO, UX가 중요해.
• UX의 영역
  • 사용자의 전체 여정과 모든 접점에서 경험을 포함
  • 사용 전, 중, 후에 발생하는 사용자와 제품 사이의 감정, 지각 등 모든 상호작용 포함
• 조직에서 업무를 수행할 때 ux가 어디까지 책임을 지는지 파악하면 좋음(회사마다 직무명이나 업무가 다양하게 다름)
• 프로젝트 목적에 따라 달라지는 ux 업무
  • 선행 프로젝트
    • 미래 기술 탐색, 새로운 비즈니스 기회 발굴
    • 리서치, 콘셉트 검증, 비저닝*
      • 비저닝 : visioning. 서비스의 미래 모습·방향을 상상하고 그림으로 구체화하는 작업
    • ex) 말 타고 다니는 시대에 자동차 개발
  • 양산 프로젝트
    • 구체적인 제품/서비스 출시 및 개선
    • 상세 설계, 사용성 테스트, 데이터 분석 기반의 최적화
  • 운영
    • 기존 서비스의 안정적 운영 및 점진적 개선
    • 사용자 피드백 분석, 버그 수정, 작은 단위의 기능 개선
    • 급격한 변화보다는 안정성과 일관성을 유지하며 사용자의 만족도를 높이는 것이 목표
• UXer에겐 협업과 커뮤니케이션이 가장 중요
  • 필요에 따라 기획자, 디자이너, 마케터, cx 등 다양한 직군과 소통
  • 기술적 제약을 이해하고 실현 가능한 디자인 제시
  • 비즈니스 요구사항을 이해하고 데이터 기반으로 의사결정 지원
  • 디자인 시스템, 원칙, 피드백을 통해 일관성 있는 경험 구축
  • 좋은 디자인을 넘어서 조직 안에서 좋은 솔루션을 설득하고 구현할 수 있는 커뮤니케이션 스킬이 중요!@@
• 커리어 전략(참고만)
  • 미래에 어떤 전문가가 되고 싶은지 목표를 설정하고 그에 맞는 경험 쌓기
  • 대체 불가능한 전문 영역 구축 (ex. 코딩을 아는 디자이너, 데이터 분석에 능한 UXer, 특정 도메인에 대한 깊은 이해 등)
  • 끊임없는 학습과 새로운 도전을 통해 장기적인 성장 도모

2) 디자인 기초

• ui : 우리가 직접 보고 만지는 화면 요소
• ux : 우리가 사용할 때 경험하는 것
  • 로딩시간, 화면전환, 정보를 찾는 과정, 직관성 등
• 디자인은 단순히 예쁘게 꾸미는 것이 아니라 기능성과 미학의 균형
  • 기능성 : 디자인 제 역할을 하는가
  • 미학 : 사용자가 프로덕트에 감정적으로 매력을 느끼는지
  • 심리적인 사용성 효과 : 아름다운 디자인은 사용자에게 신뢰성과 낮은 진입장벽 제공.
  • 그러나, 기능성이 없으면 사용자가 금방 질려서 떠남
• 시각 디자인의 기초
  • 조형의 시작 : 점 - 주목, 선 - 방향성, 면 - 영역
  • 인지의 기초 : 형
    • 인간의 뇌는 복잡한 내용을 단순한 형태로 그룹화해서 이해
  • 감각의 확장 : 질감과 공간
    • 여백은 단순히 비어있는 공간이 아니라 정보의 계층을 만들거나 시선을 유도할 수 있는 요소
    • 질감은 시각적으로 풍부해보이는 결과 도출
  • 가장 강력한 전달자 : 색
    • 색의 대비는 가독성과 접근성에 직접적 영향을 미침
  • 언어 그 이상의 조형 : 문자, 타이포그래피
    • 정보 전달뿐 아니라 브랜드의 톤앤매너 전달하고 정보의 위계를 시각적으로 표현
• 조형의 시작 : 점, 선, 면
  • 점 : 시선의 출발과 집중, 위치의 표시, 무게감을 결정하는 최소 단위
  • 선 : 방향성과 리듬감 부여, 요소 간의 구분과 연결을 통해 시선의 흐름 유도
    • ex) 대각선 - 역동성
  • 면 : 섹션 구성과 시각적 무게감, 정보를 그룹화하고 레이아웃의 안정적 기초 형성
    • ui의 대부분은 면으로 구성
  • 점은 시선을 끌어 정보의 시작점 표시
  • 선은 방향을 제시하고 요소 간의 관계
  • 면은 정보를 표시하고 담는 그릇의 역할
  • 인간은 자동으로 패턴을 찾으려고 하기 때문에, 이러한 요소를 활용해서 사용자의 행동을 자연스럽게 유도할 수 있음
• 인지의 기초 : 형
  • 형태별로 심리 효과
    • 사각형 : 신뢰와 안정감, 견고함
      • ex) 은행앱
    • 원형 : 유연함, 조화, 포용적 인상
      • ex) 사용자의 프로필 사진 등 친근함을 강조하는 서비스에서 주로 사용
      • 원은 시선을 중앙으로 모아주기 때문에 중요한 정보를 담을 때도 활용
    • 삼각형 : 역동성, 주의 환기, 에너지
      • ex) 드롭다운 화살표, 경고 등
  • 사용자는 형태를 통해 사물을 인지하고 브랜드의 성격을 직관적으로 파악
  • ① 균형
    • 화면 안의 요소가 어떻게 배치되어 있는지에 따라 사용자에게 안정감을 준다
      • 대칭 균형 : 상하좌우가 대칭, 중앙이 중심 - 안정적이고 신뢰감, 정적이고 단조로워 보일 수 있음
        • ex) 공공기관 앱, 애플 제품 페이지, 공문서, 청첩장 등
      • 비대칭 균형 : 좌우가 다르지만 무게감이나 밀도를 통해 균형을 맞춤 - 대칭균형보다 역동적이고 자유롭고 개성적인 디자인, 무게를 잘못 계산하면 불균형하거나 산만하다고 느낄 수 있음
        • ex) 잡지 - 한쪽엔 사진 한쪽엔 글,
      • 크거나 진할 경우 무겁게 느껴짐
      • 좌우 배치, 색감과 질감까지 고려해서 디자인
      • 균형은 단순히 좌우를 맞추는 것이 아니라 화면의 안정감과 몰입도를 고려하는 것
    ② 강조
    • 사용자가 어디에 집중할지, 눈길을 어디에 둘지 설정
    • 다양한 시각적 수단을 활용해 강조
    • 구성 안에서 시각적 무게를 결정하고, 공간과 원근을 설정한다.
    • ex) 중요한 버튼은 색깔 등을 통해 강조, 뉴스 등에선 정보의 중요도에 따라 크기와 색깔 조정 등
    • 콜트 액션 버튼 : 행동을 유도하는 버튼
    • 정보를 강조할 때는 중요한 정보는 굵기, 색, 아이콘 등을 활용해 배치
    • 모바일 환경처럼 작은 화면에선 시선이 제한적이기 때문에 강조가 중요
    ③ 비례
    • 비례가 맞지 않으면 산만해지거나 중요한 정보가 눈에 들어오지 않을 수 있음
    • 시각적 조화를 이루기 위해선 요소 간 크기, 여백의 배치, 글자 크기 등을 고려해서 배치해야 함
    • 비례는 요소간의 비율차를 통해 디자이너가 의도한 형태로 사용자가 프로덕트를 인지하게 하는 방법
    • 작은 화면에선 비례가 중요
    • 레이아웃 비례도 잘 고려하면 좋음
    • 사용자의 시선이 자연스럽게 따라갈 수 있도록 설꼐하는 것이 중요
    • 화면 안의 모든 요소가 서로 잘 어울리도록 조정

• 감각의 확장 : 질감과 공간
  • 질감 : 디지털 화면에서 시각적 촉각을 제공해 현실감과 밀도를 높임, 브랜드 경험의 깊이를 더하는 요소 ex) 그림자, 노이즈 등
  • 공간 : 여백의 미학, 정보의 위계를 명확히 하고 인지 부하를 줄여주는 시각적 호흡 장치.
  • 가장 강력한 전달자 : 색 - 시각디자인에서 가장 중요한 요소
    • 사용자의 감정을 가장 빠르게 자극하는 직관적인 도구
    • 색상 : 브랜드의 성격 정의
    • 명도 : 밝고 어두운 정도
    • 채도 : 색의 선명함과 원색성
    ① 명도 : 색의 밝기
    • 같은 색이어도 명도에 따라 느낌이 다름
    • 명도가 높으면 밝은색(흰색에 가까움), 낮으면 어두운 색(검은색에 가까움)
    • 다크모드 등에 밤에 가독성을 높이거나 배경과 글씨나 버튼의 명도 차이를 통해 중요도와 위계를 설정할 수 있음
    • 밝은 명도 : 가볍고 활발
    • 어두운 명도 : 차분하고 안정감
    • 시각적으로 어떤 인상을 전달할지 구상 가능
    ② 채도 : 색의 선명함(색의 순도)
    • 회색을 얼마나 섞였는지
    • 채도가 낮으면 색이 회빛이 돌며 차분해 보임
    • 색이 주는 감성
      • 빨강 : 강렬하고 활기
      • 파랑 : 신뢰, 차분
      • 초록 : 자연스럽고 건강
      • 노랑 : 밝고 긍정
      • 검정 : 고급스럽고 강한 느낌
    • 전략적 배색 활용법
      • 조합해서 색을 사용할 때 더 강력한 효과
      • 보색 : 강렬한 대비, CTA* 버튼이나 경고 알림 등 주의를 환기할 때 사용
      • 유사색 : 인접한 색의 조화. 안정적이고 일관된 브랜드 톤앤매너 구축에 적합
      • 삼각색 : 균형감과 활기. 다채로운 색감을 유지하면서도 시각적 균형을 유지
    • 컬러팔레트 : 색상 모델과 포맷을 사용하여 색상을 정의하며, 색상 간의 수학적/지각적 관계를 기반으로 작동
      • hex 코드(16진수), RGB
• 타이포그래피 : 글자를 배치하고 디자인하는 기술과 예술. 폰트(서체), 글자 크기, 간격, 정렬, 색상 등을 조절
  • 폰트 종류
    • 세리프/명조체 : 글자 끝에 장식이 있는 폰트 - 전통적, 신뢰감 있는 느낌, 감성적인 이미지 전달할 때 사용 / 웹이나 모바일 등 작은 화면에서 장식이 좀 방해될 수 있음
      • ex) Times New Roman, Georgia
    • 산세리프/고딕체 : 장식이 없는 깔끔한 폰트 - 현대적, 직관적인 느낌. 모바일이나 웹 화면에서 많이 사용하는 폰트. 가독성 괜찮음, 제목이나 버튼 등 UI요소 어디든지 활용 가능. 볼드 등을 활용하면 강조할 수 있음
      • ex) Arial, Helvetica
  • 글자 크기와 계층 구조
    • 제목, 본문, 캡션 등 글자의 크기를 조절하여 중요한 정보에 시선을 유도
  • 자간 : 글자 사이의 간격 조정. 자간을 적절히 조절하면 텍스트의 가독성을 향상시키고, 글자 간 응집력 또는 개방감 표현 가능
  • 행간 : 줄 사이의 간격 조정
  • 타이포그래피의 두 분야
    • 기능적 타이포그래피 : 미적 기능<가독성, 판독성,
      • 제목이나 본문, 캡션이 구분되어 있음. 동일한 규칙이나 폰트 등이 일관되게 적용
    • 실험적 타이포그래피 : 미적기능>가독성,판독성
      • 시각적으로 강렬한 이상을 남기고 싶을 때 활용
      • 전통적인 규칙을 의도적으로 변형
• 레이아웃
  • 그리드(레이아웃의 뼈대)가 주로 활용
  • 타이포그래피, 사진 및 일러스트레이션, 여백 등의 각 구성요소의 배치
  • 텍스트 정렬은 가독성과 분위기에 영향을 줌
    • 왼쪽 정렬 : 가독성
    • 오른쪽 정렬 : 감각적
    • 가운데 : 제목
    • 전체 : 정리된 느낌
    •  

#2. 과제

과제 재밌고 만들면서 보람 있었지만, 내 예상보다 시간이 좀 걸렸다.

폰트러버라 사실 폰트 다운 받는 데에 너무 많은 시간을 소요해버렸다.

다음엔 수업 실습 시간 내에 과제 제출하는 것을 목표로 하여, 시간을 적절히 분배해야겠다.

1-1) 나만의 색상 팔레트(무드보드) 만들기

• 키워드
  • 메인 : 크리스마스, 겨울, 나홀로집에
  • 보조 : 따뜻함, 아늑함, 빈티지
• 참고 이미지

@핀터레스트

 

• 색상팔레트(무드 보드)

1-2) 제작한 색상 팔레트를 보고 색상 팔레트의 색이 주는 인상을 적어봅시다.

색상 코드	색이 주는 느낌
#73020C	무도회장의 레드카펫 / 고급스러우면서 따뜻한 빨강의 느낌
#18261C	겨울의 벽난로 옆 전나무 / 조용하고 편안한 느낌
#A67F5D	나무의 밑동으로 만든 식탁의자 또는 모카라떼 / 따뜻하고 아늑한 금색의 느낌
#401910	핫초코 / 달달하면서 포근한 곰돌이 인형 같은 느낌
#BDB4AE	햇빛 받은 은반지 / 회빛이라 자칫 차가울 수 있지만 묘하게 온기가 느껴지는 느낌

2-1) 서체와 레이아웃 레퍼런스 수집

2-2) 컬리 화면 제작하기 (타이포만)

• 서체는 프리텐다드로 제작했다. 프리텐다드가 모던하고 가장 깔끔한 느낌이 나는 폰트 중 하나라 애용하고 있다.
• 그 외 아이콘은 어떻게 하면 빠른 시간 내에 구현할 수 있을지 조금 더 고민해봐야겠다. 우선은 어울리는 다른 기호로 대체하여 제작했다.
• 개인적으로 후기와 공유 버튼 위치를 수정하고 싶다.

2-3) AI로 글 작성 후, 이를 기반으로 자유롭게 타이포그래피 레이아웃 화면 만들어보기

• 레퍼런스

@핀터레스트

• 선정 이유
  • 대비되는 메인 색상 두 가지를 사용하여 팝아트의 느낌을 감각적으로 표현
  • 절제된 색상을 통해 전달하고자 하는 이미지와 분위기가 효과적으로 강조
  • 영어와 한국어 모두 고딕을 사용하여 일관성을 유지하면서도 영어 폰트를 한글 폰트보다 세로로 긴 폰트를 사용함으로써 제목이 시선을 끌 수 있는 디자인
  • 본문 내용이 뒤의 배경 이미지와 겹치면서 다소 시인성이 떨어지는 것은 아쉬운 부분
  • 레퍼런스를 이미지를 참고 및 보완하면 제한된 색상으로 전체적인 분위기를 강조할 수 있는 좋은 디자인 시안이 될 것 같아서 해당 레퍼런스를 선정하였음
• 결과물

• 비둘기의 털색깔 중 짙은 보랏빛을 메인컬러로 잡고 그와 대비되는 형광빛 노랑(보색)을 활용하여 디자인
• 레퍼런스 시안의 바나나 대신 깃털 오브제를 사용했음
• 레퍼런스는 다소 불균형하다고 생각하여 양쪽의 제목을 각각 좌측 정렬, 우측 정렬하여 대칭을 맞추고자 함

• 피드백(개인)
  • 시각적 요소를 잘 반영했음
  • 균형감을 고려해서 배치한 부분도 괜찮음
  • 메인타이틀이 포인트가 되도록 부제목은 정렬을 살짝 내리거나 글자 크기 조정하면 좋을 듯
  • 좌우정렬은 좋으나 자간 줄이고 행간 공간을 줘서 조절해서 본문 내용이 블록보단 한 줄로 인식될 수 있도록
  • 숫자나 영문은 고딕체와 잘 어울리는 산세리프체를 적용해보는 것도 좋을 것 같음
• 피드백 반영하여 수정한 버전

 

<수정 전 후 비교>

 

#3. 과제피드백(전체)

• 사용된 폰트 찾는 법
  • 방법 1 : https://www.sandollcloud.com/font-finder-image에 궁금한 폰트 캡쳐해서 이미지 업로드
  • 방법 2 : 요소 검사 단축키로 Inspector 창에서 정보 확인
    • 맥: Cmd + Shift + C
    • 윈도우: Ctrl + Shift + C
• 폰트는 일관성 유지하는 게 좋음
• 선정이유 작성하면 작업할 때 도움이 되기 때문에 간단하게라도 작성하는 것을 추천
• 텍스트와 이미지의 볼륨감이 비슷하면 어디에 시선을 둬야 할지 모르겠음 → 조금 더 포인트를 주고 싶은 부분을 강조
• 짧은 글은 괜찮지만, 긴 줄글은 줄바꿈이 잦으면 가독성이 떨어질 수 있음
• 의미적인 부분 고려하여 행간이나 자간 조정