손범수
안녕하세요! 디자인 엔지니어 손범수입니다.
토론토에서 만난 UIUX 디자이너분께서 사이드 프로젝트나 외주 작업 같이 해볼 디자이너, 개발자를 찾는다고 하셔서 글 올려봐요!
샌프란, 토론토에서 일하셨고 지금은 토론토에서 디자인 스튜디오와 커뮤니티 운영하고 계신 분입니다. 경력은 3년정도 됩니다.
이번 기회에 해외 디자이너와 프로젝트 & 네트워킹하고 싶은 분들은 아래 폼 작성해주시면 제가 연결해드릴게요!
영어 소통 가능하신 분들만 참여 부탁드려요 :)
손범수
주목할만한 2024년 스타트업 랜딩페이지 트렌드 4가지
2023년도 어느덧 얼마 남지 않았네요. 이번에는 제가 직접 디자인한 예제 사이트와 함께 2024년 웹디자인 트렌드를 소개하려고 합니다.
사용자 탐색을 간편화하고 웹사이트의 반응성을 향상시키기 위해 더 명확한 구조가 필요합니다. 큰 이미지와 제품 사진 주변에 강조된 테두리를 추가하는 것은 웹 디자인에서 사용자 경험을 개선하기 위해 사용되고 있는 뛰어난 방법 중 하나입니다. 이러한 간결한 디자인은 회사의 중요한 제품 또는 세부 정보를 강조할 수 있을 것입니다.
강조된 테두리는 외관을 최소화하려는 커머스, 포트폴리오, 비즈니스 페이지에 효과적으로 적용할 수 있습니다.
- 편집 디자인에 사용되는 그리드 시스템
- 흑백 배경
- 강조된 테두리
Image Source: dribbble.com/Ferenc Horvat
미니멀한 스타일로 첫눈에 필요한 정보를 강조하는 웹사이트를 만들 때, 큰 타이포그래피는 강력한 무기가 됩니다. 각 섹션에 큰 텍스트 또는 강조된 제목을 추가하는 것을 고려해 보세요. 간결하고 굵은 제목을 선택하여 서비스, 제품을 강조할 수 있습니다. sans serif 스타일의 간결한 텍스트는 읽고 싶은 랜딩페이지의 필수조건이죠. 또한 이런 디자인 방식은 레이아웃을 최소화하고 큰 시각적 요소를 줄임으로써 웹사이트에서의 사용자 반응을 높이는 데 도움을 줄 수 있습니다. 이러한 웹 디자인 트렌드는 서비스 기반 기업, 에이전시, 그리고 SaaS 웹사이트에 효과적으로 적용될 수 있습니다.
- 큰 타이포그래피
- 적은 시각 장치
- 흑백 배경
Image Source: dribbble.com/Ferenc Horvat
인스타그램이 시작한 그래디언트 디자인 트렌드는 이제 시작인 것 같습니다. 세련되고 유연한 인상을 주는 그래디언트는 최근 SaaS와 커머스 업계에 큰 영향을 주고 있습니다.
- 흑백 디자인에 그라디언트로 강조
- 단색이 아닌 그라이언트를 활용한 버튼
- 글래스모피즘과의 조합
Image Source: dribbble.com/Tomasz Mazurczak
네오브루탈리즘(Neubrutalism). 미완성적이며 면과 선, 산세리프 글꼴 위주의 단순함을 이용한 디자인 양식입니다. [[Figma|피그마]], Gumroad 등을 통해 대중화되면서 2022년부터 관심받기 시작했어요. 이젠 웹디자인에도 새로운 바람을 불러오고 있습니다.
- 검은색 또는 흰색 배경
- 그라데이션이나 음영을 사용하지 않음
- 대비가 강한 컬러 팔레트
출처:
손범수
안녕하세요, 벌써 가을이 다 되었네요! 가을이면 부드러운 멜로디와 가사로 가득 찬 노래가 생각나지 않나요? 이번에 다 같이 공유할 수 있는 가을 플레이리스트가 있으면 어떨까 하는 마음에 만들어 봤습니다 :D 신청곡 많이 많이 올려주세요!!
가을 플레이리스트
다 같이 만드는 가을 플레이리스트
손범수
[아이디어, 디자인] 방대한 정보를 정리하고 시각화 할 수 있다면?
인편서비스가 사후개발이 중단된 이후 생각중인 아이디어 입니다!
옵시디언이나 애니타입의 그래프 뷰를 개선하여 새로운 정보탐색 인터페이스를 만들면 어떨까요? 간단하게 디자인을 해보았습니다.
손범수
인편서비스 대신
손범수
손범수
인편을 작성하기 위해선 훈련병에 대한 개인정보를 6개 이상 입력해야 했어요.
신분(예비군인/훈련병)
군종(육군, 해군, 공군)
이름
생년월일
입영부대
입대 일자
저희는 이름이나 생년월일, 군종을 제외하고는 당사자가 알려주지 않는 이상 입력하기 어려운 정보라고 생각했습니다. 그런데 입력해야 할 정보를 입대할 당사자가 미리 적어놓는다면 어떨까요? 번거로운 입력 과정은 당사자가 한 번만 수행하는 거예요. 이후에 다른 사람이 인편을 쓰고 싶을 때에는 인편의 핵심인 제목과 내용, 누가 보냈는지만 입력하는 거죠.
다행히도 관련 기능을 제공하는 비공식 API를 찾아서 보다 쉽게 개발할 수 있게 되었습니다.
MVP에선 고객도 팀원 한 명이고, 플로우 개선을 체험하기 위함이었기에 대부분의 기능을 배제했습니다. 핵심 기능인 인편 작성과 작성된 인편 리스트를 보는 페이지만 만들었어요.
디자인 시스템 덕분에 제품 개발까지 1주일도 채 걸리지 않았던 것 같아요. 이제 직접 사용해 보며 개선해야 할 점을 파악하는 일이 남았습니다.
손범수
ROOKIES DESIGN SYSTEM
리액트와 프레이머에서 사용 가능한 오픈소스 디자인 시스템
손범수
안녕하세요 루키즈 디자이너 손범수입니다! 오랜만에 루키즈 제품 이야기를 하는 것 같아요. 지난 2주는 새로운 디자이너 모집도 있었고, 팀원들 모두 본업이 바빴었거든요.
그래도 이번에 배포한 RDS!로 개발하게 될 첫 번째 제품을 정했습니다. 많은 아이디어와 해결해야 할 문제가 있었지만, 지금 당장 저희 팀원들이 사용할 수 있는 제품을 만들어보고 싶었어요.
고민 끝에 첫 제품으론 저희 팀원이 '곧' 겪게 될 문제를 해결하기로 했습니다. 백엔드 팀원 중 한 명이 병역 특례를 받고 있는데, 조만간 훈련소에 입소해야 했거든요. 군대를 다녀오신 분들이라면 다들 인터넷 편지(인편)를 알고 계실 거예요.
인편은 인터넷 편지의 줄임말로, 보통 훈련소에 있는 가족과 친구에게 웹사이트나 앱으로 편지를 보내는 걸 의미합니다.
저희는 인편 쓰는 경험이 매끄럽지 않다고 생각했어요. 인편을 써보신 분은 아시겠지만 훈련병의 생년월일과 군종, 어디 훈련소인지 등 굉장히 많은 정보를 알아야지만 편지를 쓸 수 있거든요.
그래서 보통 입대하기 전에 '인편지기'를 구합니다. 군대에 있는 훈련병 대신 인스타그램이나 페이스북에 인편 쓰는 법을 게시해 줄 사람이죠.
이 과정을 쭉 경험하면서 저희는 왜 인편을 쓰는 과정이 이렇게나 복잡해야 할까라는 의문을 제기했습니다. 다음 글에서 저희가 어떻게 이 문제에 도전하는지 공유할게요!
손범수
AI의 도움을 받아 만들어보았어요!
여행자와 현지인을 연결하여 개인 관광, 활동, 어학 강좌 등을 제공하는 여행 사이트.
엔지니어가 제품의 설계를 시각화할 수 있는 도구.
지역 시장의 기존 및 신규 사업자가 지역 최고의 인재를 발굴하고 채용할 수 있도록 도와주는 플랫폼.
먹는 것을 좋아하는 사람들을 위한 소셜 네트워크. 사용자들은 메뉴를 찾아보고, 예산에 맞는 식당을 찾고, 다른 음식 애호가들과 소통할 수 있습니다.
노인들의 자립을 돕는 기술을 판매하는 제품.
손범수
지난주에 올렸던 디자이너 모집 공고에 정말 많은 분께서 지원해 주셨어요! 지원 주신 분들 전부 레전드셨지만, 고민 끝에 2분과 함께하기로 했습니다 :D 앞으로 3명의 디자이너와 11명의 개발자들이 만들 제품 기대해 주세요!!
손범수
루키즈는 11명의 개발자와 1명의 디자이너가 만들고 있습니다. 다들 본업이 있는 상태라 속도는 느리지만, 성장이라는 목표를 향해 꾸준히 달려오고 있었어요.
처음에는 42서울이라는 코딩 부트캠프 학생들을 위한 커뮤니티인 42월드에서 시작해 디자이너인 제가 합류한 이후 좀 더 많은 사람들이 사용할 수 있는 제품을 만들고자 피봇팅을 결정했습니다.
성장도 좋지만, 진짜로 사람들의 문제를 해결해 줄 수 있는 제품을 만들고 싶었거든요.
사이드 프로젝트지만, 앞으로 다양한 제품을 실험하기 위해서 디자인 시스템은 필수라고 판단했습니다.
다양한 제품을 빠르게 찍어내고 싶었는데, 시스템 없이는 빠른 속도와 제품의 완성도를 보장하기 어려울 것 같았거든요. 그래서 과감하게 디자인 시스템 프로젝트를 시작했습니다.
작년 9월쯤 위클리 내용 중 일부
아직까지 고민하고 있는 문제지만, 저희는 피그마가 아닌 프레이머를 사용합니다. 여러 가지 이유 중에서도 프레이머만의 강력한 장점 3가지 때문이었어요.
특히 저 포함 모든 팀원이 개발을 할 줄 알다 보니, 프레이머의 코드 컴포넌트는 정말 강력했습니다. 디자인과 코드가 완벽하게 동기화되는 카타르시스... 달달합니다👍🏻
작년 9월부터, 거의 1년 동안 디자인 시스템을 만들었는데요. 사실 디자인 시스템은 그 자체가 목적이 아닙니다. 빠르게 제품을 만들고 실험하기 위한 수단이죠.
그래서 이전에 만들었던 42서울 커뮤니티를 이어서 새로운 주니어 개발자 커뮤니티를 만들어갈 예정입니다. 그리고 디자인 시스템 테스트도 할 겸, 이번 달 말에 훈련소에 들어가는 팀원을 위한 재밌는 인편 서비스를 기획 중입니다.
작고 귀여운 제품이지만, 최소한 사용자가 12명은 확보되는 셈이니까요.
아무래도 디자이너가 저 혼자다 보니 아직 부족한 부분이 많아요. 그래서 함께할 디자이너 한 분을 구하려고 합니다! 이래봐도 저희 팀 기술력이 꽤 좋답니다. 유니콘 회사에서 근무하고 계신 분도 있고, 유명한 오픈소스 프로젝트에 기여하신 분도 계세요.
다만, 엄청 빠르게 돌아가진 않다는 점.. 평일에는 본업에 집중하는 대신 보통 주말에 좀 달립니다. 원하는 거 마음껏 제안하고 만들어 볼 수 있는 환경이에요.(디자인 시스템도 제가 합류 직후 제안해서 거의 1년 동안 했습니다 ㅋㅋ)
그래서
이 중 하나라도 해당되신다면 편하게 연락 주세요!! 그냥 커피챗도 환영입니다 :D 같이 디자인이나 제품 이야기 나눠봐요
+ 프레이머와 RDS!로 만든 사이트
RDS! Public
프레이머와 RDS!로 만든 정적 사이트입니다!
https://rds.framer.website/
+ 아래 프레이머 링크에서 직접 RDS!를 확인해볼 수 있답니다.
Framer Login
https://framer.com/projects/RDS-Public--qJWySNaf18UdLsJshbxc-8ORfE
+ 깃허브 링크
GitHub - 42-world/rookies-Design-System
Contribute to 42-world/rookies-Design-System development by creating an account on GitHub.
https://github.com/42-world/rookies-Design-System
+ 스토리북 링크
@storybook/cli - Storybook
https://pages.rookies.kr/design/latest/storybook/?path=/docs/rookies-introduction--docs
ROOKIES DESIGN SYSTEM
리액트와 프레이머에서 사용 가능한 오픈소스 디자인 시스템
손범수
안녕하세요 3D SaaS를 만들고 있는 디자이너 손범수입니다. 잘 부탁드려요!
손범수
입대하기 전부터 의미 있는 군 생활을 보낼 수 있는 제품을 꼭 만들고 싶었다. 내가 필요성을 느꼈기도 했고, 나 나름대로 성장할 수 있는 좋은 프로젝트가 될 거라 생각했기 때문이다. 그리고 거의 입대 1년이 되어가는 8월 6일, 드디어 첫 제품을 앱스토어에 올렸다.
실질적인 개발 기간은 2달이 채 안 되었지만, 여기까지 오는 여정이 순탄치만은 않았다. 20명이 넘는 사람들과 만나 이야기하며 문제를 찾는 과정, 여러 가설을 세우고 개발을 배우는 시간까지. 생각해 보면 지난 1년 동안 이 문제에 몰입했었던 노력의 결실인 것 같기도 하다. 아직 문제를 풀었다고 확신할 수는 없지만. 제품 기획과 인터뷰를 도와주었던 선임과, 문제에 공감해 기꺼이 인터뷰에 응해준 분들께 감사를 표한다.
손범수
지난 3월부터 시작한 Daily UI 챌린지가 오늘부로 끝났다. Daily UI (Daily UI 챌린지)는 주말을 제외한 100일 동안 매일 이메일로 보내주는 주제를 디자인해 SNS에 올리는 챌린지다. 군대에서 자기계발을 위한 나만의 루틴을 만들고 싶기도 했고, 근본적으로는 내 디자인 경험의 폭을 넓히고 싶단 생각에서 시작했다.
일과, 근무와 병행하다 보니 규칙적으로 하루에 디자인 하나를 만들기 힘들었다. 보통 격일로 하는 근무가 끝나면 오후 9시 정도 되었기 때문이다. 그래서 디자인을 올리지 못하는 날이 생기거나, 시간이 많은 날에는 미리 하루에 2개가 넘는 디자인을 하기도 했다. 챌린지 룰을 완벽히 지킨 건 아니지만 끝까지 완주했다는 사실에 의의를 두고 싶다.
환경의 문제와 의지의 문제가 섞여 보여주기 부끄러운 구린 디자인도 많이 있었다. 그래도 꾸준히 올리는 것이 더 좋다고 생각해 만족스럽지 않아도 그냥 SNS에 올렸다. 그랬더니 댓글로 피드백을 달아주는 분들도 생기고, 인스타그램 메시지로 마음에 들어 내 디자인을 코딩 연습에 사용하고 싶다는 요청을 받기도 했다. 이런 순간엔 챌린지를 끝까지 완주해야겠다는 동기부여와 함께 뿌듯함을 느꼈다.
챌린지에 평균적으로 하루에 한 시간 이상은 투자한 것 같다. 개인정비 시간을 쪼개 디자인하는 게 쉽지는 않았지만 꾸준히 하다 보니 삶의 일부가 된 듯 익숙해져 오히려 좋았다. 습관의 무서움과 중요성을 덤으로 깨달았던 순간이었다. 돌이켜보면 내가 투자한 시간 대비 많은 걸 얻었단 생각이 든다. 폭넓은 디자인 경험과 함께 디자인 기본기를 돌아보고 다질 수 있었던 시간을 얻었고, 무엇보다 군 생활 156일을 이걸로 녹였다는 생각이 들어 기분이 매우 좋았다. 조만간 입대 1년이 깨지는데 앞으로 남은 군 생활 동안 어떻게 성장해야 할지 고민을 좀 해봐야겠다.
인스타그램: https://www.instagram.com/ui_stuff/
Dribbble: https://dribbble.com/Beomsoo
