brunch

You can make anything
by writing

C.S.Lewis

by 패스트파이브 Oct 07. 2022

[디자인] UXUI 기획 디자인에 참고할 만한 사이트

UXUI 기획 시 다양한 케이스의 레퍼런스를 체크해 보세요.




[디자인]UXUI 기획 디자인 시 참고할 만한 사이트 


이런 분들이 읽으면 좋아요.

UXUI 기획을 하면서 다양한 케이스의 레퍼런스를 체크하고 싶은 분

UX적으로 좀 더 효율적인 UI 아이디어를 얻고 싶은 디자이너


이런 내용을 알 수 있어요.

다양한 모바일 패턴을 참고할 레퍼런스 사이트를 알 수 있어요.

IT 서비스 관점에서 다양한 인사이트와 피드백을 얻는 사이트를 알 수 있어요.



*아래 콘텐츠는 패파솔루션 공식 제휴사 [똑똑한개발자]에서 제공해 주셨습니다. 



안녕하세요, 똑똑한개발자 디자이너 수지입니다.


UXUI 기획과 디자인을 하다 보면 종종 “어? 이런 플로우 어디에서 썼더라? 이건 그거처럼 하면 더 효율적일 것 같은데!” 하고 비슷한 서비스를 떠올리거나, “이건 도저히 어떻게 다른 방식으로 풀어내야 할지 모르겠다!” 하고 막막해지는 순간이 있죠!


오늘은 실무에서 유용하게 활용하고 있는 레퍼런스 사이트들을 소개합니다. 이미 알고 있는 사이트가 있다면 반가운 마음으로, 모르는 정보라면 앞으로 여러분의 실무 커뮤니케이션 스킬을 조금 더 업! 시켜줄 수 있는 좋은 인사이트가 되길 바라며 적어봅니다.



다양한 패턴의 레퍼런스를 찾는다면!


1. WWIT 윗 - 한국 모바일 패턴의 수집

우아한형제들의 이유진 프로덕트 디자이너가 만든 WWIT(What Was IT)입니다.

Mobbin 이라는 사이트에서 영감을 받아 한국의 모바일 디자인 패턴을 수집하기 위해 만들었다고 해요!

서비스를 만들다 보면 문화와 인프라가 다른 해외 앱의 스크린샷을 참고하는 것만으로 부족할 때가 많습니다. 같은 언어와 문화, 규제를 공유하기에 한국에서 만들어진 서비스만을 아카이브 하는 것만으로도 의미가 있겠다는 생각에 만드셨다고 하네요.


실제로 윗에 아카이빙된 스크린샷을 모아보다보면 비슷하면서 다른 점이 보여, UX나 UI 기획 단계에서도 많은 인사이트를 얻을 수 있고요. 운영자가 실제로 가입해서 회원가입부터 탈퇴까지 서비스 전체의 흐름을 아카이빙 해두기 때문에 필요한 기능과 섹션별로 참고하기도 좋습니다.

최근엔 카테고리와 패턴별 분류도 업데이트되고, 지속적으로 흥미로운 앱과 서비스 스크린샷도 업데이트되고 있어서 한국의 UXUI 트렌드를 파악하기에도 편리합니다.

나만 알고 있는 멋진 서비스가 있다면 윗에 제보해보시는 것도 좋을 것 같네요!




2. Mobbin 모빈 - 글로벌 모바일 패턴 수집

WWIT이 영감을 받은, 모바일 패턴 수집의 원조(?) Mobbin 모빈입니다. 에어비앤비부터 인스타그램, 노션 등등 다양한 글로벌 서비스의 모바일 패턴을 아주 상세하게 구분해 두었습니다.

IOS/AOS 에 따라 구분해서 볼 수 있는 것은 물론, 온보딩, 맵 뷰 등 특정 플로우에 따라서 따로 화면들을 모아볼 수도 있죠. 필터링도 굉장히 상세해서 ‘로그인 중의 화면인지, 로그아웃 상태의 화면인지' 등의 구분도 가능합니다.

다만 몇몇 기능들은 로그인/회원가입을 진행해야만 사용할 수 있으니 참고하시면 좋을 것 같네요!




3. Dark mode design - 다크모드 웹 패턴 수집

