[2023.02.17]-CSS를 활용한 계산기 목업(mockup)만들기

오늘은 어제 배운 flexbox를 활용한 와어프레임 구성 및 개체의 정렬 방법을 활용하여 계산기 목업을 만들어보았다.

위 이미지는 코드스테이츠 강의에서 볼 수 있는 튜토리얼 계산기 목업이다. 기본적이고 심플한 형태의 계산기 모습이지만

div 박스들과 버튼을 정렬하는 과정에서 예상치 못 한 난관에 부딪히는 경우가 꽤 있었다.

각각의 개체들을 정렬하는 과정에서 사용되는 태그 및 속성들을 유심하게 살펴보면서 튜토리얼을 따라갔지만,  배운 내용을 토대로 나만의 계산기 목업을 만들어보려고 하니 막상 진행이 잘 되지 않았다. 

이런 느낌의 계산기 목업을 만들고 싶었다

처음엔 튜토리얼에서 만든 계산기에 약간의 기능 추가나 색상 변경 정도만 하려고 했지만, 코드스테이츠 크루님께서 보여주신 전 기수 분들의 작품들을 보게 되자 나 역시 조금 더 퀄리티 있는 과제물을 만들고 싶은 마음이 생겼다. 차라리 이 계산기처럼 비슷한 컨셉의 이미지들을

좀 더 찾아보고 참고한 후에 작업에 착수하면 더 좋았을 걸 하는 후회가 든다. 나는 시간이 부족하다는 생각에 아주 간단한 손그림 계산기 이미지 하나만 보면서 레이아웃을 작성하고 곧바로 코드를 써내려가기 시작했다.

그렇게 나오게 된 결과물이 매우 간단해보이는 이 계산기다. 물론 배운 것을 익히는게 주 목적인 과제이지만 다른 동기 분들이 만드시는 걸 보니 디자인적으로나 기능적으로나 너무나 뛰어난 작업물들이 많아서 자격지심을 느낄 수밖에 없었다. 코드스테이츠 크루 분들이 자주 말씀하시는 것처럼 자신이 얼마나 성장하고 있는가에만 집중하고 남들과 자신을 과하게 비교하지 않는게 좋다는 것은 알고 있지만, 나도 다른 분들처럼 누가 보아도 잘 했다고 평가할 만한 작업물을 만들고 싶다는 마음이 생겨나는 건 어쩔 수 없었다.

 

눈 깜짝할 새에 첫 주의 5일이 모두 지났다. 5일 내내 매일같이 배우는 것에만 집중하고 있지만 오늘 만들어 본 계산기 목업처럼 배운 것들을 활용해 볼 수 있는 작업을 통해 연습하고 몸에 익히는 과정이 필요하다는 사실을 절실하게 느낄 수 있었던 하루였다. 주말 동안에도 마냥 휴식하는게 아니라 주중에 배웠던 것들을 최대한 내 것으로 만들 수 있도록 혼자서 실습해 볼 계획이다.