eun9077 님의 블로그

UXUI 인턴의 신규화면 디자인?! [인턴 6주차] | 스나이퍼팩토리 UXUI 인턴형 프로그램 9기

eun9077 — Sun, 14 Dec 2025 23:08:08 +0900

안녕하세요~

밀린 6주차를 정리하러 왔어요

벌써 12월 중순이네요(글 작성 시점)

6주차에는 첫 눈이 왔었어요~

갑자기 폭설이 와서 다들 퇴근길이 힘들었을 것 같아요

직장인의 삶이란...

정리 가봅시다!

Week 6

12.1(월)~12.2(화)

월-화 동안은

사업자등록 화면에 시스템 적용하는 건 잠시 홀드하고,

지난번에 변경된 기획에 따라

적응형으로 모바일 1차 시안을 모두 작업하고

컨펌 요청을 드렸어요

(같은 디자인으로 내용만 달라지는 바리에이션은 남겨두고요!)

이후에 멘토님이 코멘트로 피드백을 남겨주셨습니당

+++

작업하다 느꼈는데, 지난번에 언급했듯이

회사 서비스 특성상

법률과 관련된 긴 설명글이 많다보니

단촐한 레이아웃에 키비주얼이나

이미지로 승부보는 것이 아니라

정말 위계를 나누고, 강조/덜 강조할 것들을 구분하는

그런 센스가 많이 필요했어요

타이포그래피, 그룹핑, 간격 조절이

디자인의 키포인트이다보니

기본기 다지기에 정말 도움이 되는 듯해요

(너무 자주 말하나...ㅎ)

연어덮밥 사랑해

월요일에 먹은 점심과

퇴근길에 본 트리

12월이라는게 딱 실감됐어요

12.3(수)~12.4(목)

수요일에는 외부견학이 있어서

점심시간이 30분 정도 당겨졌어요

그래서 밥을 빨리 먹었습니다 ㅎㅎ

회사에 고등학생 신분으로 고용 연계 실습? 형태로

근무하는 분이 계시는데, 학교 후배분들이 견학을 오셨어요

저는 제 업무하느라 제대로 볼 수 없었는데

고등학교 2학년...들이더라고요

너무 어리다....! ((((( 부럽다 )))))

목요일에는 바리에이션 페이지까지 모두 작업했어요!

세부페이지 정말 많습니다... ^^

PC 작업이랑 다른 내용은 없는지,

설명에 오타가 있거나 빠진 건 없는지 체크하는 것도

꽤나 시간이 많이 걸렸어요

특히 새하얀 바탕에 까만 글이 많은 화면을

작업하는 건 눈이 너무 피로하더라고요...

인공눈물은 필수템

이 날은 돈가스 먹었어요 ^_^

12.5(금)

리뉴얼 디자인 모바일 버전 작업이 모두 끝나고

최종 컨펌만 기다리고 있기 때문에

(멘토님이 오타, 간격, 누락된 내용 등 최종 검수)

기존에 하던 사업자등록에 디자인시스템 적용 작업을

이어서 진행했습니다

+++

그리고 이 날 신규기능 디자인 업무를 분장받았어요....!

[인감증명서 정기배송] 서비스를 개선하고

신규기능에 대한 화면을 디자인하는 거였어요

먼저 인감증명서와 인감카드의 정의와 차이를 알아야하는데요,

인감증명서는 도장의 진위여부를 증명하는 문서,

인감카드는 인감증명서를 발급하기 위한 도구

로 이해하면 됩니다!

그래서 신규화면은 무엇이냐!

인감증명서는 원래 구청이나 주민센터의 무인발급기에서

발급받을 수 있는데요. 근데 무인발급기도 모든 곳에 설치된게 아니라

별도로 설치된 곳을 알아보고 가야했어요

1. 직접 방문해야하는 번거로움

2. 발급수단인 인감카드를 관리하기 어려움

3. 증명서가 정기적으로 필요한 경우(매번 가기 어려움)

이러한 애로사항과 니즈가 있어서

인감카드를 저희 회사에서 수거해서 보관하고,

고객이 필요할 때/혹은 미리 등록한 일자에 맞춰

인감증명서를 대신 발급해서 우편으로 발송해주는 겁니다!

이 기능에 대한 기존 화면을 개선하는 작업이 주였어요

새로 추가되는 화면이 있기 때문에

사실상 신규기능이라고 말씀해주셨습니다

알려주신 유의사항이나 팁,

잊어버리면 안 되는 것들을

빠르게 메모하면서 업무 설명을 들었습니다

글씨가...날라가서 부끄러우니 모자이크...^^

그리고 신규화면에 대한 기획서도 공유받았어요!

업무 시작은 다음주인 7주 차부터 시작입니다

마감 기한은 제가 직접 설정하라고 하셨는데요

큰 틀에서 총 3개의 다른 화면을 디자인하는 거라서

일주일 정도면 타이트하게 할 수 있을 것 같다고

알려드렸더니 흔쾌히 OK 해주셨습니다

리뉴얼 디자인 모바일 작업이

생각보다 엄청 길어져서 걱정이 많았어요

근데 거의 마무리해서 후련하네요...!

최종 검수 중이라 약간 긴장되는데

오타나 빠진 내용이 없는지 점검하면서 했기 때문에

아마 큰 문제 없이 사소한 디테일 수정만하고

컨펌이 날 것 같아요

신규화면 업무를 받았는데,

아마 이게 저의 마지막 업무가 될 것 같네요!

8주차까지 뒷심있게...해보려구요

화이팅...!

본 후기는 스나이퍼팩토리 UXUI 인턴형 프로그램 9기 과정(B-log) 리뷰로 작성되었습니다.

#UXUI인턴형프로그램9기 #스나이퍼팩토리 #인사이드아웃 #UXUI #UX/UI디자이너 #콘텐츠디자이너 #디자이너교육 #디자이너인턴

UXUI인턴의 리뉴얼 디자인3 - 기획 변경?! ‍♀️ [인턴 5주차] | 스나이퍼팩토리 UXUI 인턴형 프로그램 9기

eun9077 — Sun, 7 Dec 2025 19:42:35 +0900

안녕하세요

밀린 5주차 정리하러 왔습니다

벌써 인턴할 시간이 얼마 남지 않았다는 사실이

믿기지 않는 중이에요...^^

언제 25일이 지났죠...?

이번 주는 모바일 작업의 기획이 변경되어서

반응형 > 적응형으로 작업 환경이 바뀌었어요

그래서 여태까지 한 시안들은

거의 다시 만들게 되었습니다

*근데 뭔가 아깝거나 허무하진 않았어요

일단 들어가는 내용은 동일하고,

디자인을 PC와 꼭 맞추지 않아도 되기 때문에

약간의 플로우와 스타일 변경만 있어서

괜찮게 느껴졌습니다 ㅎㅎ

Week 5

11.24(월)~11.25(화)

기존에 작업하던 리뉴얼 디자인 모바일 버전 작업의

1차 시안을 모두 끝내고 컨펌 요청을 드렸는데

PC 버전에 대한 최종 컨펌이 나지 않았어요

그래서 컨펌 기다리는 동안 새 업무를 전달받았어요

자사 서비스에 '사업자등록증' 관리 페이지가 있는데

이 페이지에 디자인 시스템을 적용시키는 업무였습니다

1주차 때 했던 업무랑 거의 동일했어요

그래서 익숙하고 약간은 편안한(ㅎㅎ)마음으로

작업을 시작했습니다

사업자등록정보 입력 페이지 일부

기존 디자인 파일을 하나하나

깨(?)보면 저렇게 텍스트/컬러 스타일이

저희 회사 내부에서 지정한 디자인 시스템이 아닌

임의의 속성값으로 지정되어 있어요

이거를 디자인 시스템에 정의되어있는

스타일로 모조리 바꿔주는 겁니다

헤더, 풋터, 중간 콘테이너에 들어가는 모든 요소들이

디자인 시스템에서 지정한 스타일, 컬러, 아이콘, 컴포넌트를

사용하는거죠...!

+++

지난번 디자인 시스템 업무처럼

단순히 옮기는 게 아니라

UI적으로 개선이 필요하다 싶은 부분도

수정하면서 진행했어요

(ex. 간격 4배수 조정, 텍스트 크기, 컬러, 레이아웃 변경)

11.26(수)~11.27(목)

수요일에는 12월에 올릴 채용공고 업데이트를 진행하고

화요일부터 작업했던 업무에서

사업자등록증 정보입력 기본 화면 작업을 마치고

컨펌 요청을 드렸습니다

+++

그리드에서 아주 살짝 어긋나게 작업이 되어 있더라고요

ㅠㅠㅠ

피드백 받고 바로 고쳐주었습니다

사실 그리드 라인에 맞추기만 하면 돼서

큰 수고가 드는 작업은 아니지만

너무 기본적인거라 좀 부끄럽져

목요일부터는 인트로에 잠깐 언급한 것처럼

상속문제 모바일 작업에 대한 기획이 변경되었어요

원래 반응형으로 작업했었는데요

(그래서 PC에서의 디자인을 그대로 가져가고,

폰트 사이즈와 세로 간격에 대한 규칙화가 필요했죠)

*적응형*으로 작업하게 되었습니다

반응형은 웹이나 앱에서 가로 사이즈를 줄이면/늘리면

브레이크포인트에 맞게 콘텐츠의 배열과 레이아웃이

바뀌는데요(최대한 비슷하게 유지)

원래 모바일 사이즈가 기본이고,

가로 사이즈가 늘어나면 디자인이 유연하게 바뀌죠

** 근데 저는 PC를 먼저 작업하긴 했지만, 사실 반응형은

[ 모바일 > 태블릿 > PC ] 순으로 작업하는게 통상적입니다 **

적응형은 아예

웹 사이즈 하나, 모바일 사이즈 하나

요렇게 따로 구분해서 작업하는거라고 이해하면 됩니다

그래서 어느정도 서비스의 플로우나

디자인이 바뀌어도 괜찮아요

웹과 앱은 각 사이즈에 맞춰

유저 플로우랑 니즈가 달라지기도 하니까요!

