큰일이다
모르는 게 너무 많다;;
0. 오늘의 노래
1. 오늘 학습 키워드
| 오전 학습 목표 (~14시) | 오후 학습 목표 (~19시) | 저녁 학습 목표 (~21시) | |
| 손민정 | ✅ 팀 목표/규칙 작성 ✅ 친해지는 시간 가지기 |
✅ 제공된 강의 확인 ✅ 워크 플랜 세우기: 1-2까지 완강 |
✅ TIL 작성 ✅ 미달성 목표 달성 |
FULL COMBO!!!
2. 오늘 학습 한 내용을 나만의 언어로 정리하기
09:00
눈물의 송별회 ㅋㅋㅋ
오전부터 청천벽력 같은 일이 떨어졌다. 오늘자 카타까지 이케이케 잘 해결한 팀원들과의 생이별..😥
물론 여러 사람들과 어울리며 협업하는 법을 배웠으면 한다는 취지는 이해했지만..! 그렇지만..!!!ㅠㅠㅠㅠㅠ
쓸쓸함은 잠시 뒤로하고..ㅠㅠ 디자인 카타부터 기재하겠다.
현빈님이 들고 와 주신 오늘의 주제🔗
관련 브런치 글을 첨부해 주셔서 나 또한 별첨한다. 바텀시트에 대한 고찰.
사실 알고 있었다. 어떤 게 사람을 더 짜증나게 하는지. 사람을 짜증나게는 하지만 클릭 수를 늘릴 방법은 명실상부 B라고 생각한다. 제시안에 올라온 두 가지가 전부 증시 앱 혹은 식품 마케팅인 만큼, 이 바텀 시트를 띄우는 목적은 조금이라도 더 많은 사람에게 노출되고 결제 전환율을 상승시키는 것일 터다. 마케팅 부서 인턴 짬빱 어디 안 간다니까.
처음에 B안을 선택했던 것도 그러한 이유에서였다. '어디가 좋을까요?' 물론 마케터의 입장에서는 당연히 B가 났겠지, 클릭.
그런데 그게 아니더라고요
여기서 문제가 있었다. 근거와 레퍼런스 등을 찾아 자료의 바다를 뒤지는 중 이런 자료🔗를 본 것이다.
ㅋㅋㅋ
ㅎㅎㅎ
1️⃣ 고객 확보 단계에서 고객 유지율을 해치지 말 것
✔ 기만적 패턴(Deceptive patterns)을 피해야 한다.
기만적 패턴이란 사용자에게 유리한 것처럼 보이지만, 실제로는 기업의 이익을 극대화하는 전략을 의미한다.
이러한 방법은 단기적으로 수익을 증가시킬 수 있지만, 사용자 만족도를 떨어뜨려 장기적인 고객 이탈을 초래한다.
ㅎㅎㅎㅎㅎㅎ
게다가 다음 게시글🔗도 한몫했다.
바텀시트의 의의.
매우 중요한 정보도 아니긴 하다. 그냥 내가 새로이 깨달은 것 뿐. 비록 예시로 사용된 건 광고지만, 그 또한 서비스의 이용에 크게 영향을 끼치거나 하는 종류가 아니었으니까. 출처의 게시글도 꼭 보길 바란다. 바텀 시트가 모달과 논모달로 나뉘는 것도, 컴포넌트의 종류 등도 전부 다루고 있다. 땡스 포 작성자님🥂
바텀시트 팝업의 닫기 버튼 위치를 고민하는 과정에서, B안처럼 상단 아이콘을 배치하면 사용자가 즉시 닫기 어렵기 때문에 전환률을 높이는 데 유리하다 판단했다. 하지만 바텀시트 자체가 보통 ‘중요도는 낮지만 맥락적으로 유용한 정보’를 담는 UI라는 점, 단기 전환을 위해 사용자의 의도를 방해하는 방식은 기만적 패턴으로 오해받을 수 있고 장기적으로 브랜드 신뢰와 고객 유지율을 해칠 수 있다는 우려 또한 뒤따랐다. 링크에서도 강조하듯, 단기 수익보다 사용자 경험을 우선하는 제품이 결국 더 큰 신뢰와 지속 이용을 이끌어낸다. 따라서 닫기 버튼을 어렵게 만드는 방식 대신 콘텐츠의 설득력을 높이거나, 노출 타이밍·개인화·명확한 가치 제안 등 ‘사용자가 자발적으로 계속 보게 되는 구조’를 설계하는 것이 바텀시트 전환과 장기 UX 모두를 살리는 방향으로 보인다.
물건을 담으면 자연스레 뜬다. 바텀 시트 내에서 스크롤해 하단으로 향하면 7일간 보지 않기 버튼도 존재.
10:05
CH 2. 디자인 입문 주차 발제 안내
~11:25?
UXUI 디자이너 포트폴리오 조언 듣기
이 때 감사하게도 S튜터님이 DM을 주셔서 팀원들과 함께 조언을 들으러 갔다~
신입 UX/UI 포트폴리오 트렌드 & 조언
- 부트캠프가 많아지며 신입 포트폴리오 전반적 수준이 크게 향상
- 단순 디자인이 아닌 UX 프로세스 + UI 결과물 모두 요구되는 흐름
1. 요즘 신입 포트폴리오 흐름
UXUI 두 가지 모두가 필수 노출 요소 → 비중 차이 둘 것
- 포폴 구성: 과거의 디자인 중심 -> 현재의 UX 프로세스 위주
- UX가 전무하면 광탈
- 대다수의 포폴에 케이스 스터디 형태의 UX-UI 과정 존재
너무 ‘UX만’ 강조하는 포폴 증가
- 대표들 공통 언급: “UX에만 치우친 포폴 다수”
- 흐름 중심, 장표 중심의 UX 설명은 좋으나 UI 비중이 적어 아쉽다는 평가 대다수
2. 실제 채용에서는 어떤 부분을 더 보는가?
합격 포폴 판단 비중: UI > UX
- AI 활용 범위는 넓으나 UI 완성도(비주얼)는 아직 AI가 사람을 못 따라오는 경향
- 그에 따른 기업 합격 기준
회사 규모에 따른 차이
- 작은 회사: UX를 교과서적으로 할 여유 없음
- 큰 회사: UX만 전문으로 파는 팀도 있을 정도로, 신입에게 UX 깊이를 과하게 기대하진 않음
3. 추천 포트폴리오 비중
UX 30~35% : UI 60~75%
→ 회사마다 달라질 수 있음
- 독창성 중시: 증가한 지원서 중에서도 경쟁력 갖출 것
4. 성장 전략 조언
UX는 독학이 가능하나, UI는 실무자 피드백이 필수적
- 한계가 있는 외부 공유 및 피드백 요청
- 전문성이 다소 부족한 GPT
이후 자리로 복귀해 캠 켜놓고 9시간 빡공모드 ON.
11:30~
새로 열린 2주차 강의를 듣기 시작했다. 이론 위주긴 했지만 개인 메모장에 이것저것 적으며 듣다 보니 시간도 쑥쑥 가더라.
미처 고려하지 못한 부분이 많았다. 몇 가지 적어 보자면..
- 적녹색맹을 고려해서 컬러 텍스트만 사용하는 것이 아니라, 아이콘도 같이 쓰는 게 좋다!
→ 이건 진짜 생각치도 못했다. 아이콘이 있으면 훨씬 직관적이고 좋다고는 생각했는데..이런 이유도 있을 줄이야. 갈 길이 멀구나.
- 보통 텍스트에 링크를 삽입하면 이런 방식으로 표현된다. 짧은 텍스트라면 또 모를까, 내용이 긴 본문 텍스트 콘텐츠 같은 경우에는 링크나 버튼을 분리해서 작업하는 편이 권장된다고. 스크린 리더가 위치를 파악하기도 쉬워지고, (내 짐작이지만)시선의 흐름도 훨씬 자연스러워지지 않을까. ..강사님이 하신 말씀이었나?
12:13~
위클리 플랜 세우기
챕터 1을 다 수강한 뒤였던 것 같다. 수강을 빠르게 끝내고 복습이나 개인 활동에 집중할 수 있도록, 템플릿 2일 플랜과 3일 플랜이 제공되었는데..
나의 힘과 능력으론 할 수 없었다. 노선을 틀어 3일 플랜으로 가기로 했는데, 이것도 어려우만 방향 또 틀어야지 트랄랄라...
이건 강의 중 뼈저리게 공감해서 들고 왔다.
과제 진행도 너무 열심히 했다. 장하다 나.
그냥 넘기기 아쉬우니 첨부하기로.
과제는 사례를 찾아 오는 거였고..
우선 사례로 들고 온 디자인을 첨부한다.
1️⃣ 직관적인 디자인
1. 사용자 행동 유도
: 컬러로 계층 중점을 준 버튼을 사용한다.
2. 정보를 시각적으로 표현
: 아이콘을 사용해 정보를 전달한다. 더해 플레이스 홀더의 텍스트를 사용해 입력해야 할 텍스트 종류를 공유한다.
3. 대비 높은 색상 조합
: 4.5:1보다도 쨍한 컬러일 듯(이건 접근성 측면이긴 하다). 코드는 확인하지 않았다.
4. 간단한 레이아웃
: 간단..간단..간단한 레이아웃이란 뭘까? 사실 쿠팡 UI 자체가 조금 난잡(!) 하다는 평을 듣는 만큼, 해당 사항에는 포함되는지 확신이 서지 않는다.
2️⃣일관된 디자인
1. 다양한 디바이스 간에 일관성
: 좌측 사이드바(채널/DM) + 우측 대화 영역이라는 기본 레이아웃을 다양한 디바이스에서 동일하게 사용한다. 웹의 경우 페이지 내 분할된 UI로, 앱은 좌측 슬라이드로 구성을 유지했다. 웹과 앱 보두에서 아이콘 스타일과 개념도 동일하며 팀 내부에서의 노력으로 플랫폼 간의 지표를 통합해 분석하는 등 많은 노력을 기울였다. 🔗
2. 쉬운 사용성
: 처음 접해도 빠르게 익숙해질 수 있는 간단한 원리를 유지했다. 좌측에 채널과 DM이, 중앙에 메세지가 존재한다. 기능은 많지만 모두 텍스트 기반 워크플로에 맞게 배치되어 있어 러닝 커브(학습 소요 시간)가 비교적 완만하다.
3. 디자인 시스템
: 컴포넌트, 인터랙션 패턴, 퍼포먼스 목표를 공동 자산으로 관리하며 여러 클라이언트(디바이스 등)에서 재사용한다. 때문에 기기를 변경해도 UI가 갑자기 이질적으로 보이지 않는다.
+ 🔗고마워요 Perplexity!!!
물론 나도 프롬포트만 돌린 건 아니다. 제시된 자료들도 전부 뒤져보고 수정했다고~~~~
3️⃣ 가독성을 고려한 디자인
1. 여백 활용
- 행 간*섹션 간 일정한 수직 여백을 두어 추천 행들이 시각적으로 구분되도록 한다.
- 홈, 탭 네이게이션, 설명 영역 등은 상대적으로 여백을 줘 텍스트 밀도를 낮춘다. 썸네일이 시선을 끌되 인터페이스 전반을 답답하지 않게 구성했다. 🔗
2. 콘텐츠 그룹화
: 동일한 콘텐츠를 가로 스크롤 행으로 묶어 한 줄을 동일한 주제의 그룹으로 보이게 했다.
3. 크기와 비율
: 히어로 섹션은 아주 크게, 하단 가로 리스트 타일은 일정한 비율(16:9에 근접한 카드)을 반복해 시각 리듬을 맞췄다. 하나의 카드 안에서 텍스트 또한 계층을 나눠 분류했다.
4. 계층 구조
- 최상단에는 상위 네비게이션을, 그 아래 행 단위 카테고리를 둔 2단계 계층 구조다.
- 각 행 안에서는 왼쪽에서 오른쪽으로, 위에서 아래로 중요/추천도에 따라 정렬했다. 자연스러운 우선순위를 형성하는 것이다.
- 자세한 건 영상을 보도록. 그게 진짜로 킥이다. 🔗
결론적으로, “가로 스크롤 행 + 큰 비주얼”을 중심으로 시청 선택을 빠르게 돕는 레이아웃 구조를 가지고 있다.
사실 이것 말고도 뉴욕타임스도 같이 분석해 달라고 했었다. 예전에 패션 매거진 쪽에서 인턴 활동을 했다 보니까, 언론 사이트의 UI 구조에도 흥미가 꽤 있어서. 이전부터 이어진(중간중간 때에 맞게 변형했겠지만) 전통의 뉴스 매체 서비스와 최신 트렌드(라고 해도 되나)의 선두주자인 영상 매체 서비스가 각각 어떤 점을 중점으로 삼았을지 궁금하기도 했다.
궁금한 사람은 상단의 Perplexity 링크를 참고하도록! 모든 걸 두고 왔다.
14:54~
그리고 시작된 2강 수강. 이 때는 꿈에 부풀어 있었다..오늘 중으로 4강까지 갈지도 모른다는.......
간단하게만 정리해 두겠다.
예시로 스타벅스를 드셨는데, 그 말대로 스벅하면 가장 먼저 생각나는 색은 초록이었다. 그런데 내부 매장을 생각해 보고, 앱 UI를 확인해 보니 정말 예상보다도 초록초록한 컬러가 적었던 것 같더라. 솔직히 감탄했다. 스타벅스 파트너?의 앞치마 색..? 또 다른 예시로 나온 이마트는 좀 갸우뚱했다. 노란색이 꽤 쓰이는 것 같았는데? 그리고 나온 예시를 보면 또 납득. 이렇게까지 쉬운 학생이어도 되는 걸까.
이건 마우스고, 이건 클릭이야. 거의 그것처럼 배웠다.
문제는 정말 새로 듣는 것 같은 내용이..좀 있었다는 거. 분명 배웠을텐데 가물하더라....
스플래시는 보통 세컨더리 컬러를 사용하거나 로고의 프라이머리 컬러가 잘 보이도록 흰 화면을 사용하는 경우로 나뉜다고.
보조색 관련도 흥미로웠다. 난 내가 생각하기에도 색깔치라 어떻게 색조합을 해야 할지 정말 고민이 되는 편. 당근은 채소 당근에서 연상되는 주황색-녹색을 프라이머리-세컨더리 컬러로 사용했다고 한다. 다만 보통은 유사색을 훨씬 많이 쓰니, 이건 드문 경우라고.
그리고 이것도 생각 못 했던 거.
배경/컬러는 다크/라이트 모드에 따라 바뀌어야 한다!!
생각해보면 당연하다. 나는 생각을 안 한 거고.......😑
우측의 통과 컬러는 프라이머리 컬러의 색이 다르지만, 사용자가 보기엔 같아 보일 것이다. color를 확인하자. 시각적인 게 중요!!
그리고 이건 진짜 생각 못 했는데!!!
형태에 따라서도 사용하는 컬러가 바뀌어야 한다.
예시에서 보이는 거랑 같이, 컬러가 똑같아도 도형(원) - 텍스트의 부피 차이가 있기 때문에 달라 보일 수 있다.
때문에 형태에 따라 컬러 색상값을 조정해 가독성을 높여야 한다.
그리고 시간은 흘러흘러 폰트로 넘어간다.
중간중간 든 의문점도 기재해 뒀다. 이건 나중에 한 번에 정리해서 튜터님께 바쳤고!! 쭉 읽자!!!
~18:45?
김다희 튜터님께 질문 정리본을 바치고 명쾌한 해답과 조언을 얻었다.
이 부분이 킥이다.
나는 능이 할 수 있는 인간이다!
페이지에 그냥 질문방을 만들었다. 이렇게 정리해 두니 한결 낫더라.
강의를 쭉 수강하며 생긴 궁금증이 4~5개 정도였다. 궁금할 때마다 찾아가 여쭤보기에는 내 시간도, 튜터님의 시간도, 나중에 궁금한 게 추가로 생기거나 이해가 덜 될 나에게도 너무한 처사인 것 같았다.
그래서 궁금한 게 생길 때마다 메모장에 책갈피를 꽂아주고 궁금증을 적었다.
그런데..당연하지만 이것도 시간이 걸렸다. 질문 정리 작업은 17:10?30? 정도에 시작해서 50분을 지나..55분을 지나..꽤 오래 이어졌다. 한 18:25분이었나. 휴!
하지만 그만큼의 성과가 있었다고 자신한다.
쨔잔.
참고로 이후에 강의 또 듣다가 궁금한 게 추가로 생겼다 아하하하하하하
내일이 기다려진다......아니 진짜로.....
~19:30
팀원평가 및 만족도 조사 끝. 강의 재수강!
그리고 시간은 흘러흘러 현재로 향한다.
3. 학습하며 겪었던 문제점 & 에러
- 지금까지 이걸 쓰는 나 자신이 에러고 호러다
자고싶어요 엄마 씻고 자게해 줘 어 어 어 어 어
4. 내일 학습 할 것은 무엇인지
| 오늘 달성한 목표 | 오늘 달성 못한 목표 & 이유 | 내일 목표 | |
| 손민정 | - 팀 노션 등 작성 - 강의 2-3 완강!!! |
- TIL 작성 및 정시퇴근..😢: 현재시간 20:13.. 여기 아직 사람있어요옥 그리고 23:11시가 되었다 하-하 |
- 강의 2 HW 제출 - 강의 4. 컴포넌트 완강 - 개인 과제 발제 확인 및 플랜 수정 |
나는 신이다
나는 능이 할 수 있다
나는 해낸다~~~~~!!!!!!
이 은혜를 튜터님들과 매니저님들께 돌립니다 GOAT.
'대외활동_스파르타클럽 UXUI 디자이너 10기' 카테고리의 다른 글
| [TIL] ㅈㄷㄷ ㅈㄷㅇ (1) | 2025.12.08 |
|---|---|
| [TIL] 집갈래 (1) | 2025.12.05 |
| [내일배움캠프] 포폴 검수받고 이리저리 푸닥거리기 Day (0) | 2025.12.03 |
| [내일배움캠프] 오늘은 오늘의 해가 뜨고 내일은 내일의 일이 밀린다 (0) | 2025.12.02 |
| [내일배움캠프] 끊임없이 이어지는 삽질_자괴감과 땅바닥 머리박기의 반복 (0) | 2025.12.01 |
