mini project2 / 02 / 방향잡기

DOMADO·2025년 2월 9일

목록 보기

2/5

🎯 목표 : 네이버페이 결제창 ST 구현

🤷🏻‍♀️ How ?

① 기본 스타일 틀을 먼저 만들고, 코드를 이식하자

🟢 장점 :
전체적인 UI 구조를 먼저 잡아놓고 시작할 수 있어, 디자인이 한눈에 보인다
프론트엔드 작업이 주가 되는 경우, 화면을 보면서 개발할 수 있어 직관적이다
🟡 단점 :
기능을 구현하려면 추가적인 수정이 필요할 수 있어, 또 손봐야 하는 경우가 많음
예측하지 못한 UI/UX 문제가 발생할 수 있음

② 위에서 부터 하나씩, 만들면서 이식해보자

🟢 장점 :
하나씩 만들어가면서 기능과 UI를 동시에 구축할 수 있어, 개발 중 수정이 적음
필요한 요소를 순차적으로 추가해가므로, 코드 흐름을 이해하기 쉽다
초보자가 코드 흐름을 익히기에 적합하며, 기능을 하나씩 확인하면서 개발할 수 있음
🟡 단점 :
구조를 미리 확정하지 않으면, 중간에 UI/UX가 꼬일 가능성이 있음
스타일이 점진적으로 추가되므로, UI가 처음부터 깔끔하지 않을 수 있음
전체적인 디자인이 미리 보이지 않으므로, 스타일링을 나중에 하려면 시간이 걸릴 수 있음

✅ ②번 방식으로 진행 ! (지금)

이전에 ①번 방식으로 진행하다가, 실패하였다. (밑에 서술)


- 기능 중심으로 개발해야 하는 경우 (예: 네이버페이 결제 API 연동)
- 초보자가 전체 흐름을 이해하면서 진행하고 싶을 때
- 코드 복잡도를 낮추고, 단계별로 완성도를 높이고 싶을

👆 네이버페이 결제창

👇 네이버페이st 결제창

- - - - - - - - - - - - - - - - 

처음에 어떻게 방향을 잡을지 몰라서, 고민했었다.
이미 기존에 적힌 오래된 문법의 php 코드와 css 파일 등 . .

수정해가면, 오히려 더 복잡할 것 같아서,
①번 방식으로, 기본 비슷한 디자인 틀을 만든 후, 코드를 이식했다.
css파일도 이미 작성 되어 있고, 충돌을 우려해서,
!important 강제적용과, 라인에 직접 스타일을 모두 적었다.

- - - - - - - - - - - - - - - -

 비효율의 끝판왕 ..
 기존의 css파일 경로도, 정확하게 모르겠고,
 이미 작성된 css 코드와 충돌을 우려해서,
 강제적용과 코드 자체에 하나씩 스타일 작업을 했다.
 우선 이렇게 해서 어찌저찌 비슷비슷하게 작업은 하고 있었다 ..
 
 중간에 잘 못 된 방법이라는걸 알고 있었지만,
 이미 이때까지 하나씩 모두 적용을 했고, 시간을 투자해서.
 일단 이 방법으로 계속 밀고 나갔다...🤦🏻‍♀️
 
 #손실회피성향 #기회비용

⚠️ 문제는, 문제가 발생했을 경우다.

정상 작동하다가, 어느 부분에 진입 후 부터, 문제가 생기기 시작했다.

원래 작동하는 버튼이 안 한다던가, 보여하는게 안 보인다거나, 무반응 등.

하나를 고치면, 다른 한쪽이 문제가 생기고, 그렇게 고치다 보니, 효율도 안 좋고
시간도 많이 잡아 먹고, 이건 아니다 싶어서. 작업을 초기 상태로 롤백했다.

그 후, ②번 방법을 채택 하여, 기능적인 부분을 먼저 완료 후

하나씩, 디자인 작업을 하기로 했다.

- CSS도, 기존의 파일 최하단에 주석으로 영역을 나누고, 네임스페이스 방식으로 진행하기로 했다.

기능부분은 이미 이전에 작업을 했어서, 크게 문제 없이 빠르게 완료 및 테스트 했다.

기능부분 작업 하면서, 필요한 최소한의 디자인만 우선 하고 있다.

✅ 기능 체크 리스트

우편번호찾기 옆 인풋 박스 제거 ⭕

결제방식 가로 👉 세로 ⭕

배송메모 select 처리 ⭕

이메일 인풋 박스 제거 ⭕

🔥 이제 디자인 작업만 하면 끝이다.

이미, 작업한 경험이 있으니, 디자인 부분은 이전 ①번 방식의 오류를 생각하면서, 작업해야겠다.

* * * * * * * * * * * * *

그때는 통으로 디자인 다 해서,
코드를 넣어서 오류 잡는게 너무 손이 많이 갔는데,
하나씩 디자인 작업을 하면서, 기능단 테스트를 하면,
그때 그때 수정이 바로 가능하니까,
오류 잡는 부분도 쉽게 해결 될 것 같다. 

* * * * * * * * * * * * *