반응형 웹 디자인 vs 적응형 웹 디자인: 어떤 유형을 선택해야 할까?

시작하기: 웹사이트 제작 → | 도메인 등록하기 →2022년 현재 소비자들은 노트북이나 데스크톱 컴퓨터보다 모바일 기기을 통해 웹사이트를 방문할 가능성이 더 높습니다. 즉, 이제 비즈니스 측

ko.wix.com

"반응형 웹 디자인은 감지된 화면 크기에 따라

자동으로 페이지가 재배열되는 유동적인 접근 방식입니다.

반면, 적응형 웹 디자인은 브라우저가 주어진 플랫폼에 맞춰

특별히 생성된 레이아웃을 불러오는 웹 디자인 유형입니다."

반응형과 적응형의 차이에 대해 잘 설명한 글이 있어

공유합니다~

11.28(금)

PC 버전의 GNB/LNB와 모바일에서의 LNB

적응형으로 기획이 바뀌면서 기존의 모바일 서비스를 참고해서

디자인 개선을 진행했어요

근데 제 예상과 다르게 시간을 많이 잡아먹은 부분이 있었어요

GNB와 LNB의 유무와 형식 때문에 고민이 많았어요

*GNB는 대제목, LNB는 소제목이라 이해하면 편합니다

GNB에서 depth가 하나 있으면 LNB인거죠*

웹 사이즈에서는 비교적 공간이 넓기 때문에

상단 Nav Bar에 더불어

바로 아래에 Tab 형식으로 LNB가 들어왔어요

즉 사용자가 어떤 경로로 들어왔는데 한눈에 알 수 있는 반면,

모바일은 공간이 한정적이라서

한 화면 안에 GNB와 LNB가 모두 들어가기 어렵기 때문에

1. 홈에서 GNB - [비용] 메뉴로 진입

2. LNB(진입 메뉴) - [상속포기 비용] 진입

3. 상속포기 비용확인

4. Tab에서 다른 카테고리로 바로 이동

이런 플로우로 확정짓고 디자인을 했습니다...ㅎㅎ

사실 2번이 없어지고 4번을 통해 다른 카테고리로

바로 이동하게 하면 좀 더 간략화할 수 있겠지만,

기존 모바일이 2번을 유지했던 이유는

'상황에 대한 설명'이 필요했기 때문이라고 추측했어요

*위 이미지 참조

'0000 비용' 아래에

'~~~ 하는 경우'라고 설명을 덧붙여서

사용자가 '아, 내가 이런 케이스니까

0000 비용 메뉴를 클릭하면 되겠구나!'라고

생각할 수 있게 도와줬던거죠

모바일 상단의 App Bar에 접속중인 메뉴와

(ex. 이미지의 '비용')

바로 아래에 Tab 형식으로 LNB를 넣어주었습니다

(ex. 이미지의 '상속포기...한정승인...특별한정..')

이렇게 5주차를 정리해보자면

[ 상속문제 리뉴얼 모바일 ]

반응형 -> 적응형으로 변경

적응형 - '비용' 카테고리 1차 시안 작업 완료

[ 사업자등록 화면 디자인 시스템 적용 ]

정보입력 화면 1차 시안 작업 완료

크게 두 가지 업무를 진행했습니다!

본 후기는 스나이퍼팩토리 UXUI 인턴형 프로그램 9기 과정(B-log) 리뷰로 작성되었습니다.

#UXUI인턴형프로그램9기 #스나이퍼팩토리 #인사이드아웃 #UXUI #UX/UI디자이너 #콘텐츠디자이너 #디자이너교육 #디자이너인턴

UXUI 인턴의 리뉴얼 디자인2 [인턴 4주차] | 스나이퍼팩토리 UXUI 인턴형 프로그램 9기

eun9077 — Sun, 23 Nov 2025 16:21:34 +0900

안녕하세요

벌써 인턴 프로그램의 절반이 지나갔습니다

4주 차를 마치고 왔어요!

저는 이번 주 내내 코감기&중이염 때문에

꽤나 고생했어요

독감이 유행이라는데 다들 조심하시길...

이번 주부터는

PC 리뉴얼 디자인을 마무리하고

Mobile 작업을 시작했습니다

4주 차 정리 갑니다~

Week 4

11.17(월)~11.18(화)

월요일에는 출근하자마자

리뉴얼 작업 이전에

정관 페이지 개선한 내용도

대표님께 컨펌 부탁드렸어요

[필요서류] 페이지도 작업 완료하고 컨펌이 났어요!

PC 리뉴얼 마지막 메뉴인

[비용 안내서] 메뉴는 Input이 많이 들어가기 때문에

멘토 님과 같이 리뷰했어요

+++

멘토님 왈, 원래 디자인 작업하면서

Input이 가장 어렵다고해요

제가 작업하면서 중요하게 생각했던 포인트는

[ Input Field를 최우선으로 두고 작업하기 ]

ex) 체크박스도 선택된 상태가 명확하기 인지되도록 수정,

기존에는 없던 플레이스홀더를 추가해서 어떤 정보를

입력해야하는지 직관적으로 인지할 수 있도록 돕기

사용자가 인풋과 관련해서 어떤 상태인지,

어떤 정보를 입력하고, 어떤 방식으로 입력해야하는지

여러가지 경우의 수를 고려해야해요

그래서 멘토님이 작업하기 어렵다고 하신게 아닐까 싶어요

아래의 최종본으로 컨펌이 났습니당

+++

다음 주에 인턴 수당을 받기 위해서

멘토님께 서명 요청 드리고

출근부&종합보고서도 제출했어요

종합보고서 일부 발췌

화요일 점심~

11.19(수)~11.20(목)

PC 버전 리뉴얼 디자인을

대표님께 컨펌 요청 드리기 위해

작업을 정리해달라고 하셔서

아래와 같이 섹션 안에 정리했어요 ㅎㅎ

딱 마감날에 맞춰서 진행되니 뭔가 짜릿...

마지막으로 작업한 [비용 안내서] 메뉴를

바로 Mobile로 베리에이션하는 작업을

시작했어요

1차 시안 작업 후 피드백을 받았는데요

제가 간과한 부분이 있었어요

PC에서의 디자인을 Mobile로 바꿀때

크기가 작아지는 폰트, 간격 등은

어느정도 규칙화가 필요하다는 점...!

저는 그 부분을 생각하지 않고

임의로 작업해서 그런지

고칠 부분이 정말 많았어요 ㅠ.ㅠ

멘토님이 알려주신 Tip

피드백 주신대로 고치면서

폰트 사이즈와 간격에 대한 규칙을 정리했어요

PC를 기준으로 Mobile 작업의 에셋/규격을 정리해주는 플러그인이 있으면 참 좋겠다.... 혹시 아시면 댓글 남겨주세용!

최대한 위의 규칙을 맞춰서 작업을 진행했어요

***

특히 요소끼리의 세로 마진은

PC에서의 수치 그대로 가져가야 함

***

+++

줄바꿈은 디자인하는 화면에 맞게

변형이 가능합니당

[헬프미 소개] 메뉴도

Mobile로 작업 시작했는데,

역시 유념해야할 부분이 많았어요

헷갈리니까 반영된 피드백은

✅ 표시하면서 진행했어요 ㅎ

목요일 오후까지

1. PC to Mobile 규칙 정리

2. 소개, 비용 안내서 90% 완성

요렇게 했구요

수요일, 목요일 점심!

11.21(금)

금요일에는 [빚 상속] 메뉴 Mobile

1차 시안을 작업했어요

(+ 소개, 비용 안내서 디테일 수정)

Mobile 작업하면서 느낀 점인데,

PC 작업에서 디자인적으로 크게 바뀌는 건 없고

"일정화된 규칙을 가지고 작아진 화면에 맞게 재구성한다"의

목적을 가지고 작업하면 되는 것 같아요

중간중간 보기 좋게 줄바꿈하거나 일부 요소만 바꾸는 거죠

금요일 점심 - 치킨 파니니말고 소시지 파니니도 맛있어요

인턴 기간의 절반을 지나왔으니

지금까지 작업하면서 느꼈던 점을 정리해볼게요

1. 내가 어려워하는 부분
a. 줄글 형태의 디자인을 지루하지 않게 바꾸기 (회사 서비스 특성상 보수적이고 딱딱한 이미지가 강해서
내가 의도한대로 레이아웃이나 분위기를 바꿔도 될지 모르겠다)
b. 요소끼리의 그룹핑 (간격 띄우기 - 게슈탈트 원리 / 타이포그래피 [계층] 공부 필요)
c. PC와 MO 사이의 간극 이해하기 (이것도 계속해봐야 감을 잡을 수 있을 듯)

2. 내가 자신있는 부분
a. 기존의 시스템을 이해하고 적용시키기 (ex. 디자인 시스템 적용)
b. 왜 이렇게 디자인해야하는지 근거를 찾고, 의도를 설명하기
c. 멘토의 피드백을 수용해서 빠르게 반영하기 (ex. ~부분에서는 ~하는게 효율적이다 > 이후부터는 꼭 이렇게 작업)

+++

게슈탈트 원리 및 UXUI 심리학 법칙

잘 정리해놓은 글을 발견해서 공유합니당

UX/UI 디자인에서 게슈탈트 법칙의 역할

인간의 인지를 이해하는 디자인을 위해 활용해야 할 법칙 | * 다음 아티클을 번역한 글입니다. 인간이 주변 사물을 인식하는 방식에 기초한 7가지 게슈탈트 원리가 있습니다. 이러한 법칙을 경험

brunch.co.kr

UI·UX 디자인 스터디 - 게슈탈트 법칙으로 본 UI 디자인

이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. *** UI 디자인에 적용할 수 있는 원리는 무엇이 있을까? 관련된 디자인 원리에 대해 알아보았다

mesign.tistory.com

알아두면 좋은 21 Laws of UX (2)

Jon Yablonski가 말하는 21가지 UX/UI 심리학 법칙 | 들어가며 https://brunch.co.kr/@f7413a9d5cff457/29 지난 번에는 Jon Yablonski가 말하는 21가지 UX/UI 심리학 법칙의 4가지 카테고리 HEURISTIC / PRINCIPLE / GESTALT / COGNI

