최근에 시간이 좀 많아서 혼자 생각하던 웹 앱 몇 개를 만들어봤습니다. 

 

- Django 기반 웹 앱 : 부트스트랩 이용해서 디자인

- DRF + next.js 웹 앱 : 테일윈즈 + 플로우바이트

- 라이믹스 위젯 : 바닐라 CSS (?)

https://xetown.com/download/1831996

 

이렇게 만들어 보면서 처음으로 프론트엔드를 풀로 직접 작성해봤는데요, 이번에 느낀게 프론트엔드 왜케 어려운가 입니다.

로직 자체는 금방 끝나는데 디자인 쪽을 시작하면 어김없이 여기저기서 막히는 부분이 나오는데..

저의 미적감각으로 애초에 예쁜 디자인은 바라지도 않고, 그냥 이 컴포넌트가 제발 원하는 위치로만 가주면 좋겠는데 왜 안되는지 미쳐버리는줄 알랐습니다. 

부트스트랩이든 테일윈즈든 바닐라 CSS 든 뭐든 간에 뭐하나 제 마음대로 되지가 않더라구요.

개인적으로는 버튼 가운데 배치하는게, 메모리 취약점 찾아서 원하는 어드레스에 쉘코드 넣는거보다 더 어려웠떤 기분입니다.

그래도 재미있는 점은 결과물이 시각적으로 구현되니 뭔가 하나씩 완성될때마다 보람차더라구요. 

최근에 재밌다고 느낀게 스트림릿이라는 파이썬 패키지인데요, 프론트 지식없이 파이썬 코드만으로 웹 앱을 만들어주는 라이브러리인데요 (물론 퍼포먼스는 포기) 이번에 프런트 쪽 코딩하면서 너무 힘들어서 한동안 웹은 이런 간단한 라이브러리로만 코딩하고 싶네요. ㅎㅎ

 

 

 

  • Lv12
    말씀주신 것처럼 display flex를 활용해도 가운데 정렬하면서 원하는곳에 위치 시키는것이 참 어려운일인것 같습니다. ㅎㅎ

    그래도 최근 들어서는 css와 html에 못보던 기능이 정말 많이생겨서 수월하긴 하더라구요.
    css에 gap 이런 것도 생기고(구형 브라우저는 지원안하지만요. ㅎㅎ )
  • Lv8
    요즘은 frontend 도 build 를 하기 때문에, 팀단위로 분업 개발을 하더라구요.
    좌표가 잘 안맞는건 아마도 framework를 사용해서 이기 때문입니다.
  • Lv37

    CSS는 뭐랄까, 일반적인 프로그래밍 언어들과 사고방식이 다릅니다.

    많이 단순화된 설명이긴 하지만, 일반적인 언어에서 A를 B에다 놓으려면 A를 B로 보내!! 라는 명령을 내리면 그만입니다. 특정한 어드레스에 쉘코드를 주입하는 것은 position: absolute를 남발하는 것과 같지요. 반면, 모범적인 CSS는 A의 무게중심이 자연스럽게 B에 자리잡도록 상하좌우에서 힘의 균형을 맞춰 준다는 느낌입니다. 잘 만들면 마치 도미노가 차례로 쓰러지듯, 화면 크기가 바뀌어도 완벽하게 촤르륵 넘어가는 마법을 볼 수 있습니다. 반면, 균형이 깨지면 와르르 무너져 버려요. ㅎㅎ

    CSS는 쇼핑이 아니라 사냥입니다. if문으로 직접 조건을 걸어서 원하는 물건을 집어드는 것이 아니라, 특정한 태그 구조가 형성되면 자연스럽게 어떤 규칙에 걸리도록 덫을 짜 놓고, 여기저기 적당한 장애물을 배치해서, 내가 원하는 사냥감(?)이 덫에 걸려들도록 유도해야 합니다. 그 사냥감은 처음부터 화면상에 있을 수도 있고, 갑자기 생겨날 수도 있습니다. 그것까지 예측해서 어떻게 반응할지 미리 계획해 둬야 하죠. 이 사고의 전환이 무척 어려운 것 같습니다.

     

    물론 외워야 하는 단어가 압도적으로 많다는 점도 한몫을 하고요.

  • Lv37 Lv2
    말씀대로 원래 프로그래밍하던 사고를 버려야 하는거 같아요.
    꼼수로 대충 적당히 배치해두면 모바일에서 화면이 엉망이 되버리거나 예상치 못한 부분에서 모양이 이상해지더라구요. 근데 말씀처럼 코드 잘 짜져서 도미노 넘어가듯 잘 전환이 잘될때 뭔가 엄청난 쾌감이.. ㅋㅋ
  • Lv37 Lv12

    비유가 좋습니다! 사냥감 생김새가 가지각색이라서
    덫 종류여러개를 만들어두고 쓰고 있습니다. ㅎㅎ

  • Lv2
    CSS는 쇼핑이 아니라 사냥이다..
    명언이네요. ㅎㅎ