depilled

# 챕터 9: Components - 레고 블록처럼 조립하기 ## 서론 지금까지 우리는 HTML 구조를 만들고 CSS로 스타일을 입히는 방법을 배웠습니다. 하지만 실제 웹 개발에서는 같은 코드를 반복해서 작성하는 경우가 많습니다. 예를 들어, 웹사이트에 10개의 카드를 만든다면 같은 HTML 구조를 10번 복사해야 할까요? 이런 비효율적인 작업을 해결하기 위해 등장한 것이 바로 컴포넌트(Component)입니다. 컴포넌트는 레고 블록과 같습니다. 한 번 만들어두면 필요할 때마다 가져다 쓸 수 있고, 여러 개를 조합하여 복잡한 구조물도 만들 수 있습니다. React와 Next.js의 핵심은 바로 이 컴포넌트 기반 개발입니다. 이번 챕터에서는 컴포넌트의 개념을 이해하고, 실제로 재사용 가능한 컴포넌트를 만드..

# 챕터 8: Tailwind CSS 실전 활용법 ## 서론 지난 챕터에서 Tailwind CSS의 기본 개념과 주요 유틸리티 클래스들을 배웠습니다. 이제는 실제 프로젝트에서 활용할 수 있는 고급 기능들을 알아볼 차례입니다. 현대 웹은 다양한 기기에서 완벽하게 작동해야 하며, 복잡한 레이아웃을 효율적으로 구성할 수 있어야 합니다. 이번 챕터에서는 Tailwind CSS의 반응형 디자인 시스템, Flexbox와 Grid를 활용한 레이아웃 구성, 그리고 커스텀 설정을 통한 확장 방법을 배워보겠습니다. 이 내용들을 마스터하면 여러분은 어떤 디자인 요구사항도 Tailwind CSS로 구현할 수 있게 될 것입니다. ## 본론 ### 반응형 디자인의 핵심 원리 Tailwind CSS는 모바일 우선(Mobile-Fi..

12 편. 민수의 여섯 번째 회귀 -민수- 부서졌던 목뼈가 맞춰지듯 이어졌다. 어긋난 관절이 제자리를 찾아갔고, 신경이 다시 연결되면서 감각이 서서히 돌아왔다. 고통이 거꾸로 흐르며 사라졌다. 비행기가 조립되듯 복원되었다. 부서진 동체가 다시 모이고, 찢어졌던 선체가 봉합되었다. 유리 파편이 튕겨 올라 창문으로 끼워졌다. 폭발과 함께 터져 나간 불길이 거두어지고, 화염 속에 일그러졌던 시간마저 되돌아갔다. 그리고 유진의 목소리가 울렸다. “드디어 알았네요… 생명의 은인을.” 민수는 기체가 원래의 자세로 돌아가며 과거를 향해 휘몰아치는 감각을 온몸으로 견뎠다. 그 순간 그의 시야는 기내 좌석을 지나, 공항, 그리고 아침의 호텔방까지 거꾸로 펼쳐졌다. 그러나 그는 알고 있었다. 이 모든 것이 다시 반복될 뿐..

11 편. 다섯 번째 회귀 - 잠재의식(2) 비행기는 일정한 속도로 하늘을 가르며 나아갔다. 창밖으로 보이는 구름층이 끊임없이 흘러갔다. 재홍은 기내 방송에서 들려오는 기장 안내 멘트를 흘려들으며 자리에서 몸을 기울였다. 현재의 유진은 옆자리 재홍과의 어색함을 덜어내려 여러 대화를 나눴으나 이윽고 소재가 줄어들자 둘은 조용히 지겨운 비행 시간을 보내고 있었다.이 둘의 상황과 달리, 승무원들의 얼굴에는 미묘한 긴장감이 흘렀다. 그들은 조용히 속삭이며 서로 신호를 주고받고 있었다. 현재의 유진은 본능적으로 무언가 이상함을 느꼈다. 뭔가 잘못된 것일까. 유진은 잠재의식 속에서 밀려오는 불안감을 느끼고 있었고 불길한 느낌을 떨쳐내기 위해 재홍에게 말을 걸었다. “그러니까, 어릴 때 그 사고만 아니었으면 난 ..

10 편. 다섯 번째 회귀 - 잠재의식(1) -재홍의 시점- 눈을 떴다. 익숙한 천장이 보였다. 이 호텔방도, 아침의 공기마저도 변함없었다. 침대에서 일어나 시계를 확인했다. 이번에도 같은 시간이었다. 피곤한 몸을 이끌고 샤워를 마친 뒤 짐을 챙겼다. 이번에도 공항으로 가야 했다. 호텔 문을 나서면서 어쩐지 이 패턴이 지겹다는 느낌이 들었다. 하지만 그는 단순한 피로감 때문이라 생각하며 고개를 저었다. 택시를 타고 공항으로 이동하며 창밖을 바라보았다. 비는 여전히 내리고 있었다. 공항에 도착해 출국장으로 향하는 길, 그는 자연스럽게 민수에게 전화를 걸었다. "네, 누구십니까?" "피해 보상 담당자입니다. 피해자 분께서 겪은 사고의 보상 건에 대해 말씀드리고 싶습니다." 민수는 짧은 침묵을 흘린 뒤, 담담..