brunch.co.kr

디자인의 기본, 게슈탈트 이론 – UXUI 디자인 강좌 5-10 | 디자인베이스

안녕하세요! 이번에는 UI 디자인에 큰 도움이 되는 게슈탈트 이론 중 4 가지, 근접성의 법칙(Law of Proximity)과 유사성의 법칙, 공통 영역의 법칙(Law of Common Region), 연속성의 법칙에 대해 알아보겠습

designbase.co.kr

본 후기는 스나이퍼팩토리 UXUI 인턴형 프로그램 9기 과정(B-log) 리뷰로 작성되었습니다.

#UXUI인턴형프로그램9기 #스나이퍼팩토리 #인사이드아웃 #UXUI #UX/UI디자이너 #콘텐츠디자이너 #디자이너교육 #디자이너인턴

UXUI 인턴의 리뉴얼 디자인 [인턴 3주차] | 스나이퍼팩토리 UXUI 인턴형 프로그램 9기

eun9077 — Sun, 23 Nov 2025 13:47:51 +0900

안녕하세요~~~

3주차를 마치고 돌아왔습니다

11월 중순이 다 지났네요

겨울인데도 포근한 나날이었죠

다음주부터는 기온이 확 떨어진대요

다들 감기 조심하세요

다들 내일 월요팅이에여 ㅎㅎ

3주차 업무 정리 들어갑니다~~

****

제가 작업한 디자인은

글 작성 시점을 기준으로 외부에 릴리즈 되기 전이라

보안 유지를 위해

미공개 혹은 모두 모자이크 처리됩니다

****

Week 3

11.10(월)~11.11(화)

이번주는 저번주에 이어서

[리뉴얼 디자인 part.2]를 진행했어요

저번주에는 절차안내 메뉴를 작업했고,

이번주는 총 6가지 메뉴 중에서

4개의 메뉴를 작업했습니다...!

월요일은 멘토분 연차셔서

이 날은 디자이너 저 혼자 있었어요

하던 작업을 이어서 했고

화요일부터 비용 메뉴 마무리에 들어갔습니다

멘토님 피드백을 반영해서 비용은 마무리를 했습니다

+++

위 피드백에서 2번 내용이 앞으로의 작업에서

가장 많이 지적받고 수정하게 될 부분이에요..^^

회사 서비스 특성상

이미지가 많거나 화려한 분위기가 아니고

법률 관련해서 긴 설명글이 많기 때문에

타이포그래피, 하이어라키, 그룹핑이

가장 중요한 기본기랄까...

긴 줄글도 레이아웃을 잘 짜거나

계층을 잘 나눠서 가독성이 좋아보이게

만드는 것도 디자이너의 능력에 달렸으니까요 ㅎㅎ

이날도 점심으로 제 최애 치킨샌드위치 먹었어용

11.12(수)~11.13(목)

다음 메뉴인 [헬프미 소개]를 작업했어요

기존의 디자인은 아래와 같이

완전 줄글 형태였어요

소개 페이지 일부

1차로 시안 작업 후 받은 피드백입니다

내용을 읽어보고

크게 네 덩어리로 그룹핑을 한 후,

각 내용에 맞게 레이아웃을 바꾸어주었어요

다만 아직도 줄글이 많아보여서 컨텐츠 형태로

개선이 필요해보인다는 피드백을 받고

서비스 차별점을 강조하는 내용을

3단 카드형으로 바꾸어서 완성했습니다

+++

아이콘도 서비스 분위기에 맞게

최대한 미니멀하고 너무 둥글지 않게 바꾸었어요

(이 부분은 멘토분이 직접 시연해주셨습니다)

목요일에 갑자기 얼큰한게 너무 당겨서

중국집가서 혼자 삼선짬뽕 먹었어요

ㅋㅋㅋ

진짜 맛있었는데...!

11.14(금)

금요일엔

[헬프미 소개], [비용]에서

추가 수정 요청이 들어와서 디테일을 잡고

마무리해주었고

다음 메뉴인 [빚 상속] 메뉴를 작업했어요

원래 디자인은 아래와 같았어요

간간이 사진이 들어가서 환기시켜주긴 하지만

역시 소개 페이지와 마찬가지로 줄글 형태였습니다

빚 상속 페이지 일부

저는 아래와 같은 느낌으로 리디자인 해봤어요

상속포기와 한정승인이 같은 계층, 다른 내용임을

한눈에 보여주고자 컬러로 상위 타이틀을 구분해주고,

계층을 나눠서 레이아웃을 짜주었어요

아래에 반복되는 내용들이 많아서

컬러로 구분해주니까 한눈에 들어오고 읽기 편하더라고요!

1차 시안

최종본 - 아주 극히 일부니까... 요고만 공개합니다 ^^

이 부분은 [상속포기], [한정승인] 박스 컬러만 조정하고

(레드/그린은 시각적으로 나쁨/좋음의 뉘앙스를 주기때문에)

개념 부분은 따로 빼주어 글로 바꾸고

바로 컨펌되었습니다

~~수정 없는 디자인은 기적이에요.....~~

[빚 상속] 페이지 작업 완료!

금요일 점심 / 저녁

저는 회사에 좀 적응한 것 같아요

업무를 수행하면서

어려움, 고민, 깨달음, 성취감, 존경심

다양한 감정을 느끼고 있어요...!

부족한 스스로를 인정하되

그에 매몰되지 않고

재빨리 다음 스텝을 밟는 연습도 하구요

기본기....기본기가 정말 중요하다는 걸

뼈저리게 느끼고 있습니다

타이포그래피 관련해서 공부하려고요

다음주 정리에서 만나여

본 후기는 스나이퍼팩토리 UXUI 인턴형 프로그램 9기 과정(B-log) 리뷰로 작성 되었습니다.

#UXUI인턴형프로그램9기 #스나이퍼팩토리 #인사이드아웃 #UXUI #UX/UI디자이너 #콘텐츠디자이너 #디자이너교육 #디자이너인턴

떨림이 멈추지 않는 탓일까...? UXUI 인턴 회사 적응기2 [인턴 2주차] | 스나이퍼팩토리 UXUI 인턴형 프로그램 9기

eun9077 — Wed, 12 Nov 2025 02:43:32 +0900

안녕하세요~!

인턴 2주 차를 마치고 조금 늦게(^^) 돌아왔어요

저번 주말에 본가에 다녀오느라 피곤해서

인턴일지가 쬐끔 늦었어요

2주 차는

지난주 정관페이지에서

개선해야 할 코멘트를 남겼던 부분과

멘토님의 의견을 더해서 진행한

[정관페이지 개선작업]

그리고

헬프미 연계 서비스의 [리뉴얼 디자인 part.1]

이렇게 크게 두 가지 업무를 진행했어요

바로 2주 차 후기를 적어볼게요!

****

제가 작업한 디자인은

글 작성 시점을 기준으로 외부에 릴리즈 되기 전이라

보안 유지를 위해

미공개 혹은 모두 모자이크 처리됩니다

****

Week 2

11.3(월)

기존의 정관 페이지 디자인

서비스에서 기존의 정관 소개 페이지 하단 부분이에요

정리가 잘 되어있는 페이지이지만 어필이 되지 않는 점,

남는 여백이 많고 레이아웃이 아쉽다는 점을 바탕으로

개선하게 되었습니다

*주요 개선 포인트

1. [정관 변경하기] 버튼은
내부 유료 서비스로 유도하는 CTA.
좀 더 강조할 필요성

2. 정관변경 TIP 부분의 가독성 개선
레이아웃 바꾸기

**최종본에서 반영된 개선점

1. CTA 버튼의 강조 개선
버튼 프레임 크기, 아이콘 강조 등
중요도가 높아 보이게 수정

2. 불필요한 요소(선)와 여백을 삭제
카드 형태의 레이아웃으로 수정

** 개선된 디자인은 보안상 미공개 **

11/3~4 동안

정관메뉴를 클릭하면 나오는 기본 Default 페이지를

먼저 작업하고, 이후에 세부 페이지 베리에이션을

진행해서 마무리했어요

11.4(화)

이 날은 정관페이지 최종본 확정 전에

멘토님께 피드백을 듣고 수정하고,

20분 정도 주간미팅을 진행했어요

첫 출근 이후 일주일 동안

회사 분위기에는 잘 적응했는지,

업무는 어떤지, 피드백 방식은 마음에 드는지

꼼꼼하게 체크해 주셔서 감사했어요 ㅠ

제 멘토님은 피드백을 아주 상세하고

정확하게 해 주시는 편이에요

ex)

"본문 행과 제목 행의 내부 패딩값이 상이합니다."

"그라데이션의 명도를 더 낮은 색상으로 주어야할 것 같아요."

"뷰포인트를 고려했을 때 내용이 잘려보입니다. 세로 높이를 조절할 필요가 있어보여요."

1년도 채 안 됐지만 대학생 시절

저를 너무 괴롭게 했던(ㅎ...)

교수님의 모호한 피드백과는 완전히 상반돼서

"좋은 의미로" 충격적이었습니다

실무에서도 이렇게 친절한 피드백을 주시는 분이 있다는게

너무 놀랍고 감사했어요 ㅠ

덕분에 제가 배워가는게 정말 많아요

11.5(수)

수요일부터는 자사 연계 서비스의

리뉴얼 디자인 작업을 시작했어요

새로운 기능이 들어가는 건 아니고,

기존의 디자인이 관리가 되어보이지 않는 점을 개선하기 위해

리뉴얼 디자인에 투입되었습니다

연계 서비스는 상속문제를 다뤄요

제가 듣기로는 2015~2018년 이전에

리뉴얼 되고, 그 이후로는 개선이 되지 않아서

다소 옛날 2000년대 느낌의 분위기를 가지고 있었어요

*기존 디자인의 아쉬운 포인트

1. 상속 절차 안내가 목적인데, 고객(타겟)이 밟는 절차가 강조되지 않음

2. 긴 줄글 형태의 안내사항을 읽기 힘듦

3. 불필요한 여백이 많음

4. 세련되지 않음

**유의해야 할 포인트

서비스는 가볍지 않은 분위기

