TIL(2021.01.29)

HTML tag를 통한 wireframe

• 와이어 프레임(wireframe)이란 골격이라고 표현 할수 있으며 비교적 단순한 도형만을 사용하여 제품의 인터페이스를 시각적으로 묘사한 것이다.
• 아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도이다.
• 와이어 프레임의 가장 큰 목적은 영역구분 이다.
• 와이어 프레임을 보았을때 어떤 목적성을 가졌는지 보이게 하는것이 좋은 와이어 프레임과 나쁜 와이어 프레임을 나누는 기준이 된다.

아래는 와이어 프레임 설계의 예시이다. 아래의 예시가 더 좋은 와이어 프레임이 되려면 뚜렷한 목적성이 필요해 보인다. 출처 : dontcodetired.com

CSS를 통한 디자인 작업

• Flex box 로 전체적인 레이아웃 잡기
• Flex box 에 대한 상세한 내용이 담긴 MDN
• HTML로 와이어 프레임을 설계한 후 그 와이어 프레임을 Flex box를 이용해 구현해 내는 것이다. 고로 손에 익을정도로 많이 시도 해보아야 한다.

회고

• HTML태그들을 통해 미리 골격을 짜놓게 되면 작업이 훨씬 수월하게 된다는것을 해보고서 몸소 깨달았다. 항상 작업하기 전에 HTML로 와이어 프레임을 짜는 습관을 들여야겠다.

• 처음 css를 입히려고 생각했을땐 굉장히 쉬울거라 생각 했지만 머릿속의 그려진 디자인을 구현해내기란 쉽지 않았다. 머릿속의 디자인을 mdn에 뭐라고 검색해야 나올지도 감이 안잡히고, 값을 어느정도 줘야 원하는 모양이 나올지도 모르겠는 막막한 부분들이 많았다. 그래서 이것도 해보고 저것도 해보면서 많은 시행착오를 겪었고. css는 정말 딱 아는 만큼만 할수 있는 분야라는 생각이 들었다. 훨씬 더 많이 공부를 해야 할것 같다.