Flexbox ❤️ Components8 컴포넌트 클로닝(8) - 쿠팡이츠 제가 유일하게 사용하는 음식 배달앱인데요. 배달 음식을 평소에 기피하고 가난해서인지 쿠폰 이벤트에만 주로 사용합니다.🤑 배달의 민족과 요기요도 예전에 사용했지만 쿠팡이츠를 사용하고 나서는 쭉 쿠팡이츠만 사용하는데요. 가장 큰 이유는 배달시간입니다. 쿠팡이츠는 아무리 길어도 30~40분 정도 걸린 거 같은데, 기존 배민이나 요기요 때는 주문마다 다르지만 길게는 1시간 30분까지도 걸린 적이 있어서인 거 같네요. 이런 부분에서 UX가 월등히 좋았지 않나 생각합니다.😁 포함되는 데이터로는 음식점 썸네일 음식점 이름 + 신규 음식점 여부 배달 예상 시간 평점 음식점 거리 배달비 쿠폰 여부 제가 배달시킬때 중점적으로 보는 게 평점보다는 거리인데요. 아무래도 멀리 있으면 미안하기도 하고 배달비의 압박 때문인 거 같.. 2021. 1. 4. 컴포넌트 클로닝(7) - 프로덕트 헌트 www.producthunt.com/ Product Hunt – The best new products in tech. Product Hunt is a curation of the best new products, every day. Discover the latest mobile apps, websites, and technology products that everyone's talking about. www.producthunt.com 가끔 둘러보는 사이트인데요. 새로 나오는 서비스나 프로덕트가 매일 업데이트되는 사이트입니다. 투표 기능을 통해 인기 있는 프로덕트가 상위에 노출되는데요. 가끔 쓸만한 생산성 도구나 신박한 서비스를 찾게 됩니다. 포함되는 데이터는 프로덕트 로고 프로덕트 이름 - 리스트.. 2020. 12. 28. 컴포넌트 클로닝(6) - 쿠팡 제품 리스트 www.coupang.com/ COUPANG 쿠팡은 로켓배송 www.coupang.com 약 2년 전부터 정착해서 쭉 사용 중인 쿠팡입니다. 쿠팡을 처음 봤을 땐 뭔가 국내 쇼핑몰보다는 아마존스럽다는 느낌을 많이 받았는데요. 리드 디자이너분이 구글 출신이었다는 이야기를 들었는데 정확하게 맞는지 모르겠네요😅 여튼 여러 가지 쇼핑몰을 쓰다 보면 가격 표시라던지 이미지 활용이라던지 판매하는 제품의 특성마다 다르겠지만, 시각적 위계가 가장 정석같이 정리된 게 쿠팡이라고 생각합니다. 쇼핑몰의 기본적인 레이아웃은 굉장히 오래전부터 연구 및 발전돼서 어느 정도 정석적인 부분이 있기 때문에 예술적(?)으로 변형을 주는 경우를 많이 보았는데요. 제 생각엔 시각적 위계의 기본은 갖추는 게 우선이라고 생각합니다😁 쿠팡에 가.. 2020. 12. 25. 컴포넌트 클로닝(5) - 유튜브 뮤직 컴포넌트 music.youtube.com/ YouTube Music | 음악 세상으로 통하는 문 YouTube Music에서 확인해 보세요. Android, iOS, 데스크톱용으로 공식 앨범, 싱글, 동영상, 리믹스, 라이브 공연이 담긴 새로운 음악 서비스를 여기에서 모두 만나보세요. music.youtube.com 저는 유튜브 프리미엄을 사용 중이라 자연스럽게 유튜브 뮤직을 사용하는데요. 유튜브와 연결되기 때문에 다양한 음악을 듣는 데는 좋은 거 같습니다. 몇 년 전 처음 나왔을 때는 쓰는 게 거의 불가능할 정도로 엉망이었는데 요즘은 굉장히 많이 나아진 서비스라고 생각합니다. 최근 블로그에 컴포넌트 클로닝 컨셉으로 글을 작성하다 보니 기존에 자연스럽게 쓰던 서비스도 몇 번씩이나 다시 분석하게 되었는데, 유튜브 .. 2020. 12. 9. 컴포넌트 클로닝(4) - 미디움 아티클 리스트 https://medium.com/ 이번에는 저만 알고 싶은 서비스인 Medium(이하 미디움)의 아티클 클로닝입니다. 미디움은 퀄리티 높은 블로그의 글을 모아서 큐레이션 해주는 서비스 인대요. 거의 대부분의 분야에 대해 최신 트렌드나 기술 동향을 파악할 수 있습니다. 영어라 좀 불편할 수도 있지만 저는 갤럭시탭을 사용하는데요. 구글 번역 앱을 깔아 두면 텍스트 선택 영역을 번역할 수 있는 기능을 사용할 수 있습니다. 아이폰에서 똑같이 시도했지만 아직은 되지 않네요. 아이폰에서도 얼른 번역이 가능하면 좋을 거 같습니다. 어쨌든 미디움 메인에는 아티클 목록이 있는데요. 깔끔, 단순하게 배치하고, 여백을 잘 사용한 화면 설계로 보입니다. 서비스의 대부분이 텍스트 위주라 심심해 보일 수 있는데 이미지를 영리하.. 2020. 12. 3. 컴포넌트 클로닝(3) - 핀터레스트 리스트 아이템 https://www.pinterest.co.kr/ 이번에는 레퍼런스나 참고할만한 화면 설계를 빠르게 찾아볼 때 사용하는 핀터레스트의 리스트 아이템을 클로닝 했습니다. 핀터레스트의 주요 사용자들은 이미지를 자신이 만든 보드(즐겨찾기)에 빠르게 정리하기 위해 사용하는데요. 그러기 위해 화면 설계가 잘되어 있다는 생각이 드네요. 저는 단순 참고만 하지 막상 이미지들을 정리하지는 않네요. 또 세로 비율의 형태를 가지고 있어서 모바일에도 거의 동일하게 적용하기에도 편하고 디자이너 관련된 사용자말고 다른 사용자가 많을까 싶은 서비스였는데 상장도 하고 주가도 많이 오르는 의외의 서비스라고 생각이 드네요. 생각보다 SNS 형태의 서비스라고 사용자들이 인식하는 거 같습니다. Target 이미지 전체가 컴포넌트 배경에 .. 2020. 12. 2. 컴포넌트 클로닝(2) - 레딧 쓰레드 첫 번째 컴포넌트 클로닝은 어설프게 html/css로 작업을 했지만 최근에 피그마가 엄청난 업데이트가 되어서 실제 화면 설계를 플렉스 박스를 활용하는 것과 거의 유사하게 작업이 가능하게 되었습니다. 그래서 효율적인 리서치 및 기록을 위해서 피그마를 활용하기로 하였습니다. 컨트롤 + 마우스휠로 줌인/아웃 가능합니다. 레딧이라는 해외 커뮤니티의 스레드 리스트를 타깃으로 클로닝 했습니다. elements icon - 카본 디자인 시스템의 아이콘을 사용했으며, 타깃과는 다르고 형태가 비슷한 걸 가져다 사용했습니다. badge - 뒤에 따라오는 텍스트는 들여 쓰기를 활용해 줄 바꿈 시 자연스럽게 나오게 하였습니다. meta-lnik - 링크된 URL의 메타 데이터를 표시하는 게 있어서 따로 엘리먼트로 작업했습니다.. 2020. 11. 25. 컴포넌트 클로닝(1) - 유튜브 썸네일 디자이너 입장에서 컴포넌트를 Flexbox로 레이아웃만 잡는다는 가정하에 클론 해보고 연구하는 글입니다 레이아웃만 구성하기에 html/css를 사용하지만 반응형 및 시맨틱한 요소는 고려하지 않습니다 마우스 이벤트 혹은 상태에 따른 컴포넌트 변화는 작성하는데 너무 오래 걸리기 때문에 고려하지 않습니다 요즘 플러터를 공부중인데 레이아웃을 잡는 게 기존 웹에서 많이 쓰이는 Flexbox를 기준으로 하고 가벼운 마음으로 플러터로 코드를 작성해보았습니다. 그런데 디자인 파트에서부터 레이아웃을 정확하기 잡지 않으니 코드 작성 시에 막히거나 실제로 이벤트 혹은 상태에 따른 고려도 많이 해야 하기에 예습 및 복습 겸으로 웹에 있는 컴포넌트를 클론 하면서 공부하기 위해 작성합니다. 첫 번째로 많이 사용하는 유튜브 썸네일.. 2020. 11. 18. 이전 1 다음