(고인 사망 이후 상속 관련)

절차안내 메뉴 개선 - 1차 시안

1차 시안을 바탕으로 멘토님이 피드백을 주시고,

다음 메뉴 작업을 10% 진행한 상태로

이 날은 업무가 끝이 났어요

11.6(목)

이 날은 기획회의에 처음 참석한 날이었어요...!

개발팀과 디자인팀이 모여서

새로운 기능 도입에 대한 기획서를 검토하고,

개발에서 예상되는 이슈나 쟁점들을 논의하시더라고요

저는 발언을 하지는 않았지만

혹시 나중에 디자인할 신규기능이 이 부분일까 싶어

메모를 열심히 했습니다ㅎ

+++

디자이너와 개발자 사이에 어떻게 커뮤니케이션 해야할지

배워가는 기회이기도 했어요

ex)
개발자: 이 과정에서 ~한 이슈가 있을 것 같아요. 안내 문구를 넣는건 어떨까요?
디자이너: 이 부분은 ~~한 이유로 굳이 넣지 않아도 될 것 같은데, 모달 팝업이나 텍스트로 안내가 필요할까요?
개발자: 안내가 제대로 되지 않아서 에러가 뜨면 개발 쪽에서 처리할 부분이 많아질 것 같아요.
디자이너: 그러면 이쪽에 이렇게 넣어보는 건 어떨까요?
~

디자이너: 00월 00일에 릴리즈를 목표로 하고 있는데, 다들 일정 괜찮으실까요?
개발자: 그 전에 예정된 업무들이 있어서 그때까지는 어려울 것 같은데, 일정 검토하고 다시 알려드릴게요.
~

11.7(금)

[리뉴얼 디자인] 작업의

절차안내 메뉴에 대한 1:1 피드백을 받고

최종본을 작업했어요

+++

제가 작업할 때 참고했던 레퍼런스도

공유해달라고 하셨어요

그걸 같이 보면서

이 레퍼런스는 잘 찾았다,

레이아웃은 좋지만 서비스의 취지랑은 맞지 않다,

등등 레퍼런스를 보고 분류하는 방법도 배웠습니다

***최종 반영된 개선점

1. 고객 위주의 절차 강조, 한눈에 이해하기 쉬움

2. 줄글에서도 내용마다 그룹핑이 잘 됌

3. 여백 개선

이번주는 리뉴얼 디자인 작업 위주로

업무를 수행했어요

솔직히 부족한 점이 여실히 드러나는 것 같아서

부끄럽지만...ㅠ

하면 할수록 UXUI에서는 예쁘게 세련되게 만드는 것보다

이유가 있고, 당위성이 있는 디자인이

중요하다는 사실을 실감하고 있어요

막상 보면 알아도, 스스로 작업할 때는

그게 안 보이고 잘 모르겠는데 함정

...이런게 센스겠죠...ㅎ

저도 척척 해내는 프로다운 디자이너 되고 싶어요~~~

본 후기는 스나이퍼팩토리 UXUI 인턴형 프로그램 9기 과정(B-log) 리뷰로 작성 되었습니다.

#UXUI인턴형프로그램9기 #스나이퍼팩토리 #인사이드아웃 #UXUI #UX/UI디자이너 #콘텐츠디자이너 #디자이너교육 #디자이너인턴

UXUI 디자이너 인턴의 첫 출근 회사 적응기 ‍♀️ [인턴 1주차] | 스나이퍼팩토리 UXUI 인턴형 프로그램 9기

eun9077 — Sat, 1 Nov 2025 23:47:10 +0900

안녕하세요 ☺️

저는 이번 주 첫 출근과 회사 적응을 무사히 마치고(?)

주말을 즐기고 있어요

회사로의 첫 출근은 어땠고

어떤 업무를 받아서 진행했는지 기록해보려 합니다

우선 저는 온라인 법인 관리 플랫폼을 운영하는 회사에

합격해서 출근하게 되었습니다...!

회사에서 운영하는 서비스 소개 페이지의 일부

간단히 소개하자면, 법인을 설립한 대표들은

주주총회, 법인, 등기부 관리 등

많은 일을 담당해서 진행해야 하는데요

특히 법률과 관련된 부분이라

잘못 처리하면 세금폭탄을 맞거나

법적으로 문제가 생길 수 있기 때문에

꼼꼼하고 주의를 기울여 처리해야 해요

그렇지만 대표 혼자서는 이 모든 일을

처리할 수 없다는 애로사항에서

시작된 서비스입니다

실제로도 회사 대표님은 15년 정도의

변호사 경력이 있으신 법조인이세요...!

제가 이 회사를 희망기업 중 하나로 제출한 이유

1) 법률 관련 플랫폼이라는 시장 안정성

2) 서비스의 화면 구성 퀄리티

3) 서비스 소개 홈페이지의 높은 완성도

4) 기업 소개에 느껴지는 정성

이 정도로 정리할 수 있겠어요 ㅎㅎ

Week 1

10.27(월)

대망의 첫 출 근

떨리는 마음을 붙잡고 선릉역으로 갔어요

회사 도착해서 담당자 분과 대표님, 멘토님께 인사드리고

모든 회사 직원분들 앞에서 자기소개를 했어요...!

이건 사전에 담당 CPO님이 미리 안내해 주셔서

파일을 준비할 수 있었습니다

취미, 중요하게 생각하는 것들, 가치관

진행했던 작업 하나 소개, 앞으로의 포부를 발표했고

3분 정도로 아주 러프하게 끝냈어요

그리고 멘토님과 미팅을 했습니다!

사실 미팅이라기엔 회사 온보딩과 약간의 사담(ㅎㅎ)

먼저 서비스 관련 기반 지식을 알려주셨어요

'법인'이라는 말의 정확한 뜻을 아시나요?

저는 회사나 단체를 지칭하는 말인 것까지만 알고

정확하게는 몰랐는데요

집단성&법적인 자격을 가진 주체를 '법인'이라고 합니다

보통 주식회사, 사단 법인이라고 하는 회사들을 말해요

회사 '법카'로 밥 먹었다고 할 때 그 법인이기도 해요ㅎ

이 법인을 관리해 주는 플랫폼이

위에서 소개한 서비스였어요

그리고 8주간 제가 배정받을 업무와

대략적인 일정을 안내받았어요

기존 서비스에 새롭게 정의한 디자인시스템을 적용하는 작업,

유지보수 및 리뉴얼과 신규 기능 디자인

이렇게 크게 세 가지의 업무를 맡게 된다고 합니다

(너무 떨려오..... 심지어 신규기능이라니......!)

그리고 점심시간이 되어서

멘토님이 칼국수를 사주셨습니다

이렇게 첫날은 사내 문화와 시스템을 파악하고

제공된 PC에 슬랙, 노션, 피그마를 세팅하는 걸로

거의 일과가 모두 끝났어요

제 자리

10.28(화)

화요일 오전엔 워밍업으로

회사 구인공고를 업데이트하는 업무를 받았어요

++++

정말 간단한 업무였는데

사소한 양식.... 날짜 변경하는 걸 잊어서

한 번의 수정을 거치고 완료했습니다

그리고 디자인시스템 적용 업무를

본격적으로 들어가기 전에!

디자인시스템이 입혀진 화면 하나를

그대로 따라서 작업해 보는 실습 과제를 받았습니다

화면의 각 요소마다 정의된 컬러, 텍스트 스타일,

아이콘, 컴포넌트화 되어있는 양식들을

불러와서 배치하는 작업이었어요

이 과제를 어떤 목적으로 내주셨을지 생각하며 작업했는데

1) 디자인시스템 파악하기

2) 기존의 디자인에 익숙해지기(마진값, 컬러 사용, 강약조절 등)

3) 제가 실제로 업무에 투입될 수 있는지 역량체크

크게 세 가지 의도로 내주신 것 같았습니다

(단순히 저의 추측...)

사실 1번만으로도 매우 벅찼어요

회사 설립연도로부터 10년 이상 지났고

플랫폼의 뎁스도 어느 정도 있는 편이라

디자인시스템도 정교하고 방대하게

정의되어 있었거든요(역시 프로의 세계)

이관 작업 중이라 파일이 여러 개로 분산되어 있어서

찾고 배치하는데 훨씬 오래 걸렸습니다

흑흑 그저 따라 그려보는 과제인데 너무 오래 걸려버린

다행히도...

'취지를 이해하고 작업하신 것 같다'라는 피드백을 들었어요!

너무 다행이었죠...ㅎㅎ

화요일은 이렇게 마무리!

10.29(수) ~ 10.30(목)

수요일부터 본격적인 업무 시작!

화요일에 과제로 작업했던 화면이 제휴혜택 화면이었는데

기존의 디자인에서 카드형 UI로 개선하는 업무를 받았어요

1차 시안에 대한 피드백을 코멘트로 남겨주셨는데

1) 디자인시스템에서 정의한 그레이스케일 200은

중간요소의 외곽선에 쓰이기에는 약하다

2) [카드 내부의 패딩 값 > 카드끼리의 마진 값]이어야

그룹핑이 안정적으로 된다

3) 메인 타이틀이 2줄로 넘어가면 가독성이 저해된다

1, 2번은 인지하지 못한 부분이었어요

기본기가 좀 부족하다는 걸 알게 됐고...

좀 더 공부를 해야겠어요...!!

3번 말대로 가독성이 조금 좋지 못해도

2줄로 작업하게 된 이유가 있었는데요

기존에는 가로로 긴 레이아웃이었고, 텍스트가 들어갈 공간이 많아

타이틀 폰트 크기가 24 정도로 되게 큰 편이었어요

근데 카드를 3단으로 배치한 레이아웃으로 바꾸게 되면

자연스럽게 그 안에 배치되는 폰트는 크기가 작아져야 해요

그렇게 되면 서비스를 이용하던 기존 고객들이

갑자기 UI가 확 변화하고 폰트까지 작아지면

잘 인지하지 못할 거라는 나름대로의 근거가 있었기에

2줄로 작업했었어요....!

멘토님께 3번에 대한 저의 생각을 말씀드렸더니

근거 있는 의견이라고 귀 기울여주셨습니다

그렇지만 가독성을 위해 크기를 줄여서 1줄로 배치하는 걸로~

목요일에 수정안을 최종본으로 확정하게 되었어요

++++

[ 추가 피드백 ]

- 혜택 설명 이미지는 텍스트도 많고 컬러도 강렬하니

프레임에 꽉 채워서 배치하기보다는

크기를 줄여서 뒤쪽에 그림자나 배경을 깔아주면 좋음

- 버튼도 꼭 프라이머리 메인 컬러가 아니어도 됨

텍스트형 버튼도 괜찮음

목요일 오후에는

정관 페이지에 디자인시스템을 적용하는 작업을 맡았습니다

*정관이란?

: 회사의 조직과 활동에 관한 근본 규칙 또는 이를 명시한 문서

'회사의 헌법'이라고 이해하면 돼요

기존 페이지에는 디자인시스템이 적용되어있지 않은

Raw 의 상태였어요

통일성을 위해서 그대로 디자인하되

모든 요소에 디자인시스템을 적용하는 작업을 진행했습니다

화요일에 했던 실습과제가 도움이 되었어요 ㅎ

정관 내용이다 보니 글자도 정~~말 많고

그래서 컴포넌트 쭉쭉 만들어서 활용해 주었습니다...

오후 3시간은 이 작업만 한 것 같아요

저희 회사는 기본적으로 혼밥 문화라

다들 혼자 아니면 둘이서 점심을 해결하시더라고요

저도 혼밥러라 나쁘지 않았습니다 ㅎㅎ

이 날은 회사 앞 샌드위치 가게에서

스파이시 치킨 파니니랑 자몽에이드 먹었어요

냠냠냠

10.31(금)

대망의 1주차 마지막날!

목요일에 작업한 페이지에서 UI적으로 아쉬운 부분에

코멘트를 남겨달라고 하셨어요

개선 작업에 들어가기 때문이죠...!

열심히 분석하고 남겨본 의견... 작고 소중한 내 코멘트

열심히 분석해서

6개 정도의 코멘트를 남겨두고

멘토님과 1:1로 함께 논의하는 시간을 가졌습니다

각 코멘트에 대해서

이 부분은 이걸 고려해서 디자인했기 때문에

'유지하는 게 맞다 / 바꾸는 게 좋다'라고

멘토님 의견을 듣는 게 굉장히 흥미로웠습니다

멘토님은 5년차이셔서 실무 경험이 훨씬 많으셔서

배울 점이 정말 많았어요

쏙쏙 뽑아먹는 이 기분...

정말 좋았던 부분은..........!!

코멘트에 따봉 이모티콘을 남겨주셨을 때....

ㅠㅠ 제가 제안한 내용이 정말 좋은 의견이라고

칭찬받아서 최고였어요........

1주차 업무는 이렇게 끝이 났습니다

다음주 월요일부터 개선작업 확정한 부분을

제가 직접 리디자인해보는 업무를 시작해요!

기대반 걱정반이랍니다

사실 저 페이지에 들어가는 CTA 버튼이

내부 유료 서비스로 유도해주는 장치라

디자인적으로 굉장히 중요한 요소이거든요

(((((( 부담감 MAX ))))))

금요일 혼밥 메뉴 - 김치우동

이 날은 김치우동을 먹었어용

주말동안 CTA 버튼이랑

여러 요소가 있을 때 레이아웃 정리하는 방식을

공부하려고 해요!!

꼭 도움이 되겠죠?

첫 출근 이후로 5일이 지났다니 좀 안 믿겨요

회사 분들과 아직은 좀 서먹하지만

그래도 좋은 분들인 것 같아 다행이라고 생각하는 중

얼마 전엔 백엔드 개발자 한 분의 생일이어서

깜짝 서프라이즈도 목격했어요!! ㅎㅎ

인턴 나부랭이인 저

팀원분들과 친해질 수 있겠죠...?

MBTI 극극극 I는 조금 버거워요ㅎ...

......

다음주도 화이팅!

본 후기는 스나이퍼팩토리 UXUI 인턴형 프로그램 9기 과정(B-log) 리뷰로 작성 되었습니다.

#UXUI인턴형프로그램9기 #스나이퍼팩토리 #인사이드아웃 #UXUI #UX/UI디자이너 #콘텐츠디자이너 #디자이너교육 #디자이너인턴

출근이 코앞으로 다가온 디자이너 인턴 [사전직무교육 5일차_10/24] | 스나이퍼팩토리 UXUI 인턴형 프로그램 9기

eun9077 — Sun, 26 Oct 2025 18:45:29 +0900

안녕하세요?

출근이 사흘 앞으로 다가온

UXUI 디자이너 인턴입니다 ^_^

마지막날 특강 ZEP 상황... 대강당에 옹기종기 모인 귀여운 동기분들

오늘은 사전직무교육 마지막 날...

이번 차시에는 인턴 출근을 위한 OT가 있었어요

출근부 작성, 공가 활용, 수당 지급 등

인턴십 중에서 정말 중요한 부분에 대한

공지를 안내받았습니다

그리고 강사님의 포트폴리오 특강이 있었어요!!

실무 경험이 15년 이상이신 분께 듣는 팁은

정말 유용하죠...

이번 인턴형 프로그램 9기는 이전 기수에 비해

서류 서식, 제출방식이

많이 바뀐 편이라 좀 복잡하더라도

꼼꼼하게 보고 따라야 했어요...!

~~((수당 지급에 서류 제출이 아주 중요하기 때문에...))~~

** 보안상 자세하게 설명하지 못해요 **

다음 기수에서 또 바뀔 수도 있기 때문에...!

인턴 출근부는 본인이 출근하는 회사의 근무시간을 잘 지키고

정해진 날까지 제출하면 무사히 수당을 지급받을 수 있어요

그리고 저희는 회사-인턴 관계가 아니라

[ 고용노동부 주관-스나이퍼팩토리 운영-회사 연계 ]

이 과정으로 인턴십을 진행하기 때문에

근로계약서가 아닌 표준계약서를 작성해서

연차나 월차는 사용이 불가능해요

다만!

공가는 사용이 가능하더라고요!

개인 경조사, 병원 진료 등 지정된 공가 기준에 해당된다면,

그리고 증빙서류 제출하면, 사용 가능합니다!

저는 최대한! 공가 사용 없도록 노력할 겁니다...^^

아프지 않기를 바라요

이번엔 인턴 OT를 아주 빨리 끝내서

점심시간이 좀 길었는데요

2주 전에 원데이 클래스로 만들었던

도자기 괄사가 완성되어서 픽업하러 갔어요~

너무 귀엽게 나왔어요.....☺️

이렇게 스트레스 풀어줄 겸

하고 싶었던 취미 관련 클래스를 듣고 있어요

저는 시에서 지원해 주는 청년 프로그램으로 했는데

다들 살고 계신 지역에서 할 수도 있으니

한 번 알아보세용

~~인턴도 청년 혜택으로 하는 나....~~

오후에는 포트폴리오 특강이 있었어요

*** 포트폴리오 특강도 아주 자세하게는 노출이 어려워요 ***

강사님이 초반에 강조해주신 부분인데요

내가 만든 작품 = 포트폴리오

이렇게 생각하면 안 된다고 해요

작품은 작품이고

포트폴리오는 보여주는 사람이

편안하고, 쉽게 이해할 수 있도록

풀어서 정리하고 다듬어야 해요

포트폴리오는

프로젝트의 진행 과정과 비슷하게 구성하면 돼요

문제점 발견 - 논리적으로 전개 - 근거에 따른 디자인 결과물

UXUI 에서 다이아몬드 프로세스&하는 것처럼요!

[ 발견 > 정의 > 개발 > 전달 ]

그리고 주의할 점은 요즘 디자이너 시장에서는

(디자인 뿐만 아니라 거의 모든 직군이 그런 것 같긴 해요...)

신입에게도 실무에 바로 투입될 수 있는 역량을 원한다는 점...!

포트폴리오에 너무 오래된 작품,

지나치게 창의적인 작품,

실제로 구현이 어려운 작품은

넣지 않는게 좋아요!

그래서 더더욱 인턴 경험이 중요하더라고요!

실무 경험을 해봤다는 점이 누구보다 큰 강점이 되는 이유는

회사 서비스의 데이터를 보고, 다른 구성원들과 협업/소통, 개선 및 유지보수 등등

이걸 모두 해볼 수 있기 때문이 아닐까요?

경력기술서나 포트폴리오의 가장 상단/앞쪽에는 인턴 경험/결과물 넣기!

++++

강사님 왈,

포트폴리오에서 제일 먼저 보게 되는 기본기가

[ 타이포그래피 위계 ] 라고 하셨어요!

이건 정말 기본이니까

결과물이 좋더라도 타이포그래피 실력이 별로면

별로 읽고 싶지 않아진다고 해요

사실 포트폴리오 뿐만 아니라

PPT 같은 발표자료도 그렇지 않나요? ㅎㅎ

저는 편집디자인 배우면서 위계 연습하는게

좀 힘들긴 해도 재밌었어요 ㅎ ~~(아닌가...)~~

마지막 단체사진 ㅠ.ㅠ

5일동안 8시간 풀로 교육 들으면서...

취업준비를 본격적으로 하기 전

조금은 우울하고, 조금은 나태했던

제 모습이 떠올랐어요

솔직히 디자인 전공하면서 맞지 않다는 생각을

수도 없이 했지만, 결국엔 졸업작품까지 무사히 통과해서

졸업예정이고, 아직 실무 경험이 없으니

인턴을 해볼까? 싶어서 지원했던

이번 인턴형 프로그램...!

1일차 학습일지에도 적어뒀지만

저는 인스타그램 스토리 넘기다가 우연히

광고로 접하게 됐어요

진짜 붙을 줄은 몰랐어요

그래도 포트폴리오를 조금씩이나마 만들고 관리했던 순간이

빛을 발한 것 같아요

다음주 월요일이면 사회로 나가게 되는데

솔직히 좀 떨리고 두렵기도 해요

회사 담당자 분은 무척 친절해보이셔서 큰 걱정은 없지만요

다른 동기분들도 마찬가지겠죠?

