공지
iamwls.ziP 기록 보관함에 오신 것을 환영합니다.

⛳️ 2023 원티드 프리온보딩 디자인 챌린지 내용 + 후기

원티드 프리온보딩 궁금해?

2023.06.22 | 조회 1.61K |
0
|
iamwls.ziP의 프로필 이미지

iamwls.ziP

메일 한통으로 가치있는 경험을 공유합니다 💭

https://www.wanted.co.kr/events/pre_challenge_design_1

프리온보딩 디자인 챌린지 3월 | 원티드

 

원티드에서 진행한 2023 프리온보딩 디자인 챌린지에 참가해 배운 내용을 정리했습니다.

👉🏻 비전공자인 나는 누군가에 의해 디자인을 제대로 배워본 적이 없었다.그래서 디자인 관련한 강의나 영상들을 자주 찾아봤었는데, 원티드에서 2023년 3월에 '프리온보딩 디자인 챌린지'가 열린다는 것을 보고 바로 참여했다. 커리큘럼은 디자인 이론에 대한 기본적인 내용들을 다루고, 실무에서 실제로 사용되는 디자인 시스템, 컴포넌트를 보여주시고 직접 실습할 수 있는 파일도 제공해주셔서 UIUX 디자인 분야로 취업을 준비하는 취준생들에게 정말 큰 도움이 될만한 강의였던 것 같다. 현재 회사에 재직중인 나도 다른 회사는 어떻게 사용하고 있는지 볼 수 있었고, 디자인 시스템 개선 작업에 도움이 됐던 것 같다. 이론은 기본적이였지만 다시 한번 정리해볼 수 있어서 좋은 경험이였다 🙌🏻

 

📖 사용자 경험과 사용자 인터페이스

UX : User Experience

→ 사용자가 어떠한 제품이나 서비스를 직/간접적으로 이요하면서 느끼는 총체적 경험

UI : User Interface

→ 제품이나 서비스를 사용자가 원활하게 상호작용 혹은 의사소통 할 수 있게 해주는 접점

  • Plus 지식 !! (가상적 매개체) - GUI (Graphic User Interface) - VUI (Voice User Interface) ex) 스마트 스피커 음성이 주된 UI

 

📖 제품에서 디자이너의 역할

UX Designer : 고객 경험의 전반적인 부분 설계

▶️ 다양한 이해관계자로부터 요구사항을 분석하고 제품으로 풀어내는 역할

▶️ 정성적, 정량적 조사

▶️ 순서 : 정량적 → 정성적

 

UI Designer : 인터페이스에 집중

▶️ 개발자와 직접적인 소통을 함

 

UX Designer → Product Designer

👉🏻 폭 넓은 시야 (비즈니스, 데이터, UX, 화면 개발 등)

▶️ 워터풀 : 큰 제품 사이클, 프로세스 / 분업 중심적, 완성형 제품 릴리즈

▶️ 애자일 : 빠른 제품주기, 고객 중심적, !!! 점진적인 !!! 제품 향상

 

UI Designer → Platform Designer

👉🏻 시각적 가이드라인 설계, 디자인 시스템 설계 및 구축 / 피드백 수집

👉🏻 개발팀과 긴밀한 협업

***** 사용자 : Product Designer *****

 

🎨 주니어 레벨의 프로덕트 디자이너에게 기대하는 역량

→ 단일 디자인 요소, 작은 영역의 디자인 문제 해결능력

→ 프로덕트 레이아웃 UI 구성, 시각적인 UI

→ 직접적인 제품의 개선보다는 조직의 언어규칙을 통해 좋은 사례를 배우고 적용하는 능력

 

📐 디자인 필수개념 해상도

PX → Picture Element

▶️ 색정보, 투명도 포함 / 픽셀이 많으면 고해상도

***** 픽셀수, 해상도, 용량은 비례 *****

  • Vector → AI, FPS, SVG▶️ 크기 변화가 자유로움▶️ SVG → 로딩 속도가 빠름 / 검색엔진 최적화 / css로 간단 수정 가능▶️ 크기와 용량 비례 X
  • Bitmap → GIF, PNG, JPG, MP…▶️ 계단 현상▶️ 실제 촬영한 사진, 영상 기반으로 하는 작업 등▶️ 확대/축소를 해도 픽셀수가 그대로


목적에 맞는 해상도 설정하기

👉🏻 PPI (Pixel Per Inch)

: 1인치 당 얼마나 많은 픽셀이 들어있나?

보통 웹 표준 : 72 or 96 ppi (옛날)

ex) 1 inch 10 pixel → 총 10 * 10 = 100px

***** PPI가 높으면 해상도도 높다 *****

👉🏻 DPI (Dots Per Inch)

: 1인치 당 얼마나 많은 점이 있어있나?

인쇄 (프린터, 출력물)에서 사용

 

PPI와 화면 해상도

👉🏻 같은 면적이라도 픽셀 갯수가 많아지면 픽셀이 압축되어 크기가 작아지는 속성

*** 내가 디자인 하는 화면이 디바이스 환경에 따라 다르게 보인다는 것 고려하기 ***

1️⃣ 고밀도 해상도

→ Apple Retina Display

👉🏻 기존의 인치랑 픽셀 밀도를 2배 (픽셀 4배)나 많은 픽셀로 표현해 선명도를 높인 기술

👉🏻 고밀도 해상도에서 잘 보이려면 !! → 2배수 해상도 작업

👉🏻 최근 PPI 460까지

2️⃣ 논리적 해상도

→ 변하지 않는 절댓값

👉🏻 순수한 픽셀 밀도

👉🏻 운영체제 별 논리적 해상도 규격 명칭이 다름 → css - px / iOS - pt / And - dp

*** UI 디자인은 논리적 해상도로 디자인 ***

3️⃣ 물리적 해상도

→ 레스터화, 논리적 해상도 (벡터)를 픽셀로 변환

👉🏻 논리적 해상도에 픽셀 밀도가 적용되는 단계

 

[AHA MOMENT] 서버, 클라이언트가 뭐죠?
1️⃣ 서버 (서비스 제공자) : 데이터를 포함하거나 네트워크의 다른 컴퓨터에서 엑세스 하는 기능을 제공하는 컴퓨터
2️⃣ 클라이언트 (서비스 소비자) : 서버로부터 서비스나 데이터를 요청하는 컴퓨터
3️⃣ API (Application Programming Interface) : 컴퓨터와 컴퓨터 사이를 연결해주는 통신규격

 

다가올 뉴스레터가 궁금하신가요?

지금 구독해서 새로운 레터를 받아보세요

✉️

이번 뉴스레터 어떠셨나요?

iamwls.ziP 님에게 ☕️ 커피와 ✉️ 쪽지를 보내보세요!

댓글

의견을 남겨주세요

확인
의견이 있으신가요? 제일 먼저 댓글을 달아보세요 !
© 2025 iamwls.ziP

메일 한통으로 가치있는 경험을 공유합니다 💭

메일리 로고

도움말 자주 묻는 질문 오류 및 기능 관련 제보 뉴스레터 광고 문의

서비스 이용 문의admin@team.maily.so

메일리 사업자 정보

메일리 (대표자: 이한결) | 사업자번호: 717-47-00705 | 서울 서초구 강남대로53길 8, 8층 11-7호

이용약관 | 개인정보처리방침 | 정기결제 이용약관 | 라이선스