9 편. 네 번째 회귀 - 이유 모를 사고(1) -유진의 시점- 유진은 질식의 고통을 똑똑히 기억했다. 다시는 같은 실수를 반복하지 않으리라 굳게 다짐하며 공항에 도착했다. 불안과 초조함이 그의 온몸을 감싸고 있었다. 공항에 들어서자 그는 무의식적으로 주변을 둘러보았다. 이번에도 재홍과 부딪혀 몸이 자유로워질 수 있기를 간절히 기대했지만, 그의 기대와 달리 재홍은 능숙하게 그를 피해 빠르게 출국장으로 들어가고 말았다. 유진은 허탈감과 함께 이번에도 자유 의지를 가지지 못한 채 정해진 흐름에 따라 움직여야 한다는 사실을 깨달았다. 그러나 예상했던 휠체어의 남자는 보이지 않았다. 알 수 없는 위화감이 유진의 등을 타고 올라왔다. ‘뭔가 달라졌다…’ 불길한 기운을 떨쳐내고 티켓 발권대로 향했다. 티켓을 발급받..

8 편. 세 번째 회귀 - 질식사(2) -재홍의 시점- 비가 부슬부슬 내리는 새벽이었다. 재홍의 세 번째 회귀였다. 창문을 두드리는 빗소리에 재홍은 자연스럽게 눈을 떴다. 한동안 천장을 바라보며 숨을 몰아쉬었다. 몸이 무거웠다. 이상한 꿈을 꾼 기분이었다. 하지만, 곧 시계를 확인하고 침대에서 일어났다. 오전 5시 30분. 원래라면 출국 준비로 분주했을 시간보다도 한참 이른 시간이었다. 그는 대수롭지 않게 여겼다. 어차피 한국으로 돌아가는 날이었다. 일찍 공항에 도착해 여유 있게 움직이면 된다. 샤워를 마친 후 옷을 차려 입고, 가방을 정리했다. 택시를 불러 호텔을 나서며 습기 찬 공기를 들이마셨다. 창밖으로 빗방울이 흘러내렸다. 택시는 조용히 공항으로 향했고, 그는 별생각 없이 창밖을 바라보았다. 공항..

-민수의 시점-의식이 사라졌다. 질식으로 인한 죽음은 고통스러웠다. 폐가 터질 듯한 압박감, 몸속에서부터 타들어 가는 듯한 느낌. 그는 몸부림치고 싶었지만, 이미 아무것도 느낄 수 없었다. 주변의 소음이 점점 멀어졌고, 그의 감각은 완전히 끊어졌다. 그러나, 죽음 뒤에 찾아온 것은 끝이 아니었다. 강제로 열린 눈. 되살아나는 감각. 시간이 거꾸로 흐르기 시작했다. 이미 사망한 그의 몸이 좌석으로 되돌아갔다. 얼굴을 감싸던 산소 마스크가 다시 제자리로 돌아갔고, 공기 중으로 사라졌던 연기가 천천히 기체 안으로 흡수되었다. 비명이 멎고, 승객들이 마치 되감기된 영상처럼 차분한 얼굴로 바뀌어 갔다. 수화물 칸에서 퍼져나가던 불꽃도 사그라졌다. 타들어가던 플라스틱이 원형을 되찾았고, 기체의 벽면에 붙어있던 재가..

6 편. 민수의 두 번째 회귀 - 비행기 추락(2) -민수의 시점- 숨이 턱 막히는 느낌. 다시 한 번 비행기 안이었다. 창밖은 어두웠고, 기내의 비상등이 깜빡거리고 있었다. 그는 숨을 고르려 했지만, 가슴만이 심하게 요동쳤다. ‘또 다시.. 돌아왔다. 이번이 두번째인가’ 그는 이해할 수 없었다. 이번에도 죽음을 맞이했지만, 다시 깨어난 곳은 비행기 추락 직전이었다. 주위의 비명소리도, 흔들리는 기체도 그대로였다. 하지만, 더 이상 현실에 집중할 수 없었다. 이 반복되는 죽음과 회귀 속에서, 그의 의식은 점점 과거로 침잠했다. 그의 눈앞에 떠오른 것은 자동차 사고의 기억이었다. 밤이었다. 비가 내렸다. 자동차 유리에 맺힌 빗방울들이 가로등 불빛을 받아 일렁이고 있었다. 민수는 운전대를 잡고 전방을 주시하..

5 편. 민수의 첫 번째 회귀 - 비행기 추락(1) -민수의 시점- 어둠이 몰려왔다. 뼛속까지 스며드는 공포와 함께. 기내의 혼란스러운 비명과 흔들리는 기체, 무언가가 충돌하는 소리, 그리고 곧바로 찾아온 무중력의 순간. 민수는 자신이 속수무책으로 추락하고 있다는 사실을 알았다. 이미 큰 사고를 경험한 적이 있었기에 익숙해야 할지도 모른다고 생각했지만, 죽음 앞에서는 결코 익숙해질 수 없는 법이었다. 그가 마지막으로 본 것은 바다. 짙푸른 어둠 속에서 거칠게 출렁이는 물결이 비행기를 집어삼키는 순간, 모든 것이 끝났다고 생각했다. 그러나—갑자기, 온 세상이 반대로 흐르기 시작했다. 무너져 내린 기체 조각들이 원래 있던 자리로 되돌아갔다. 부서진 천장이 다시 붙었고, 깨진 유리들이 날아올라 원래의 형태를 ..