그리고 같이 활동했던 팀원 분들 중 한 분과 인스타도 맞팔했답니다 ㅎ

인턴하면서 어려운 부분있거나 힘들면 서로 도와주기로 했어요

++++

너무 스윗하신 강사님...

강의 교안에서 갑자기 튀어나온 거나비거나비 Golden

강사님의 따수운 응원을 받고...

다음 주 월요일 출근 준비 열심히 하려고요

++++

저는 지방에 살고 회사는 서울이라

짐 싸고 이동하느라 주말은 바쁘게 보낼 것 같아요

아! 그리고 연고지-회사 간 자동차 거리 기준

편도로 30km 이상 차이 나면

체류지원비도 지원받을 수 있어요!

급 추워진 날씨를 위해 비상약 챙기기

아자아자 이 악물고 열심히 해보렵니다~!!

모든 취준생들 화이팅 ㅠㅠㅠㅠㅠ

본 후기는 스나이퍼팩토리 UXUI 인턴형 프로그램 9기 과정(B-log) 리뷰로 작성되었습니다.

#UXUI인턴형프로그램9기 #스나이퍼팩토리 #인사이드아웃 #UXUI #UX/UI디자이너 #콘텐츠디자이너 #디자이너교육 #디자이너인턴

UXUI 디자이너가 반응형 모르면 안 되지 ‍♀️ [사전직무교육 4일차_10/23] | 스나이퍼팩토리 UXUI 인턴형 프로그램 9기

eun9077 — Sun, 26 Oct 2025 17:06:50 +0900

안녕하세요-!

벌써 사전직무교육 4일 차입니다

앞으로 교육이 하루밖에 남지 않았어요

오늘도 힘내서 교육을 들었습니다

아자자

이번 4차시에서는 반응형 레이아웃을 심도 있게 배웠어요

UXUI 디자이너라면 반응형에 대해서는 잘 알고 있어야 한다고 생각하는데요

요즘에는 PC, 태블릿, 핸드폰 등 다양한 기기를 사용하고

그만큼 화면 크기가 다양해졌기 때문에

그에 맞게 유동적으로 변하는 서비스가 필요하기 때문이죠...!

항목	반응형 웹	적응형 웹
레이아웃 방식	하나의 유동적 레이아웃이 화면 크기에 따라 자동 조정됨.	여러 개의 고정 레이아웃을 만들어두고 화면 크기나 디바이스에 따라 선택됨.
유연성	모든 화면 크기를 포괄하기에 신규 디바이스에도 비교적 대응력 있음.	사전에 정의된 기기/사이즈만 커버하기 때문에 새로운 크기나 디바이스에는 대응이 좀 더 제한적임.
개발 / 유지관리	하나의 코드베이스로 관리 가능 → 유지보수 효율 높음.	각 레이아웃마다 별도 구현이 필요하거나 레이아웃 수가 많아지면 유지보수 부담 증가.
성능 / 최적화	모든 콘텐츠가 로드될 가능성이 있고, 화면 크기마다 최적화가 어려움.	특정 기기용으로 최적화된 레이아웃을 제공할 수 있어 성능 측면에서 유리함.
설계 전략	“모든 디바이스에서 잘 보이도록” 유연하게 디자인 → 모바일 퍼스트 전략과 자주 연계됨.	“특정 디바이스/사용자군에 맞춰” 최적화된 경험 제공 → 기기/사용자군이 명확할 때 유리함.

반응형 웹과 적응형 웹의 차이에 대해 알아봤어요

먼저 적응형 웹은 특정 디바이스에 맞게 정해진 레이아웃을 제공해요

예시로 네이버 홈페이지를 들 수 있겠네요!

출처 NAVER 네이버

네이버 홈페이지 웹/앱 화면이에요

레이아웃과 보이는 콘텐츠가 완전히 다르죠?!

아이패드로 보면 또 다르더라고요

디바이스 크기 별로 최적화되어 있다고 느꼈어요

반대로 반응형 웹도 볼까요

반응형 웹은 웹이든 앱이든 기본으로 만들어진 서비스에서

크기 조정을 하면 자연스럽게 레이아웃이 변경돼요

적응형 웹과 다른 건 뚝뚝 끊기는 느낌이 없다는 점이에요

물론 특정 지점에서 레이아웃이 변경되도록 지정은 해줘야 하는데요

이 지점을 바로 "Breakpoint"라고 합니다!

반응형 웹의 예시로는 원티드 서비스가 있었어요!

출처 Wanted 원티드

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

원티드 홈페이지에 접속해서 창 크기를 줄이고 늘려봤어요

아주 자연스럽게 레이아웃이 변하는 걸 볼 수 있죠?!

디자이너와 개발자 분들이 아주 잘 만들어 놓으신 케이스....

그들의 노고에 Cheers

++++

반응형 웹과 적응형 웹도

스타일&베리어블과 마찬가지로

회사 서비스, 업무 문화에 따라 달라지니

그에 맞춰 작업하는 게 중요해요!

그렇지만 요즘엔 반응형으로 제작하는 경우가 많긴 해요

이어서 반응형 레이아웃 실습!

레이아웃을 다 그렸는데요

위의 선택된 영역은 카드 UI 라서

창 크기가 달라져도 어느정도 크기가 일정하게

유지되는게 보기에도 좋기 때문에

최소한의 형태 유지를 위한 값을 지정해줍니다

영역 선택 - Layout - Dimensions - Width 에서

Minimum Width 와

Maximum Width 를 지정해주면

짠

이렇게 별도로 지정된 걸 볼 수 있어요

이렇게 지정해놓으면 전체 창 크기가 달라져도

어느정도 크기가 일정하게 유지됩니다!

++++

그리고 최근에 피그마가 업데이트되면서

Layout 패널에 Flow - Grid 옵션이 추가되었어요

프레임을 만들고 그리드를 설정해주면

이렇게 프레임 내부에 설정한 그리드만큼 기준선이 생겨요

코딩에서는 css 에서 display: grid; 로 표현할 수 있어요

예를 들어 가로 4칸, 세로 6칸으로 하고 싶다!

아래처럼 css 코딩을 할 수 있어요

(물론 html에서 큰 container를 하나 만들고

그 안에 div 박스를 여러 개 만들었다는 가정 하에)

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, 1fr);
}

제가 졸업작품 중 하나를 웹사이트를 만들면서

직접 코딩까지 했는데요

~~(정말 힘들었지만....)~~

오랜만에 Flex와 Grid 공부했던게 떠올라서 재밌네요

ㅎ.ㅎ

그리드 설정한 프레임은 격자로 무늬가 보이죠?

아까 그린 레이아웃 우측에 똑같이 그려봤어요

Flow를 그리드로 하니까 요소 하나하나가

그리드에 맞게 착착 스냅되는데...

굉장히 쉽게 느껴졌고

뭔가 알 수 없는 쾌감이 들었어요

피그마 업데이트는 정말 수시로 되는데

그 퀄리티가 좋은 것 같아요

++++

실습 따라하다 놓쳤는데 알려주신 천사분.... 붙여넣기는 ctrl alt V

그리고 이전 차시들과 마찬가지로 여러 요소들을

만들고 오토레이아웃, 컴포넌트, 베리어블 실습을 했어요

저는 툴팁 만들기가 유용했는데요

말풍선을 만들 때, 말풍선 꼬리를 처리하는게 항상 난감했거든요

꼬리를 프레임 가까이 옮기면 오토레이아웃 때문에

저렇게 안쪽에 배치되는데 이 상태에서 오른쪽의

Position 패널에서 Ignore auto layout 을 눌러주면?!

이렇게 꼬리 요소만 따로 오토레이아웃을 무시할 수 있어요

그래서 프레임 안쪽이든 반쯤 걸치든 마음대로 배치할 수 있습니다

늘 이런 부분에서 난감했던 저는 너무 신박했어요...

오토레이아웃을 무시하면 Layer 앞에 아이콘이 변경돼요!

여기서 중요한 부분이 있는데요

단순히 오토레이아웃을 무시하기만 하면 안 되고,

저 말풍선 안의 내용의 길어지거나 짧아질 때

꼬리가 말풍선에 붙어다녀야 하죠!

그렇기 때문에 다시 꼬리 요소를 선택하고

오른쪽 패널에서 Constraints 속성을 변경해줍니다

Constraints - 기존의 Left + Top 설정을

Right + Bottom 으로 바꿔줍니다!

그러면 말풍선 프레임의 오른쪽 아래를 기준점으로 붙어다니게 돼요!

툴팁의 내용이 길어져도 이렇게 지정된 위치에 자리해요

저한텐 정말 유용했어요

이 부분을 어떻게 해결해야할지 몰랐고,

어떤 키워드로 검색해야 해결방법을 찾을 지도 몰라서

정말 답답했는데 가려운 부분을 긁어준 느낌이라

행복할 정도로 ^^ ㅎㅎ....

이번 차시에서는 반응형과 적응형의 차이에 대해서

주의를 기울여서 수강했는데요

제가 가게 될 회사의 서비스가

웹 기반이긴 하지만 모바일로도 적용될 가능성이

있어보였기 때문이에요...! (물론 직접 써봐야 알겠지만)

특히나 브레이크포인트를 지정하고

이를 개발자분들과 소통하는 방식에 대해서도

알려주셔서 좋았습니다

특히 한 번 알아두면

어떤 서비스든 써먹을 수 있으니 정말 중요하죠!!

++++

그리고 이 점을 계속해서 강조해주셨는데요

*** 반응형 제작하기 전에 무조건 제일 먼저 할 것 ***

디바이스 정하기(pc, 태블릿, 모바일)

이걸 미리 정해두어야 하는 이유

만약에 커뮤니케이션 미스로 중간에 갑자기 변경하게 되면

ex) 웹 기반으로 만들기로 했는데, 개발 이슈로 모바일부터 만들어야하면

1) 처음부터 다시 만들어야 함

2) 열심히 디자인한 레이아웃 무용지물

정말 디자이너로서 낭패죠

이런 불상사가 없게

가장 처음에 개발자분들과 협의해야합니다!

그래서 거의 대부분의 디자이너 공고에서 요구하는 역량이