다크모드가 적용된 글로벌 웹사이트를 모아서 보여주는 Dark mode design입니다.

모바일 패턴이 아닌, ‘웹' 아카이빙이지만 반응형이 적용된 사이트도 있기 때문에 참고할 수 있는 요소가 많을 것 같아요. 실제 프로덕트 디자이너가 직접 운영하고 있기 때문에 감각적인 레퍼런스를 많이 발견할 수 있습니다.

실제 프로덕트에서 시스템적으로 다크모드 UI 컬러 적용을 참고하기엔 어렵겠지만, 랜딩 페이지나 서비스 또는 회사소개 페이지, 인터랙션 측면에서 참고하면 도움이 될 듯합니다.




도움이 되는 아티클과 인사이트를 찾아보고 싶다면?


1. Disquiet 디스콰이엇 - IT 서비스 메이커들을 위한 네트워크

IT 서비스 메이커들을 위한 네트워크 디스콰이엇입니다.

자신이 만든 프로덕트 혹은 잘 만들어졌다고 생각하는 서비스를 공유하고 다른 메이커들과 이야기를 나눌 수 있어요. 유용하다고 생각하는 서비스를 올려 더 많은 사람들에게 알려지도록 홍보할 수도 있고요.

앞서 소개한 WWIT도 디스콰이엇에 올라온 적이 있습니다.

생산성, 디자인, 노코드, 마케팅 등 다양한 카테고리에서 여러 사람들과 피드백과 인사이트를 주고받으며

사이드 프로젝트를 함께 할 팀원이나, 새로운 프로덕트 등을 알 수 있어 비슷한 분야의 프로덕트를 검색해보기에도 유용한 것 같습니다!



2. Surfit 서핏

분야별 다양한 아티클과 영감을 주는 콘텐츠를 큐레이션 해주는, Surfit 서핏입니다.

크롬 확장프로그램으로 설정할 수 있어, 데스크탑이나 랩탑을 켤 때마다 자연스럽게 그날의 추천 아티클을 모아볼 수 있다는 점이 가장 큰 장점이라고 생각됩니다.

따로 시간을 내거나 크게 노력하지 않아도 틈틈이 아티클을 읽는 습관이 생기고 성장할 수 있는 거죠!

디자인, 개발, 기획 다양한 카테고리가 있지만 나의 관심 분야만 따로 설정해 모아볼 수도 있고, 인사이트가 되는 콘텐츠를 저장해서 아카이빙 할 수도 있습니다.

단순히 아티클 큐레이션 뿐만 아닌, 채용이나 포트폴리오 등 커리어 플랫폼으로도 지속적으로 확장하고 있어서 IT업계 디자이너/기획자라면 다들 관심 있게 지켜보는 것 같네요!




3. 지금 써보러 갑니다

UXUI, 트렌드, 컬러, 로고 등 디자인/기획 관점에서 흥미로운 사례와 콘텐츠를 소개하는 ‘지금 써보러 갑니다' 입니다!

이름만으로도 눈에 딱 들어오는데 말 그대로 궁금한 것들을 대신 사용해보고 후기를 작성해주시는 느낌이라 흥미로운 콘텐츠가 정말 많습니다.

활용하기 좋은 템플릿이나 사례도 정리해서 소개하고 있어서, 디자이너가 아닌 서비스 기획자도 참고하고 적용하기 매우 편리합니다!




마치며

지금까지 UXUI 기획과 디자인에 참고하기 좋은 다양한 레퍼런스 사이트를 소개해드렸는데요.

결국 성장하기 위해서는, 내가 찾은 다양한 정보들을 내 것으로 만들기 위한 적용과 실천이 가장 중요하다고 생각합니다. 내 것으로 만들기 위한 노력이 수반되지 않으면 결국 휘발되어 날아가거나, 또다시 같은 주제로 같은 콘텐츠를 리서치하고 있는 나 자신을 발견할 때가 많아지는 것 같아요.


다양한 레퍼런스는 인사이트의 일부일 뿐, 나만의 가이드라인과 프로세스가 정립된다면 그러한 나의 방식이 또 다른 누군가에게 인사이트가 될 수 있을 것이라고 생각합니다.

읽어주셔서 감사합니다 :)



작가의 이전글 [마케팅] MZ 세대를 사로잡는 인스타툰!
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari