All42 API와 사용성 개인 프로젝트를 개선하는 과정에서 가장 신경 쓰였던 부분은 웹 브라우저의 위치 정보 권한 요청이었다. 모바일 앱과 달리 웹 브라우저에서는 위치 정보 권한을 지속적으로 요청하게 되는데, 이는 사용자 경험을 저해하는 요소였다. 당시에는 이를 대체할 만한 해결책을 찾지 못했었다. 그러던 중 Cursor를 사용하면서 우연히 알게 된 API를 통해 위치 정보 권한 요청을 대체할 수 있었고, 이를 통해 서비스의 사용성을 크게 개선할 수 있었다.IP기반 API네이버 지도를 사용하던 중 문득 GPS가 없는 데스크톱 환경에서는 어떻게 위치 정보를 획득하는지 궁금증이 생겼다. 현재 위치 찾기 기능을 테스트해 보니 정확한 위치가 아닌 대략적인 위치만 표시되었는데, 이는 IP 주소를 기반으로 위치를 추정하는 방식이었다. Cu.. 2025. 1. 21. 디자이너의 Cursor 사용기 AI 관련 툴을 사용한 지 2년 가까이 지난 거 같다. 처음에는 미드저니로 시작해서 ChatGPT, Claude 등등 디자인 분야에서도 Figma가 최근 AI 관련 기능을 도입했지만 프로그래밍 분야보다는 대체되는 속도가 느리다고 생각한다. 일단 Figma에서 생성하는 디자인은 실제로는 써먹기 힘들고 생성해도 수작업으로 수정을 많이 거쳐야지 쓸모가 있어진다. 오히려 수정하는데 시간과 노력이 더 많이 들어가는 경우도 있다. 이런 생각을 가지고 기존에 작업했던 프로젝트에서 수정할 일이 생겨서 이번엔 Cursor를 사용해서 작업해 보기로 하였다.가입 및 설치가입하고 요금을 결제하려고 했는데 처음 사용자의 경우 2주 동안 무료이고 정해진 크레딧이 있다. 프리미엄 모델의 경우 500회, 나머지는 무제한이지만 프리미.. 2025. 1. 20. TailwindCSS 얼마나 많이 쓸까? 개인 프로젝트의 경우 무조건 TailwindCSS를 사용해서(심지어 앱 개발을 경험하면서도 NativeWind라는 라이브러리를 사용했다) 디자인 토큰 및 레이아웃 설정, 퍼블리싱을 진행하는데 디자이너 입장에서 원활한 수정은 크나큰 무기가 된다. 더욱이 퍼블리싱도 직접 하다 보니 피그마와 실제 브라우저에서 느껴지는 이질감 개선이나 반응형 디자인 적용도 빠르게 가능하다. 다크 모드는 비교적 순식간에 적용이 가능하다. 그런데 국내 대부분의 서비스에서는 TailwindCSS를 보기가 힘든게 사실이다. 모든 서비스를 체크해보지는 못했지만 최근 구직하면서 JD를 체크하는 회사의 서비스는 대부분 TailwindCSS를 사용하지 않는다. 그래서 일단 Product Hunt의 최근 월간 랭킹을 기준으로 상위 50개 웹 .. 2025. 1. 17. 피그마 플러그인 개발 후기 러닝 커뮤니티에서 글을 보다가 마라톤 페이스 차트를 프린트해서 사용한다는 글을 보았다. 대부분의 러너들은 스포츠 워치의 GPS 기능을 활용해 페이스를 체크하지만 경우에 따라 GPS 정확도에 문제가 생기기 때문에 보조 수단으로 페이스 차트를 활용하는 경우가 있다. 해외 메이저 마라톤 대회에서는 자체적으로 페이스 차트를 제작해서 배포하는 경우도 있다. 가능하면 웹에서 페이스 차트를 설정하고 인쇄까지 바로 하면 좋겠지만 피그마 사용이 가능한 사람이라면 생성된 페이스 차트의 크기 및 스타일 수정도 피그마에서 가능하기 때문에 범용성이 좋은 피그마 플러그인으로 한번 만들어 보기로 결정했다.기획 및 디자인기능이 단순하기 때문에 필요한 인풋 정도만 아래와 같이 정리했다평균 페이스대회 타입(하프, 풀)구간별 페이스(옵션.. 2025. 1. 15. Scroll Frames 라이브러리 사용기 Scroll Frames - 라이브러리 링크 개인 포트폴리오 사이트를 준비하면서 개인적인 강점인 모션그래픽 역량을 강조하기 위한 방법을 찾으려고 했다. 단순히 동영상을 올리기보다는 인터랙티브하게 동작하는 방법을 찾다가 Scroll Frames라는 라이브러리를 발견했다. 라이브러리 문서를 보면서 느낀 특징은 모션그래픽, CSS, JS에 대한 이해도를 동시에 요구했으며, 쉽게 사용이 가능한 라이브러리는 아니라고 생각이 들었다.라이브러리 컨셉일단 요구하는 동영상 포맷은 일반적은 동영상 파일이 아니라 이미지 시퀀스이다. 이미지 시퀀스는 하나의 동영상 파일이 아닌 정지 영상 즉 png 혹은 webp 같은 이미지 파일의 묶음이라고 생각하면 된다. webp의 파일 크기가 작아 효율적이기 때문에 애프터 이펙트에서 pn.. 2025. 1. 11. 번다운 차트와 번업 차트: 프로젝트 관리의 두 얼굴 최근에 전직장 동료분이 제품의 CS 관련 데이터 및 추이를 보여주는 대시보드의 디자인을 요청하셨는데 간단하게 UI 템플릿, 구글 스프레드시트와 스크립트로 실제 사용이 가능하게 작업해서 전달했다. 처음엔 번다운 차트로 데이터를 보여주려다가 CS 발생 시기 및 빈도도 중요한 데이터이기 때문에 리서치를 진행하다가 번다운 차트가 아닌 번업 차트가 더 적합하다고 판단했다. 아래는 번다운, 번업 차트의 특징과 차이점을 정리해 보았다.번다운 차트번다운 차트는 정해진 기간 혹은 작업량을 가진 프로젝트나 스프린트의 남은 작업량을 시간에 따라 보여주는 차트다. 마치 카운트다운처럼, 시간이 지나면서 남은 작업량이 줄어드는 걸 시각적으로 표현한다.명확한 목표 시각화 - 스프린트 시작점에서 모든 작업량이 정해져 있어서, 남은 .. 2025. 1. 10. C4D 피지컬 렌더러 세팅 최근 3D 모션그래픽을 많이 사용하려는 분위기가 있는데 3D 기반 특히 모션그래픽은 CPU 기반이든 GPU 기반이든 컴퓨팅 파워가 많이 필요한 작업이다. 영상을 전문으로 제작하는 프로덕션에서는 렌더팜을 자체 구축하든 아웃소싱을 하는 방향이 있을텐데 소프트웨어 개발 업체에서는 렌더팜이나 아웃소싱을 이용할 만큼 필요성이나 우선도가 높지는 않다. 그래서 인하우스로 작업하기에 효율적인 CPU 기반의 피지컬 렌더러 세팅을 정리하려고 한다. 아무래도 GPU 기반의 렌더러는 하드웨어 구축 비용이 많이 필요하기 때문에 범용성이 적다고 생각한다.피지컬 렌더러 세팅 정리PhysicalSampling Quality - MediumSubsurface Scattering Subdivision - 4Global Illuminat.. 2025. 1. 9. 애용하는 피그마 플러그인 피그마 초기 플러그인이 도입되던 당시, 게시되는 플러그인을 대부분 사용해보고 나만의 생산성 도구로 많이 활용했었다. 이 당시에는 피그마 자체의 기능 지원이 현재보다는 부실했고, 프로젝트에서 플러그인 의존도가 높았었다.의존성 문제플러그인 의존성이 높아지면서 레이어 명세부터 퍼포먼스 이슈까지 다양한 문제가 발생했다. 단순 작업물에서는 문제가 없었지만, 피그마 프로젝트의 생산성 및 편의성 측면에서는 점점 좋아지지 않는다고 판단했다. 대표적인 예로는 Googlesheet Sync가 있다. 이는 구글 스프레드 시트에 텍스트 문구를 작성하고 플러그인을 통해 페칭하는 용도로, 컴포넌트에 사용되는 문구 및 다국어화 처리에 도움이 되었다. 그러나 프로젝트의 사이즈가 커지면서 퍼포먼스 문제를 일으켰고, 버그 및 서버 문제.. 2025. 1. 7. TailwindCSS 스타일 컬러 팔레트 디자인 시스템이 유행하기 전부터 디자인 토큰, 즉 컬러 팔레트와 타이포그래피 정리는 기본 중의 기본이지만, 가끔 다른 디자이너의 디자인 시스템을 보게 되는 경우가 있다. 그때 Surface, Primary 컬러를 각각 3~5개 정도로만 정리하는 경우를 많이 보았다. 보기에는 심플하고 충분해 보이겠지만, 실무에서 최소 퍼블리싱이나 UI를 구현해본 경험이 있다면 현실과 괴리가 있다는 느낌을 받을 것이다. 특히 다크 모드를 고려하는 프로덕트라면 더욱 그렇다. 프로덕트의 구조적 특징에 따라 다르겠지만, 시각적 구분이 명확해야 하는 경우, 예를 들어 대시보드 형태의 화면 구성이 필요하다면 Surface 컬러 3~5개로는 너무 부족한 것이 사실이다.TailwindCSS의 인기최근 TailwindCSS의 인기가 많다.. 2025. 1. 6. 로티랩(Lottielab)사용기 로티랩을 찾게 된 계기는 기존에 Lottie 파일 제작을 애프터 이펙트에 의존했는데, 간단한 벡터 애니메이션을 만드는데 오버스펙 및 번거로움이 컸기 때문이다. 처음에 사용해본 LottieFiles는 간단한 벡터 애니메이션 제작도 어려울 정도로 사용성 부분에서 최악이었다. 하지만 로티랩 계정을 만들고 원하던 애니메이션을 제작하고 JSON 파일로 뽑아내는 데는 5분도 걸리지 않았고, 피그마를 처음 사용할 때의 기분과 비슷했다. 빠르고 효과적이고 심플했다.벡터 애니메이션의 기본기로티랩에서 제공하는 벡터 관련 기능은 기본 도형, 펜, 텍스트(폰트가 다양하지는 않음), Skew, 패스 기반 애니메이션 등 기본기는 갖추고 있다. 애니메이션 모드에서 키를 잡는 것도 너무 심플한 게 단점이긴 한데, 한두 번 사용해보면.. 2025. 1. 5. 플랫 UI 디자인과 브랜딩 전략 초기 iOS의 skeuomorphism 이후에 최근 플랫 UI 디자인은 미니멀한 디자인이 대세가 되면서 시각적 설계의 기본처럼 자리를 잡아왔습니다. 플랫 UI 디자인이 가지는 장점은 용이한 시각적 위계 설계, 효율적인 디자인 리소스 생산 등으로 빠른 개발에 용이한 부분이 있습니다. 그런데 요즘같이 앱이 생활의 모든 분야에서 사용되면서 미니멀한 플랫 UI 디자인이 가지는 문제가 발생하는 거 같습니다. 바로 미니멀한 표현 방식 때문에 브랜드가 가지는 특징 및 방향성을 시각적으로 전달하는데 한계가 생깁니다. 로고 및 UI가 단순하다 보니 앱이나 서비스가 많이 없던 시절에는 괜찮았지만 요즘같이 앱이나 서비스가 범람하는 시점에서는 시각적인 요소가 거기서 거기인 느낌입니다. 쉽게 말해서 서비스가 눈에 띄지 않는 문.. 2024. 1. 30. UI 라이브러리와 디자인 시스템 요즘 UI 디자이너 채용 관련해서 JD를 보면 항상 빠지지 않는 단어가 "디자인 시스템"입니다. 저는 커리어 초기에 개발자분으로부터 디자인 시스템의 개념을 알게 되었고, 생산성을 위해 필수라는 생각을 가지고 프로젝트를 진행하면서 항상 전체 혹은 부분적으로 적용하였습니다. 먼저 디자인 시스템의 목적을 디자인, 개발 영역에 맞춰서 정리하겠습니다. 디자인에 있어서 디자인 시스템은 생산성 및 브랜딩에 있다고 생각합니다. 오늘의 주제가 UI 라이브러리 관련이라 간략하게 설명하자면, 피그마라는 툴의 등장으로 디자인 자체의 생산성이 크게 향상되었습니다. 피그마의 기능들이 디자인 시스템에 딱 맞을 정도로 설계가 되어있고, 비교적 최근에는 local variables의 추가로 동적인 디자인 변경 및 프로토타이핑도 가능해.. 2024. 1. 16. AI 시대 그리고 UI/UX 디자이너의 미래 피그마 업데이트 혹은 로드맵을 꾸준히 챙겨보시는 분은 아시겠지만 피그마가 생성형 AI 기능 추가를 예고해 놓은 상황입니다. 피그마는 대부분의 UI/UX 디자이너 혹은 디자이너와 협업하는 직군에서 생산성에 주안점을 두시는 분들도 많이 사용하는 툴입니다. 그렇기 때문에 AI 기능 추가로 인한 파급력이 있을 거라 예상됩니다. 그럼 각 UX 하위 파트에 미치는 영향 및 UI/UX 디자이너는 어떻게 대처해야 하는가에 대한 주제로 작성해 보겠습니다. 1. Interaction 생산자 입장에서는 인터랙션 부분인 유저 인터페이스가 가장 크게 영향받는 부분이라고 생각합니다. 피그마의 생성형 AI 기능의 성능이 어느 정도인지는 모르겠지만 프롬프트를 잘 다루고 기획적인 역량이 받쳐주는 사람이 사용한다면 극단적인 경우 UI .. 2024. 1. 7. 유저 경험의 종류 UX 디자이너가 아니라면 UX에 대한 오해를 가지는 경우가 많은데 위의 동영상을 통해 어느 정도 해소가 가능할 거 같아서 저의 견해를 정리할 겸 글을 작성합니다. 일단 영상의 제목은 Types of User Pain Points인데, 글의 제목은 유저 경험의 종류라서 매칭이 되지않을수 있습니다. 하지만 페인 포인트를 특정 영역에서 해소한다는 점에서 반대로 생각하면 유저 경험의 종류로도 생각할 수도 있을 거 같습니다. 영상에서는 크게 3가지로 분류를 하는데 아래와 같습니다. Interaction Level - 상호작용 Journey Level - 여정 Relationship Level - 관계 상호작용은 말그대로 서비스와 사용자가 상호작용하는 단계이며, 전체 경험의 단계에서 초입에 해당합니다. 보통은 애플.. 2022. 10. 1. UI/UX 디자이너가 알아두면 도움되는 네 글자 눈치 빠른 분이라면 네 글자에서 알아채셨을 텐데요. 바로 CRUD입니다. 데이터 베이스를 다루는 직군에서 자주 사용하는 걸로 아는데요. UI/UX 디자이너가 알아두면 왜 도움이 되는지 설명해보겠습니다. CRUD는 각 단어의 앞글자를 따서 만든 약자이며, 4개의 단어는 아래와 같습니다. Create - 생성 Read - 읽기 Update - 갱신, 수정 Delete - 삭제 감이 좋으신 분이라면 4개의 순서가 데이터가 생성되고 삭제되는 일련의 과정인 것을 아셨을 텐데요. 결국 하나의 데이터가 생성되고, 조회 및 수정이 가능하고, 삭제되는 과정이 결국 인터페이스 상에 구현이 되어야 합니다. 그래서 디자이너는 특정 요소가 생성이 된다면 나머지 과정도 빠짐없이 정보 구조 및 화면 설계에 포함을 시켜야 합니다. .. 2022. 9. 13. UI/UX 디자인 프로세스 이 글에서는 지금까지 주로 스타트업에서 일하면서 얻은 좋았던 혹은 나빴던 경험을 토대로 UI/UX 디자인 프로세스를 정리해보겠습니다. 참고로 스타트업 특성상 디자인 사수 혹은 팀원 없이 진행한 것을 전제로 합니다. 앞서 개요를 정리하자면 "개념화 - 구체화 - 시각화 - 실체화" 이 순서로 진행하겠습니다. 1. 개념화 쉽게 생각하면 프로덕트의 컨셉입니다. 타겟 유저는 누구이며, 제품의 핵심적인 키 펑션, 제품의 방향성을 설정하는 단계입니다. 대부분은 스타트업의 대표 혹은 결정권자가 간단하게 정리를 한 상태에서 디자이너 채용을 진행하기 때문에 제가 적극적으로 개입한 경험은 적습니다. 보통은 채용 면접에서 프로덕트의 비전과 미래를 설명하면서 간단하게 개념을 설명하는 경우가 많은데요. 이런 개념화 과정을 거쳐.. 2022. 8. 30. 피그마에서 다국어화 처리 요즘 채용 공고를 보면 가끔 우대사항에 다국어화 처리에 대한 요구가 보이는데요. 이번에는 피그마에서 더미 데이터 관리에 많이 쓰이는 플러그인 Google Sheets Sync를 활용해서 다국어화 처리를 간단하게 하는 방법을 정리하겠습니다. 플러그인에 대한 기본적인 정보는 아래의 링크를 확인해주세요. 플러그인 소개 페이지 Google Sheets Sync | Figma Community Figma Community plugin - Sync content from Google Sheets directly into your Figma file. This is not an official plugin created by Google • It is simply created with ❤️ by David Will.. 2022. 8. 25. Figma - 인터랙티브 컴포넌트 최근에 피그마에 인터랙티브 컴포넌트란 기능이 추가되었는데요. 꽤 오래전에 베타 테스트를 진행해서 사용해봤지만, 베타인 이유도 있고, 프로젝트 중간에 적용하는 건 리스크가 많아서 적극적으로 사용해보지는 않았습니다. 빨리 정식 버전에 추가되기를 기다리다가 이번에 정식으로 지원하게 되어서 포스트를 남겨봅니다. 디자인 시스템에 친숙한 디자이너에게는 혁신적인 기능이라고 생각합니다. 기존에는 인터랙티브한 장면을 만들기 위해서는 그에 대응되는 경우의 수 혹은 화면(프레임)을 모두 만들어야 돼서 리소스 소모도 심하고 관리 측면에서도 힘든 부분이 많았습니다. 하지만 인터랙티브 컴포넌트를 통해서는 하나의 화면만 있어도 인터랙티브 한 컴포넌트 구현이 가능합니다. 개발에 친숙한 디자이너 시라면 DOM과 Virtual DOM의.. 2021. 11. 2. "UX디자이너" 디자이너로서 요즘 채용공고를 쭉 보다 보면 "UX 디자이너"라는 포지션을 많이 보게 된다. 예전에는 보통 UI/UX 디자이너, UI 디자이너였지만 근래에는 UX/UI 디자이너, UX 디자이너로 적는 게 유행이 아닐까 할 정도로 많이 보게 된다. 단순하게는 단어의 배열을 바꿔서 'UI보다는 UX가 중요하지~'라는 느낌을 받게 된다. 이런 현상은 예전부터 UX라는 단어가 유행하기 시작하면서 UI가 먼저냐 UX가 먼저냐라는 토론이 간혹 보이곤 했는데 '엄마가 좋아, 아빠가 좋아'급의 질문처럼 개인적으로는 느껴진다. 그렇다면 UX라는 게 뭘까 대부분 알겠지만 UX는 사용자 경험의 약자이고, 디자인에서의 의미를 풀어보자면 사용자 중심 디자인이다. 이걸 굳이 또 풀어서 해설하자면 서비스 혹은 제품을 사용자의 입장에.. 2021. 6. 30. 간단한 캐러셀 만들기 import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', home: Scaffold( body: Home(), ), ); } } class Home extends StatefulWidget { @override _HomeState createState() => _HomeState(); } class _HomeState extends State { List images = [ 'https://images.un.. 2021. 4. 12. 컴포넌트 클로닝(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. 와이어프레임은 쓸모없다 uxdesign.cc/wireframes-are-useless-14ac7d22c961 Wireframes are useless Why we stopped using them and how it improved the way we design uxdesign.cc 위의 링크는 이글의 주제가 있는 원문이고, 이 글은 번역보다는 아티클에서 제시하는 주제에 대해서 개인적인 의견을 정리할 겸 글을 작성합니다. 일단 와이어프레임의 의미부터 정리하자면 서비스의 구조와 기능을 시각적으로 나타내는 것인데요. 대개는 두가지로 나뉩니다. low-fidelity(저밀도) : 시각적인 요소의 밀도가 낮은걸 의미하며, 간단한 스케치로 만드는걸 의미합니다. high-fidelity(고밀도) : 시각적 요소의 밀도가 높은걸 의미하며.. 2020. 12. 20. 컴포넌트 클로닝(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. 디자이너가 API와 친해져보기 API가 뭐야? 개발자분들과 협업을 하다 보면 API라는 단어를 많이 들으실 텐데요. 느낌적으로는 이해하셨을 텐데 정확한 의미에 대해서는 모르실 수도 있다고 생각합니다. 일단 API의 약자는 Application Programming Interface입니다. 어플리케이션은 알겠고, 프로그래밍 인터페이스라니.. 그냥 개발자가 사용하는 인터페이스 아닌가요?라고 생각할 수도 있습니다. 그리고 GUI같이 예쁘게 인터페이스가 있는 것도 아니고 뭔가 확 와 닿지 않게 되죠. GUI의 인터페이스든 API의 인터페이스든 쉽게 생각해서 인터페이스는 "도구"라고 생각하면 좋을 거 같습니다. 주로 사용하는 주체가 유저인지 프로그래머인지 정도의 차이겠죠. 특히 초기에 기획까지 담당하는 디자이너라면 애플리케이션에서 제공하는 ".. 2020. 11. 23. 컴포넌트 클로닝(1) - 유튜브 썸네일 디자이너 입장에서 컴포넌트를 Flexbox로 레이아웃만 잡는다는 가정하에 클론 해보고 연구하는 글입니다 레이아웃만 구성하기에 html/css를 사용하지만 반응형 및 시맨틱한 요소는 고려하지 않습니다 마우스 이벤트 혹은 상태에 따른 컴포넌트 변화는 작성하는데 너무 오래 걸리기 때문에 고려하지 않습니다 요즘 플러터를 공부중인데 레이아웃을 잡는 게 기존 웹에서 많이 쓰이는 Flexbox를 기준으로 하고 가벼운 마음으로 플러터로 코드를 작성해보았습니다. 그런데 디자인 파트에서부터 레이아웃을 정확하기 잡지 않으니 코드 작성 시에 막히거나 실제로 이벤트 혹은 상태에 따른 고려도 많이 해야 하기에 예습 및 복습 겸으로 웹에 있는 컴포넌트를 클론 하면서 공부하기 위해 작성합니다. 첫 번째로 많이 사용하는 유튜브 썸네일.. 2020. 11. 18. 이전 1 2 다음