커뮤니케이션인가봐요!

다음은 드디어 마지막 수업이자

대망의 포트폴리오 특강입니다....

정말 기쁘네요

내일도 화이팅해봅니다...

본 후기는 스나이퍼팩토리 UXUI 인턴형 프로그램 9기 과정(B-log) 리뷰로 작성되었습니다.

#UXUI인턴형프로그램9기 #스나이퍼팩토리 #인사이드아웃 #UXUI #UX/UI디자이너 #콘텐츠디자이너 #디자이너교육 #디자이너인턴

UXUI 취준생의 피그마 베리어블 정복기 [사전직무교육 3일차_10/22] | 스나이퍼팩토리 UXUI 인턴형 프로그램 9기

eun9077 — Sun, 26 Oct 2025 12:49:44 +0900

안녕하세요~!

오늘은 벌써 사전직무교육의 절반을 지나고 있어요

앞으로 교육이 이틀만 남았고

다음주에 바로 출근이라는 사실이 믿기지 않는...

좀 떨리지만 마음을 다잡아 봅니다...!

이번 시간에는

피그마의 Style과 Variable 실습 위주로 진행했어요!

베리어블과 스타일은 협업할 때 아주 유용하게 작업할 수 있는 속성입니다

아래는 수업할 때 들었던 부분을 포함해서

ChatGPT에게 도움을 받아 더 꼼꼼하게 정리해본 필기예요

✅ 스타일(Styles)이란 무엇인가

스타일은 특정 속성(property)의 조합을 하나의 정의된 세트로 저장해 재사용할 수 있게 해주는 기능이에요.

예를 들면 텍스트 스타일, 색상 스타일, 그리드 스타일 등이 있어요.

예시: 텍스트 스타일 “Heading 1”에는 폰트 패밀리 + 폰트 크기 + 폰트 두께 + 줄간격 등이 포함될 수 있어요.
색상 스타일의 경우 단일 색상(#FFFFFF) 뿐 아니라 그라디언트, 여러 개의 채우기(fills)를 조합한 것도 가능해요.
스타일은 “이 요소에 이 스타일을 적용하면 이 속성들이 한꺼번에 세팅된다”라는 방식으로 쓰여요.

스타일이 좋은 상황

같은 유형의 UI요소(예: 버튼, 카드, 텍스트 헤딩 등)가 여러 군데 있을 때 일관된 속성 적용이 필요할 때
디자인 파일 내에서 빠르게 전체 요소의 속성(색상, 글꼴, 효과 등)을 변경하고 싶을 때
비교적 단일 모드(라이트 모드만 존재하거나)에서 테마 변형이 많지 않을 때

베리어블(Variables)이란 무엇인가

베리어블은 디자인 토큰(token) 개념에 더 가까운 재사용 가능한 원시값(raw value)을 저장하는 기능이에요.

색상, 숫자(spacing, 크기), 문자열, 불리언(true/false) 등이 될 수 있어요.

하나의 변수에는 여러 “모드(mode)”를 둘 수 있어, 예를 들어 light mode / dark mode 같은 테마별 값이 저장될 수 있어요.
변수는 스타일이나 다른 변수에 참조(alias)될 수 있어요. 즉 변수 → 변수, 변수 → 스타일 이런 구조로 설계할 수 있어요.
스타일과 달리 한 번에 여러 속성을 포함하기보다는, 변수 하나가 원시값 하나(혹은 모드별 여러 값)인 경우가 많아요.

베리어블이 좋은 상황

다크 모드/라이트 모드, 브랜드 리브랜딩 등 테마 변형이 많은 디자인 시스템일 때
디자인-코드 간 핸드오프(handoff)에서 토큰 기반으로 값이 전달되어야 할 때
스페이싱, 애니메이션 지속시간, 반복 횟수 등 숫자 값이 여러 곳에서 공유되어야 할 때
스타일의 속성 하나하나를 변수화해서 세밀하게 제어하고 싶을 때

ZEP에서 열심히 들었습니다 ^^

사실 수업이 베리어블 위주로 이어졌는데

스타일과 베리어블의 차이점을 잘 이해하지 못해

채팅으로 질문을 드렸어요!

그랬더니 친절하게 설명해주셨습니다

간단히 정리하자면,

베리어블 - 요소 수정 자주 필요, 대규모 디자인 시스템을 작업할 때

스타일 - 한꺼번에 속성을 적용, 비교적 단순한 디자인 시스템을 작업할 때

유용하다!

그리고

스타일은 주로 텍스트를 사용할 때

베리어블은 브랜드 컬러, 라이트/다크 모드, 패딩, 레디어스 값 등을 관리할 때

잘 사용합니다!

강사님께서는

혼합해서 사용하는 경우도 많지만

회사마다 스타일이나 베리어블 중 하나만 선택해서

협업하는 경우도 많기 때문에

회사의 업무 문화나 시스템에 맞게 활용하라고 하셨어요!

본격적으로 베리어블 실습이 이루어졌는데요!

먼저 Collection 1 이라는 카테고리를 하나 만들어줍니다

그 다음에 설정한 브랜드 컬러와

위계를 위한 그레이스케일을 입력해줍니다!

그리고 다시 Collection 2 라는 카테고리를 생성해서

이번에는 컬러값을 직접 입력하지 않고 라이브러리에서

아까 Collection 1에서 만든 컬러를 참조해와요!

아까 Collection 1에서 생성한 브랜드 컬러가 있죠?

굳이 왜 또 같은 작업을 반복해서 할까? 의문이 들었는데요

이 부분에 대해서 다른 분들도 궁금하신 것 같더라고요!

강사님께서

1차는 원시값 보존, 2차로 생성한 것은 협업을 위해

별도로 생성한다고 정리해주셨습니다

1) 협업에 용이함

2) 1차로 생성한 값을 2차에서 참조 가능
(1차에서 값을 변경해도 2차에 자동 반영)

로 베리어블의 주요 장점을 정리할 수 있겠네요

컬렉션 1에서 생성한 컬러값을 참조하면

이렇게 컬렉션 2가 완성됩니다

여기서 끝나는 것이 아니라

이 컬러들을 어떤 속성에 적용할지도 별도로 지정해주어야 하는데요!

생성한 컬러들을 모두 드래그하여 범위를 잡고

오른쪽의 Edit variable 아이콘 클릭 후 Scope를 선택해요

그리고 적용할 속성들만 선택해줍니다

컬러는 보통 프레임이나 도형, 텍스트, 외곽선에 적용되기에

위와 같이 속성을 지정해줬어요

그리고 타이포그래피(폰트 패밀리)와 래디어스, 폰트 사이즈 값까지

생성해주면 베리어블 지정 완료!

이런 베리어블 디자인 값들을 '디자인 토큰'이라고 합니다!

텍스트에

베리어블 속성으로 지정해본 모습입니당 ㅎㅎ

++++

추가적으로 이렇게 디자인 토큰을 만들고

협업을 위해 문서화하는 작업까지 배웠어요

'Local Print'라는 플러그인을 활용하면

이렇게 자동으로 문서화 할 수 있어요

깔끔하죠?☺️

스타일은 컬러 하나만 지정하면

플러그인을 통해서 만들 수 있더라고요!

좋은 플러그인들이 많으니

이 부분 정리는 생략!

저는 지금까지 디자인 작업을 하면서

스타일은 많이 사용해 봤지만

베리어블은 한 번도 사용해 본 적이 없었어요

이번에 베리어블 사용 방법과 스타일과의 차이점,

어떤 상황에 활용하면 좋은지 배울 수 있어서

너무 좋은 기회였어요

점심시간에 밥 먹고 먹은 디저트

아침 9시부터 저녁 6시까지 교육 중간에

점심시간은 한 줄기 빛

ㅠ.ㅠ

아니 점심시간 끝나고 ZEP 다시 접속하려니

갑자기 안 돼서 당황....

(무사히 해결했어요....^^)

그 다음으로는 Property 등록과 활용을 실습했어요

프로퍼티는 Component 와 Variant 랑 연결되는 중요한 개념...!

하나의 컴포넌트 안에서

1. 버튼의 타입 (Default / Hover / Disabled 등)

2. 아이콘의 유무 (On / Off)

3. 아이콘 인스턴스의 변경 (다른 아이콘과 Swap)

3. 텍스트(Label)의 내용 변경

을 손쉽게 할 수 있도록 도와주는게 바로 Property 입니다

버튼 컴포넌트를 생성하고

오른쪽의 Properties 패널에서

등록하고 싶은 속성을 등록해줍니다

총 4가지 종류의 속성이 있어요

특히 유용하다고 생각했던 부분은

Boolean 으로 아이콘을 넣거나 뺄 수 있는 점!

컴포넌트에서 지정한 프로퍼티는

인스턴스에서 자유롭게 조정 가능합니다

위 버튼의

[ Variant ]

상태는 Default

타입은 Fill

사이즈는 Large

[ Instance Swap ]

Right/Left icon 은 기존에 컴포넌트로 만든 아이콘의 인스턴스라

Instance Swap 등록으로 변경할 수 있게 했어요

[ Boolean ]

아이콘 On/Off 가능

[ Text ]

안에 들어가는 텍스트는 Label 이라는 속성으로 지정해서

들어가는 내용을 자유롭게 수정할 수 있어요

왼쪽 회색 버튼은 같은 컴포넌트이고

프로퍼티 속성을 살짝 변경해줬어요

상태는 disable로 비활성화된 버튼처럼 보이죠?

아이콘은 모두 끄고, 텍스트도 '결제하기'라고 변경했어요

컴포넌트에 오토레이아웃을 적용했기 때문에

** 외곽 프레임은 Hug contents 상태라 따라서 사이즈가 자동으로 조절 **

결제하기라는 버튼을 따로 다시 만들지 않고

프로퍼티만 간단하게 조정해주면 수정이 아주 쉬워지는거죠!

실습은 거의 끝나고

팀플로 기존에 선정한 서비스의

베리어블과 프로퍼티를 등록하고

활용하는 시간을 가졌어요

열심히 연습해본 흔적

저희 팀이 선정한 아이캠펑 서비스는

서비스의 유저플로우와 뎁스가 깊지 않아서

