[KBSC 2022] 전반적으로 이상하게 코딩하는 사람 : 나

⭐️ KBSC (KB국민은행 소프트웨어 경진대회) 홈페이지

KBSC

⭐️ DEF:CON 팀 홈페이지 (Ver. 2021)

Def:Con

---

회고라는 거창한 이름을 붙이기에는 조금은 부끄럽고 부족한, 그런 글의 첫 걸음을 드디어 뗀다.

어쨌든 내가 한 것에 대해 돌아보고 부족했던 점, 부끄러운 점을 짚어보며 앞으로는 그런 실수를 하지 않기 위해 작성하는 것이니, 부끄럽고 부족한 부분들을 가감없이 적어두고자 한다. 일종의 충격요법이랄까.

 

ECOmunity의 웹페이지 레이아웃을 잡으면서 어떤 바보짓들을 했는지 적어보고자 한다.

 

---

🎒 FE 기술 명세

- React with TypeScript

 

우선 나는 이번 프로젝트를 통해 타입스크립트를 처음 접했다. 정적이며 타입 체크가 엄격한 언어라고 알고 있었지만 한 번도 마주한 적이 없으니 지레 겁부터 먹은건 사실이었다. 도전해보지 않은 것은 원래 무서운 법이지.

 

그래도 팀원들이 그냥 자바스크립트처럼 작성하면 된다길래 그 말만 듣고 코드를 작성했다.

그래서 코드 전반적으로 보면 '타입스크립트 스럽지 않을' 수도 있다.

 

타입스크립트도 공부해봐야겠는데.

 

😮‍💨  질서 없는 레이아웃

먼저 메인 화면을 보면서 얘기를 하자.

보자마자 한숨부터 푹 나온다. 아무리 작업에 늦게 착수했고 속도감 있게 작업하느라 대충 했다지만 이건 너무한 것 아닌가...

좌측의 웹페이지 타이틀과 우측의 로그인 안내 메시지 컴포넌트가 한 선상에 있지를 않아....

 

그 뿐만이 아니다. NEW ECO 페이지와 OUR ECO 페이지의 코드는 "똑같다". 그런데 왜 이러는건가....

그리고 네잎클로버가 가득한 저 디자인 요소는 이렇게 작성되었다.

<NoticeBgImgStyle src={bgImgSrc}/>


const NoticeBgImgStyle = styled.img`
    width: 2400px;
    height: 1600px;
    position: fixed;
    z-index: -100;
    filter: blur(3px);
`;

배경에 저런 디자인 요소를 넣는게 아직 미숙할지도 모르겠다. 이 현상은 순전히 CSS3 속성에 대한 이해가 부족했다고 밖에 생각이 되지 않는다. position : fixed; 가 화근이지 않을까 그렇게 추측한다.

 

아무튼 이렇게 ECOmunity라는 하나의 컨셉을 가진 웹 페이지 내에서 별도의 기능을 하는 페이지 별로 중구난방인 UI와 질서 없는 레이아웃이 탈락의 많은 원인들 중 하나였지 않을까 싶다.'

 

😮‍💨  하드하게 픽셀 단위를 쓰는 이상한 스타일링

위의 NoticeBgImgStyle이라는 스타일드 컴포넌트를 다시 가져와보자.

<NoticeBgImgStyle src={bgImgSrc}/>


const NoticeBgImgStyle = styled.img`
    width: 2400px;
    height: 1600px;
    position: fixed;
    z-index: -100;
    filter: blur(3px);
`;

width와 height를 px 단위로 지정한 모습을 볼 수 있다. 

웹페이지는 항상 사용자가 화면의 100%로 띄워놓고 볼 것이란 장담을 할 수가 없다. 당장 나 조차도 멀티태스킹이 필요할 때면 스플릿 뷰로 반씩 띄워놓고 보고는 하는데 이건 그런 상황을 전혀 고려하지 않은 것이라고 볼 수 있다.

웹 브라우저의 크기를 줄이면 이렇게 고장나는건 당연하다.

em과 rem이라는 유연한 크기 지정을 위한 속성이 있음에도 하드하게 픽셀로 고정시켜 버린 건 부족한 시간에 빠른 레이아웃 구현에 목을 매달아버린 나의 큰 실책이라고 생각한다. 이 이후로는 웹 레이아웃을 작성할 때 px 단위를 지양하고 유연한 em, rem을 최대한 지향하고자 노력을 하고 있다.

 

