웹 개발, 블록으로 쉽고 즐겁게!
HTML과 CSS를 배우는 블록코딩 플랫폼
나만의 창작물을 완성하고, 새로운 웹 개발의 가능성을 경험해보세요.
👇 배포 사이트
https://boolock.site/
📝 팀노션 / ✏️ 깃허브 위키 / 📖 BooLock 위키 / 🎯 백로그
HTML과 CSS를 배울 수 있는 블록코딩 플랫폼
<h1>hello world!</h1>웹 개발 초보자들에게 코드를 작성하는 것은 어렵고 부담스럽게 느껴질 수 있습니다.
하지만 BooLock에서는 블록을 조립하며 쉽고 재미있게 자신만의 웹사이트를 만들 수 있습니다.
BooLock은 HTML과 CSS를 블록코딩 방식으로 학습할 수 있는 플랫폼입니다.
코드를 몰라도 블록을 조립하는 간단한 방식으로 원하는 웹사이트를 제작하고, 이를 통해 웹 개발의 기초를 재미있게 배울 수 있습니다.
블록들이 모여 만들어진 나만의 웹페이지를 주변 사람들과 공유해보세요. ❤️
- 오른쪽 HTML 태그 탭에서 블록을 가져와 가운데의 작업 공간에서 조립할 수 있어요.
- 원하는 CSS 클래스 블록을 생성할 수 있어요.
- 생성된 블록은 HTML 블록에 조립할 수 있어요.
- 왼쪽 하단에 있는 CSS 속성 설정 패널에서 생성한 CSS 클래스 블록을 선택해 원하는 스타일 속성을 추가할 수 있어요.
- 왼쪽 상단 프리뷰창 미리보기 탭에서는 블록 코딩으로 만든 화면을 확인할 수 있고, HTML/CSS 탭에서는 코드 확인 및 복사 가능해요.
- 오른쪽 상단
코드 내보내기버튼을 통해 HTML코드와 CSS코드를 HTML파일로 다운받을 수 있어요.
- 홈페이지에서는 작업중이 워크스페이스 목록들과, 웹사이트 화면을 미리 볼 수 있어요.
⚒️ 기술 스택 [선정 이유 살펴보기]
| 분류 | 기술 스택 |
|---|---|
| 공통 |   |
| 프론트엔드 |      |
| 백엔드 |    |
| 배포 |     |
| 협업 |   |
⌛ 기술적 경험 [학습기록 자세히 보기]
저희는 블록 코딩 사이트 BooLock을 만들기 위해 Google의 Blockly 라이브러리를 사용했습니다. Blockly는 코드를 직접 작성하지 않고도 블록을 조립하는 방식으로 프로그래밍할 수 있게 해주는 라이브러리입니다.
저희 기획에 맞게 구현하기 위해서는 라이브러리의 내부 로직을 이해하고 핵심 코드를 수정해야 했습니다. 오른쪽에서 원하는 블록을 선택할 수 있는 메뉴(Toolbox), 실제 블록들, 그리고 이 블록들을 자유롭게 조립할 수 있는 작업 공간(Canvas) 같은 요소들의 동작 방식을 파악한 후, Blockly의 주요 클래스들을 상속받아 저희만의 커스텀 UI를 만든 것이 의미 있는 기술적 경험이었습니다.
-
블록 커스텀
BEFORE
AFTER
Blockly에서는 이런 작은 블록 하나를 생성하고 동작시키기 위해 다양한 클래스들이 사용됩니다. 특히 블록 모양 자체는 SVGElement로 구성되어 있기 때문에 블록 모양 구성을 구성하는 블록리의 core 클래스들을 상속받아 오버라이딩하는 것이 핵심이었습니다. 클래스들을 오버라이딩 하여 기획한 디자인대로 블록을 커스텀하며 겪었던 트러블 슈팅과 개발과정은 아래 문서들에서 더 자세하게 확인 가능합니다.
👇 더 자세한 기록 및 과정 확인하기 👇
> Blockly 클래스들을 이용한 Block 커스텀하기! -
HTML 블록을 선택하고 CSS 클래스를 추가를 위한 탭 만들기
BEFORE
라이브러리에서 제공하는 디자인
AFTER
목표 디자인 시안
HTML 블록 선택과 CSS 클래스 추가를 위한 탭 메뉴를 구현하고자 했으나, Blockly 라이브러리가 탭 인터페이스를 지원하지 않고 기본 UI가 기획과 달라 수정 과정에서 여러 어려움이 있었습니다. 이를 해결하기 위해 Blockly의 오픈소스를 분석한 후 블록 메뉴 관련 클래스(Flyout, Toolbox)를 상속받아 주요 함수를 overriding하여 서비스에 적합한 새로운 탭 메뉴를 만들었습니다.
👇 더 자세한 기록 및 과정 확인하기 👇
> 커스텀 toolbox 만들기
> Flyout toolbox에 커스텀 여부 파악하기
> Flyout toolbox에 동적 블록 생성하기 (DOM)
> Flyout toolbox에 동적 블록 생성하기 (svg) -
스타일 동적 추가하기
Blockly의 Flyout 내부에 DOM 요소(input, button)를 동적으로 생성하여 사용자 인터페이스를 구성했습니다. 입력값은 중복 확인과 유효성 검사를 거쳐 CSS_ 접두사를 붙여 블록으로 등록되며, 즉시 Flyout에 반영됩니다. 생성된 블록은 우클릭 시 "블록 삭제" 옵션으로 관련된 모든 인스턴스를 삭제할 수 있습니다. Reset CSS 체크박스와 툴팁을 추가해 기본 스타일 초기화와 사용자 경험을 개선했습니다.
👇 더 자세한 기록 및 과정 확인하기 👇
> Blockly 커스텀
HTML과 CSS 코드를 하이라이팅하는 기능을 직접 구현했습니다. 정규 표현식으로 태그, 속성, 값을 파싱해 각각 span 태그로 감싸고 클래스를 적용해 스타일을 지정했습니다. 변경된 코드는 동적 애니메이션으로 강조했습니다. Blockly와 연동하기 위해 data-block-id 속성을 추가해 블록과 코드를 연결하고, 블록 길이는 재귀 함수로 계산했습니다. 최종 화면에서는 span 태그와 데이터 속성을 제거한 코드만 표시하며, UI 애니메이션과 hover 효과를 추가해 직관적인 사용성을 제공합니다.
|
|
👇 더 자세한 기록 및 과정 확인하기 👇
> Code 하이라이팅… (파싱 지옥…)
프로젝트 시작 전에 기능 단위로 코드를 구조화하는 FSD 방식을 도입해 가독성과 재사용성을 높이기로 했습니다. FSD는 폴더를 세분화해 대규모 프로젝트 관리에 유리하다는 장점이 있었고, 이번 프로젝트가 학습 목적이라 팀원 모두 새로운 구조를 시도해보고자 했습니다. 그러나 FSD를 처음 사용하다 보니 feature 레이어의 정의가 모호해 팀원 간 기준이 달라졌고, 결국 이를 제외한 구조만 적용하기로 결정했습니다.
React의 SPA 구조로 인해 검색 엔진이 페이지 정보를 인식하지 못하는 문제를 해결하려고 react-helmet-async를 도입해 페이지별 제목과 설명을 설정했습니다. Open Graph 태그를 추가해 공유 링크에 제목, 설명, 이미지를 지정했고, 이미지 alt 속성, robots.txt, 메타 태그를 관리했습니다. 결과적으로 Lighthouse SEO 점수를 75점에서 100점으로 올렸습니다.
👇 더 자세한 기록 및 과정 확인하기 👇
> 검색하면 나오게 해줘~ (SEO)
-
무한스크롤
사용자가 이전에 생성했던 워크스페이스들을 추가적으로 조회하기 위해 별도의 버튼 클릭 없이, 스크롤만으로 데이터를 자동으로 불러올 수 있도록 무한스크롤을 적용하였습니다. 이때 데이터 페칭은 단순히
fetch나axios호출을 통해 이루어진 것이 아닌 tanstack-query의useInfiniteQuery를 통해 효율적인 데이터 페칭과 상태관리를 둘 다 챙길 수 있었습니다.
👇 더 자세한 기록 및 과정 확인하기 👇
> tanstack-query를 알아보자 -
CSS 툴팁 컴포넌트 위치 조정
CSS 속성 툴팁은 웹 개발 입문자들이 각 CSS 속성을 쉽게 이해하도록 돕는 것을 목표로 기획되었습니다. 물음표 아이콘에 마우스를 올리면 툴팁 컴포넌트가 렌더링되도록 설계했지만, 툴팁 위치는 단순히 아이콘 "아래"에 고정될 수 없었습니다. 아이콘의 위치에 따라 툴팁이 동적으로 배치되어야 했고, 화면을 벗어날 경우에는 툴팁이 아이콘 "위쪽"으로 렌더링되도록 수정하여 UX 문제를 해결했습니다
👇 더 자세한 기록 및 과정 확인하기 👇
> Tooltip 컴포넌트 제작기 -
사용법 단계별로 안내 [튜토리얼]
서비스를 처음 접하는 분들은 순서를 파악하기 어려울 것이라 에상되어 코치마크를 활용하였습니다. 그래서 모든 워크스페이스 접속시 코치마크로 단계별 구역 하이라이팅 하였습니다. 단, 사용법이 익숙한 사용자를 위해 그만두기 클릭시 다시 뜨지 않게 하고자 localStorage로 제어하였습니다.
👇 더 자세한 기록 및 과정 확인하기 👇
> 사용자 가이드
저희는 UI 중심의 서비스를 설계하였기 때문에 이를 극대화할 수 있는 Storybook을 사용하여 테스트를 진행하였고, GitHub Pages를 활용해 정적 웹사이트로 배포하였습니다. 스토리북 구조는 FSD구조를 Storybook에도 그대로 적용하였습니다.
👇 더 자세한 기록 및 과정 확인하기 👇
> Storybook 입문 슈웃~
> organization 레포에서의 Storybook 배포 참 쉽죠?
|
|
저희 팀은 백엔드가 없는 상황에서도 이를 긍정적으로 받아들이며 오히려 인프라 구축하고 데브옵스 경험을 해볼 수 있어서 럭키비키잖아~? 라는 마음가짐으로 프로젝트를 진행했습니다. 배포 환경 구축을 통해 VPC, 서브넷, 인스턴스 등 인프라 핵심 개념과 Docker, GitHub Actions를 활용한 배포 자동화를 학습했습니다. pnpm 기반 모노레포 환경에서 공통 의존성을 활용하려다 시행착오를 겪었으며, 클라우드 MongoDB와 SSL VPN 사용 중 요금 문제를 경험한 후 SSH 터널링으로 비용 절감을 이루며 효율적인 운영 방안을 모색했습니다.
시행착오와 개발 기록은 아래에서 자세하게 확인 가능합니다.
👇 더 자세한 기록 및 과정 확인하기 👇
> 나는 BE 개발자 분들을 존경한다. (Cloud MongoDB 연동편)
> docker 코드 해석과 수동 배포 방식
워크스페이스 썸네일 이미지를 효율적으로 관리하기 위해, 클라이언트로부터 수신한 이미지를 직접 DB에 저장하지 않고 S3 버킷에 업로드한 뒤 S3 버킷 링크를 DB에 저장하는 방식을 활용했습니다.
이를 통해 워크스페이스 목록 한 페이지를 전송할 때 20장의 사진을 전송하는 것이 아닌 해당 파일의 URL만 전달하는 방식을 통해 API 응답 속도 개선과 DB 성능 최적화를 모두 챙길 수 있었습니다.
🌐 시스템 아키텍처 [서비스 흐름 살펴보기]
| FE | FE | FE | FE | FE |
|---|---|---|---|---|
| 권나연 | 이영재 | 이유진 | 최경일 | 홍현지 |
 @chichoc |
 @lee0jae330 |
 @Yujin |
 @inhachoi |
 @Honghyeonji |
여기까지 저희 서비스의 리드미를 읽어주셔서 정말 감사합니다! 😄
여러분께 BooLock의 이야기를 전할 수 있어 영광이었습니다.
"여러분의 첫 웹개발 여정을 응원합니다!" 😆