비교적 빠른 시간에 끝냈습니다!

강사님 설명을 놓쳐서 모르는 부분이 있으면

서로 알려주면서 작업했어요

저도 하나하나 알려드리면서 복습도 하고 좋았어요☺️

귀여운 우리팀....

++++

그리고 남는 시간에

저번에 서비스 분석할 때

휴리스틱 사용성 평가 부분이 부족했던 것 같아서

다같이 평가했어요 ㅎㅎ

휴리스틱 사용성 평가

이전 글이 보고싶다면?

2025.10.22 - [UXUI 인턴 9기] - 컴포넌트 지옥에 온 걸 환영해... [사전직무교육 2일차_10/21] | 스나이퍼팩토리 UXUI 인턴형 프로그램 9기

본 후기는 스나이퍼팩토리 UXUI 인턴형 프로그램 9기 과정(B-log) 리뷰로 작성 되었습니다.

#UXUI인턴형프로그램9기 #스나이퍼팩토리 #인사이드아웃 #UXUI #UX/UI디자이너 #콘텐츠디자이너 #디자이너교육 #디자이너인턴

컴포넌트 지옥에 온 걸 환영해... [사전직무교육 2일차_10/21] | 스나이퍼팩토리 UXUI 인턴형 프로그램 9기

eun9077 — Wed, 22 Oct 2025 01:42:44 +0900

안녕하세요!

2일차 학습일지를 기록하려합니다!

오늘도 역시 이론+실습으로 하루를 채웠는데요

이론은 사용자 경험(User experience)에 대해 배웠습니다

특히 열심히 들었던 부분은

제이콥 닐슨의 10가지 휴리스틱 평가 원칙

부분이었습니다!

휴리스틱 평가는 전공 수업에서 자세하게 다루진 않아서

이름만 어렴풋이 알고 있었단 사실이 조금 부끄러웠어요....

그렇다고 해서 특별히 더 어려운 내용은 아니었고,

지금까지 UXUI를 공부해오면서 항상 사용성을 우선으로

고려하면서 프로젝트를 진행해왔다면

이 휴리스틱 평가 항목을 굉장히 친숙하게 느낄 것 같단 생각이 들었어요

휴리스틱 평가 항목	평가 내용 및 예시
제품 상태의 가시성 (Visibility of System Status)	사용자가 현재 시스템이 무엇을 하고 있는지, 상태가 어떠한지를 즉각적이고 적절한 피드백을 통해 알 수 있어야 하는 원칙 예를 들어 버튼을 누른 뒤 ‘로딩 중’, ‘저장됨’ 등의 메시지나 진행 바가 나타나면 사용자는 다음 행동을 판단하기 쉬워진다.
제품과 사용자의 현실 세계를 반영 (Match Between System and the Real World)	시스템은 사용자에게 익숙한 언어, 개념, 비유를 사용하며 현실 세계의 논리적 흐름을 반영해야 하는 원칙 내부 전문용어나 낯선 표현 대신 일상적인 단어와 아이콘을 활용하면 사용자의 학습 부담이 줄어든다.
사용자에게 자유와 주도권 제공 (User Control and Freedom)	사용자가 실수로 기능을 실행했을 때 ‘취소하기’, ‘되돌리기(Undo)’, ‘돌아가기(Back)’와 같은 방법으로 쉽게 복귀할 수 있어야 하는 원칙 사용자가 시스템에 갇히지 않고 자유롭게 조작할 수 있을 때 더 높은 통제감을 느낀다.
일관성 및 표준성 (Consistency and Standards)	동일한 의미의 요소가 다른 곳에서 다르게 표현되면 혼란을 초래하므로, UI 구성 요소와 용어, 행동 방식이 일관되어야 하는 원칙 또한 플랫폼이나 업계에서 통용되는 표준을 따르면 사용자는 별도의 학습 없이도 인터페이스를 이해할 수 있다.
오류 예방 (Error Prevention)	오류를 수정하는 것보다 애초에 오류가 발생하지 않도록 설계하는 것이 더 중요하다는 원칙 ‘정말 삭제하시겠습니까?’와 같은 확인 창이나 입력값 제한 기능을 통해 사용자의 실수를 줄일 수 있다.
보는 것만으로도 이해할 수 있음 (Recognition Rather Than Recall)	사용자가 정보를 기억하지 않아도 되도록 필요한 선택지나 정보가 화면에 명확히 표시되어야 하는 원칙 메뉴나 옵션이 숨겨져 있지 않고 눈에 띄는 형태로 제공될수록 사용의 난이도가 낮아진다.
유연성과 효율성 Flexibility and Efficiency of Use)	초보자에게는 단순하고 직관적인 흐름을 제공하고, 숙련 사용자에게는 단축키나 고급 기능 등 빠른 경로를 마련해야 하는 원칙 다양한 수준의 사용자를 고려한 설계를 통해 시스템의 효율성과 유연성이 동시에 확보된다.
심미적이고 단순한 디자인 (Aesthetic and Minimalist Design)	불필요한 정보나 요소가 많으면 사용자가 본질적인 기능을 찾기 어려워지므로, 단순하고 명료하게 구성해야 하는 원칙 심미성은 중요하지만 장식이 과하면 사용성을 저하시킬 수 있으므로 균형이 필요하다.
사용자가 오류를 인식하고 진단하고 복구할 수 있도록 지원 (Help Users Recognize, Diagnose, and Recover from Errors)	오류 메시지는 사용자가 이해할 수 있는 언어로 문제를 설명하고, 해결 방법을 제시해야 하는 원칙 사용자가 오류의 원인과 복구 경로를 쉽게 파악할 수 있을 때 시스템에 대한 신뢰감이 높아진다.
도움말과 설명서 (Help and Documentation)	이상적인 시스템은 설명서 없이도 사용할 수 있지만, 필요하다면 도움말이나 문서를 제공해야 하는 원칙 이 문서는 사용자의 실제 작업을 중심으로 간결하게 작성되어야 하며, 복잡하거나 장황해서는 안 된다.

강의 내용 정리 + 추가 리서치 후에 보완한 필기예요!

대부분의 내용은 제가 UXUI를 공부하거나 프로젝트를 하면서

무의식적으로 의식하면서(?) 떠올렸던 것들이에요 ㅎㅎ

그만큼 중요하다는 뜻이기도 하죠?

강의 중에는 강 항목별로 해당되는

실제 서비스들의 캡쳐화면을 보여주셔서

쉽게 이해할 수 있었어요!

예시로 1번 제품 상태의 가시성에서는

배달의 민족 서비스에서 배달 불가능 지역일 경우에

'텅'이라는 문구가 적힌 화면을 통해

사용자가 특별한 액션을 취하지 않아도

어떤 상황, 단계에 쳐해 있는지 알 수 있도록 해주는 점이

잘 적용된 사례라고 볼 수 있어요

어제와 마찬가지로 이론이 끝나고 실습으로 넘어갔습니다!

반응형 웹사이트의 Header UI를 만들어보았어요

이 파트에서 중요한 부분은

반응형 웹의 구성 요소들은 Constraints 설정이 ( Left + Right )로

되어 있어야한다는 점이었어요!

이렇게 잘 설정된 GNB는

웹사이트의 가로 너비를 사용자가 임의로 변경해도

그에 따라 (요소간 gap은 auto이기에) 자연스럽게 반응하여 움직이게 돼요!

이어서 Interactive component에 대해 실습했어요

컴포넌트에 인터랙션을 적용하는 파트예요!

탭 메뉴에서 항목1이 활성화된 상태에서

항목2를 클릭하면 Smart animate를 통해

자연스러운 인터렉션이 생성됐어요

수업 막바지에는 팀플을 진행했어요

UX 구성 요소들과 휴리스틱 평가 항목을 바탕으로

기존에 사용하던 서비스 중에서

페인포인트가 뚜렷하게 드러나는 서비스를 선정하고 분석해보았습니다

온라인 7팀의 열정...

저희 팀은 각자 모두 다른 앱을 분석해왔어요

각자가 선정한 앱의 간단한 User Flow와 주요 화면을 소개하고

가장 불편했고 개선점이 있었던 파트에 대해 이야기를 나누었습니다

다수결을 통해 최종적으로 제가 조사해온

대학생 대외활동 큐레이션 서비스인 '아이캠펑'이

사용성을 개선하기 가장 적합한 (가장 불편한 ㅋㅋㅋ) 서비스로 정해졌어요

이 서비스는 전반적으로 완성도가 떨어져보인다는 의견이 많았어요

특히 콘텐츠 탐색 화면에서 대외활동 콘텐츠들을 필터링하는

드롭다운 메뉴 탭(탭의 성격도 가짐)의 활성화/비활성화가 구분이 되지 않았고,

빈 화면을 설명해주는 요소도 없어 오류로 인식할 가능성이 많아보이네요

저희 팀은 이거를 개선하는 작업까지 할 줄 알았는데

시간관계상 현재 UI의 컴포넌트를 그대로 그려보는 실습만

하게 되어서 약간 아쉬웠어요!

다들 은근 열정맨이라 개선 욕구가 뿜뿜함...☺️

앱 화면 보면서 열심히 만들어준 컴포넌트 ️

지난 시간에 아이콘 그리기와 오토 레이아웃

열심히 상기시키며 그려줬어요

꽤나 오래걸려서... 진짜 힘들었음

컴포넌트 완성 후에는 왼쪽의 캡쳐화면을 보면서

그대로 따라그려보았어요

살짝씩 변경된 부분은

1) 여러가지 Variant를 사용해보고자

2) 굳이 필요없는 기능이라 임의로 삭제

해보았습니다!!

이번 차시에서는 반응형 웹 Header를 만들고

앱을 여러 사람들과 같이 분석하는게

제법 오랜만이어서 재미있었어요!

본 후기는 스나이퍼팩토리 UXUI 인턴형 프로그램 9기 과정(B-log) 리뷰로 작성 되었습니다.

#UXUI인턴형프로그램9기 #스나이퍼팩토리 #인사이드아웃 #UXUI #UX/UI디자이너 #콘텐츠디자이너 #디자이너교육 #디자이너인턴