😮‍💨  아직도 미숙한 flex 속성 다루기 / 미숙한 컨벤션

OUR ECO 페이지의 게시글 썸네일 컴포넌트를 한 번 보자.

내가 생각했던 이 컴포넌트의 레이아웃 구성을 도식화 해보면 다음과 같다.

하단의 복잡한 레이아웃의 코드는 이렇다.

const PostThumbTxt : React.FC<Props> = (props) => {
    return(
        <PostTxtGlobalStyle>
            <CategoryStyle>
                <p>업사이클</p>
            </CategoryStyle>
            
            <PostTxtTitleStyle>
                <p>{props.title}</p>
            </PostTxtTitleStyle>
            
            <OtherContetnsStyle>
                <LikeStyle>
                    <FontAwesomeIcon icon={faLeaf} color="#14C38E" size="2x"/>
                    <p>{props.recommend}</p>
                </LikeStyle>

                <WriterDateStyle>
                    <p>{props.author}</p>
                    <p>{props.date}</p>
                </WriterDateStyle>
            </OtherContetnsStyle>
            
        </PostTxtGlobalStyle>
    );
};

const OtherContetnsStyle = styled.div`
    font-family: 'Pretendard-Regular';
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
`;

const LikeStyle = styled.div`
    font-family: 'Pretendard-Regular';
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-left: 20px;
    margin-top: 0px;

    p{
        font-size: 15pt;
        margin-left: 10px;
    }

`;


const WriterDateStyle = styled.div`
    font-family: 'Pretendard-Regular';
    font-weight: bold;
    font-size: 20px;
    margin-right: 20px;
    padding-bottom: 40px;

    p{
        margin: 0;
    }
`;

const CategoryStyle = styled.div`
    font-family: 'Pretendard-Regular';
    font-weight: bold;
    font-size: 15pt;
    width: 100px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: #14C38E;
    margin-left: 26px;
    margin-top: 20px;
`


const PostTxtGlobalStyle = styled.div`
    width: 450px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    color: #000;
    background-color: #fff;
`;

const PostTxtTitleStyle = styled.div`
    font-family: 'Pretendard-Regular';
    font-weight: bold;

    p{
        margin-left: 30px;
        font-size: 15pt;
    }  
`;

중구난방으로 flex 속성을 사용한 것이 보인다. 

거기다가 각 분류별 속성을 적용하는 데에 있어서 특별한 규칙성이 없어 복잡한 모습이다.

혼자 코딩을 하더라도 이런 코드 컨벤션은 가독성을 높이는 중요한 요소인데,

팀 작품인데도 이런식으로 코드를 작성한 것은 모자람이 많다고 느껴지는 부분이다.

 

---

👨‍💻 개선점

- 각 컴포넌트의 크기, 마진, 패딩 등에 대한 속성은 px 단위 하드코딩이 아닌 em, rem 같은 유연한 단위 사용을 지향하자.

- 코드 작성시 스스로, 혹은 팀의 컨벤션을 작성하고 해당 컨벤션에 의거하여 깔끔하게 코드를 작성하자.

- css position 속성에 대한 확실한 이해를 바탕으로 사용하자.

- css flex 속성에 대한 확실한 이해를 하자.

 

오늘은 이렇게 내가 작성한 ECOmunity-FE 내 레이아웃 관련된 아쉬움을 정리하고 개선점을 도출해보았다. 그럼에도 아직도 부족하고 미숙하고 부끄러운 점은 많다고 생각되지만 내 실력이 아직 부족하여 어디가 어떻게 부족하고 아쉬운지 알 수가 없다. 그냥 보기에 안이쁘게 보이는 것 뿐... 때문에 나중에 더 발전된 모습으로 보고 느끼고 싶다.

 

내가 이 프로젝트에서 담당한 부분은 레이아웃과 디자인 뿐이어서 더 이상 회고를 하고 싶어도 할 건덕지가 없다.

시리즈로 기획한 카테고리였는데 더 이상 쓸게 없다니...

혹시라도 더 쓸 글이 생기면 이어가도록 하겠다.