[ project3/ Refactor ] Design Concept을 잡기 위해서 참조한 사이트 (Feat. 숙박 사이트)

내 사이트는 MVP(minimum Value Product)숙박 사이트다. 그러다보니 크게 2가지 회사 사이트를 참조 했다.

 

업데이트 일자 : 2024.07.17

※ 내용이 변경사항이 생기면 여기에 추가적으로 기입할 예정

 

airbnb

여기어때

 

그리고 마지막으로 네이버 N pay

네이버 N페이는 카드 UI 방식을 활용하고 있다. 특히 정돈된 형태를 가지고 있어서 데이터를 선택했다.

이유는 아래와 같다.

"즉, Design System이란 화면의 UI 요소 중 공통 패턴과 주요 컴포넌트를 추출하여, 구성원들이 이를 효율적으로 사용하는 하나의 프로세스를 의미합니다."

- 네이버페이 금융FE, 디자인시스템TF 소속 안재연-

핵심은 공통 패턴 추출 =>  효율적 사용

 

그들이 고민을 한 계기(이유)

네이버파이낸셜 서비스가 점점 커지면서 디자인 팀에서 다른 팀에게 대응이 버거워져 패턴을 추출하고 쉽게 사용가능하도록 만들어 props으로 정보만 변경가능할 수 있도록 하는 것.

 

 

Mypage에서 UI 사용하기

특히 mypage 영역에서 네이버 UI 형태를 많이 사용하였다. 페이지(쿠폰, 예약 내역 등)가 달라질때마다 고민을 덜하기 때문이다.

 

 

ps-

전 그냥 UI만 따라했습니다.

prop 전달 방식을 좀 더 배워보고 싶다는 생각이 들었다.

 

 

 

 

출처

https://medium.com/naverfinancial/defign-%EB%84%A4%EC%9D%B4%EB%B2%84%ED%8C%8C%EC%9D%B4%EB%82%B8%EC%85%9C%EC%9D%98-%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C%EC%9D%84-%EC%A0%95%EC%9D%98%ED%95%98%EB%8B%A4-7b7449832f26