사이드 프로젝트#Next.js#Supabase#Tailwind#TypeScript#Brutalist
Designer × Code — 디자이너를 위한 코딩 커뮤니티
디자이너가 코드를 배우고, 함께 성장하는 커뮤니티 플랫폼입니다.
2026. 3. 1.조회 192
왜 만들었나요?
디자이너로서 코드를 배우고 싶지만, 어디서부터 시작해야 할지 막막한 분들이 많습니다. 기존의 개발자 커뮤니티는 디자이너에게 진입 장벽이 높고, 디자인 커뮤니티에서는 코딩 이야기를 나누기 어렵죠.
Designer × Code는 이 간극을 메우기 위해 만들었습니다.
주요 기능
스터디 그룹
- 관심사가 비슷한 멤버들끼리 스터디를 만들고 참여할 수 있어요
- 커리큘럼을 설정하고, 주차별 학습 내용을 관리할 수 있어요
- 그룹 내 게시판에서 자유롭게 질문하고 공유할 수 있어요
쇼케이스
- 사이드 프로젝트, 포트폴리오, 클론 코딩 등 자신의 작업물을 공유할 수 있어요
- 카테고리별 필터링과 댓글로 피드백을 주고받을 수 있어요
블로그
- 디자이너를 위한 코딩 가이드와 튜토리얼을 제공해요
- 시리즈 기능으로 체계적인 학습 콘텐츠를 구성할 수 있어요
기술 스택
| 영역 | 기술 |
|---|---|
| 프레임워크 | Next.js 16 (App Router) |
| 스타일링 | Tailwind CSS v4 |
| 백엔드 | Supabase (PostgreSQL + Auth + Storage) |
| 배포 | Vercel |
| 디자인 시스템 | Brutalist 스타일, Pretendard Variable |
디자인 철학
Brutalist 디자인을 기반으로, 꾸밈없이 직관적인 인터페이스를 추구합니다.
border-radius: 0— 모든 요소에 라운드 없음#E5FD52형광 옐로우 액센트 — 어두운 배경 위에서 강한 시각적 대비- 그리드 배경 패턴 — 디자이너의 작업 환경을 연상시키는 요소
- 타이포그래피 중심 — 큰 볼드 헤드라인과 미니멀한 레이아웃
배운 점
- Next.js App Router의 Server/Client Component 경계 설계
- Supabase RLS(Row Level Security)를 활용한 권한 관리
react-easy-crop을 활용한 이미지 크롭 구현- Atomic Design 패턴으로 컴포넌트 체계화
디자이너가 코드의 세계에 첫 발을 내딛는 그 순간을 함께하고 싶습니다.
댓글
댓글을 작성하려면 로그인이 필요해요.
로그인